技術も知識もなくても、ロゴを自分でデザインする方法

自分のサイト用にロゴを作りたい！

こんにちは！カトケイです。

WEBサイト大改装に伴って、サイトのロゴも変えました！

このロゴ、実は簡単に作れるんです！今日は、このロゴを作る順序と、作るために使ったツールを２つご紹介しますね。

こちらでは、ワードプレスに組み込むことを前提にご紹介していますが、読んでいただければ、そのほか、FacebookページなどSNSにも使えるロゴデザインをすることができます！

今回、使ったITツールとサイト

Canva　ロゴデザインを作成するための、オンライン・無料で使える画像編集サービスです。デザインテンプレートが豊富なので、テンプレートを利用してロゴをカンタンに作ることができます。
flaticon.com　ロゴデザインを作るときに使ったピクトグラフ（またはアイコン）を無料でダウンロードできるサービスです。

ロゴを作ろう！

ロゴのサイズを確認しよう！

まず、ウェブサイトを持っている方は、ロゴのサイズを確認しましょう。ワードプレスのテンプレートを使っている方なら、「テンプレート名_ロゴサイズ」などで検索ができるはずです。

もしくは、ワードプレスのダッシュボードから「外観→カスタマイズ」をクリックしていただくと、その中にロゴをはめるための設定項目が出てくるはずなので、そこから確認してください。

私と同じlightningというテンプレートを使っている場合は、「外観→カスタマイズ→lightningデザイン設定」でサイズを確認できます。lightningのロゴサイズは、280×60です。

Canva（カンバ）を使ってみよう

デザインに、むずかしい知識はいりません。Canvaというオンラインツールがあれば！有料プランもありますが、サインアップ（無料登録）をすれば使えるようになります。

Canva上にキャンバスを作ろう

サインアップ、ログインしたら、左上の「Create a design」をクリックします。
すると、作りたい画像のサイズを入れる画面が出てくるので、そこに横のサイズと縦のサイズをいれて「Create design」をクリックします。私と同じlightningのデザインプレートを使っている場合は、「280」と「60」ですね。
デザインを作るためのキャンバスが出てきます。これ以降、デザインになりますが、使い方は使い方はパワーポイントに似ています。

テンプレートを使ってデザインをしよう

インスピレーションで自由な使い方をすればよいのですが、それでは、自由過ぎてデザインできない、という方は、左の「template」ボタン（①）をクリックして、自分のイメージに近い画像を選択します。その元のイメージを使って文字や背景を変えてデザインしたり、テンプレートを参考にしてデザインをしましょう。私は、「文字+ロゴ」のテンプレートが気に入ったので、写真の２つのテンプレートを組み合わせてデザインしました。ヘッドホンのデザインを参考に、文字は黄色バナーのように手書き風、同じバナーの★のデザインをお借りし、完成させよう、と決めました。
②をクリックして、文字の内容、フォント、大きさ、色を変更します。フォントの修正コマンドは③の部分にあらわれます。
自前の使いたい画像は、④の「Uploads」からCanvaにアップロードすると使えるようになります。私が使ったダイアモンドの画像や、ヘッドホンの画像などは「ピクトグラフ」とか「アイコン」と言いますが、これは、こちらのサイト（flaticon.com）からダウンロードしてきました。こちらも登録が必要ですが、無料で使えます。
ピクトグラフは、さまざまなデザインがあってデザインのワンポイントになりますので、ロゴマークを作るときに、とてもおすすめなアイテムです。
デザインそのものを消去したい、またはデザインをコピーしたい、という時は、⑤で操作します。ゴミ箱マークが消去で、書類が２枚重なっているマークがコピーです。

作成したロゴをダウンロードしよう

ロゴデザインが出来たら、ダウンロードします。①の下向きの矢印ボタンをクリックすると、ダウンロードの設定画面があらわれます。
ダウンロードしたいロゴデザインの横にあるチェックボックスをクリックして、
③の「Done」ボタンをクリック。
すると、④の画面が見えるようになります。画像ファイルの保存形式として「PNG」を選びます。今度は「Download」ボタンを押すと、作成したロゴイメージがダウンロードされます。

ワードプレス内にロゴを設置しよう

出来たロゴデザインを、さっそく使いいましょう！ワードプレスにログインし、「外観→カスタマイズ→lightningデザイン設定」を開きます。
ヘッダーロゴ画像というボタンがあらわれますので、それをクリックして、先ほど作成したファイルをアップロードします。アップロードしたら、「公開」ボタンをクリックしてくださいね。
ロゴデザインがワードプレスに組み込まれました！下の画像は、スマホで確認した画面です。もちろん、PC画面でも確認できます。