本記事では非Webエンジニアの私が実施した「ブログ開設手順⑤」と題して、ロゴとアイコンをCanva(無料版)とGIMPを使って作成した手順を紹介します。
ブログ開設手順シリーズの過去記事も気になったら読んでみてください。
ブログ作成環境の選択編
レンタルサーバー契約・サイト開設編
HTTPSの設定編
WordPressのユーザー名（管理者名）を守る編
今回作ったもの
今回は「この記事を読んだ結果、何がどうなるの？」ってところから紹介したいと思います。
デザインが好みでなくても、作り方がわからないって人には参考になると思うのでぜひ読み進めてください。
ロゴ
ロゴはブログトップに出てくるサイト名やブランド名ですね。
次のように気に入ったフォントにできます。
私の場合、苦戦している感のあるフォントにしてみました。
アイコン
アイコンはブラウザのタブの横にある画像のことです。
デフォルトでは、使用していたテーマのアイコンが表示されると思います。
私の場合、テーマがCocoonだったので繭のアイコンから、四苦八苦から1文字取って「苦」だけにしてみました。
「苦」って何となく悩んでいる人の顔っぽく見えません？
作り方
出来上がりイメージができたところでロゴとアイコンそれぞれの私がやってみた方法を紹介します。
ロゴの作り方
Canvaでのデザイン
まずCanvaにアクセスして、アカウントを作成します。
Canvaは、デザイン初心者でも簡単に使えるオンラインデザインツールで、豊富なテンプレートやグラフィック素材を用意しています。
また、パソコンからだけでなく、iOS/Android用のアプリもあるため、隙間時間にロゴやアイキャッチ画像を気軽に作れそうです。
Canvaアカウントができたら右上の「デザインを作成」ボタンをクリックします。
続けて、カスタムサイズをクリックします。
幅：500px、高さ：100pxで「新しいデザインを作成」をクリックします。
作成画面に切り替わったら次の5ステップでロゴをデザインします
- サイドバーにある「テキスト」をクリック
- 「テキストボックスを追加」をクリック
- 追加されたテキストボックスにサイトタイトルを入力する
- フォントを選ぶ
- サイズを調整する
- 文字色を選ぶ
背景色が白でいい場合なら、後は作った後をダウンロードするだけで完了です。
ダウンロードは、右上の「共有」ボタンをクリックからできます。
背景色を透明にしたい場合は、Pro版のサブスクリプションに登録するか、後述するGIMPの作業を参考にしてみてください。
私はPro版を買うほどヘビーユーザーではないため、自分で背景色を透明にしてみました。
GIMPの作業に移る前に下準備として、白や薄い文字色にしたい場合は背景色をつけます。
（例では緑にしていますが、反対色を使った方が後の処理がやりやすいと思います）
背景色を付けたら、作ったロゴを共有ボタンからダウンロードします。
GIMPでの背景除去
次はダウンロードしたロゴを編集していきます。
編集にはGIMPを使います。
インストーラーはGIMP自体のダウンロードページや窓の森からダウンロードしてください。
GIMPは、photoshopの代用として使えるフリーのオープンソースの画像編集ソフトで、高度な機能や豊富なプラグインにより、写真やイラストなどの画像編集に幅広く利用されています。
GIMPがインストールできたら、GIMPを起動します。
「ファイル」タブから「開く/インポート」をクリックし、Canvaで作成したロゴを開きます。
ロゴが開けたら下記の操作を行い背景を除去します。
Canvaで画像をしていない場合は、右下の画像ファイル名を右クリックし、ロゴにアルファチャンネルされてるか確認してください。
- 左上のツールボックスから「ファジー選択」をクリック
- 背景部分をクリックし消したい箇所が選択されていればDeleteキーを打つ
- 背景がうまく選択できていない場合は、しきい値を大きくしたり、小さくしたり調整してみる
- 消したい箇所がなくなるまで、2,3を繰り返す
私の場合、閾値が約15の時は、「四」や「苦」の中を1度で選択できませんでした。
しかし、閾値を170にすると1度で選択できました。
（上の例では判定基準をCompositeから緑に変更しています。その場合45で消したい箇所を選択できました）
また、私の例のように複雑でない画像の場合、一度で選択できなくても複数回選択と削除を繰り返せばいいため、閾値にこだわらなくても大丈夫です。
削除すると次のようなグレーのチェック柄になります。
背景部分がすべてチェック柄になったか確認出来たら、「ファイル」タブから「名前を付けてエクスポート」をクリックします。
別名保存したくなければ、「上書きエクスポート」でもOKです。
私は、何かで背景ありのロゴ使うかなと思って一旦キープしました。
これで背景除去されたロゴの完成です。
WordPressへの取り込み
WordPressの管理画面のメニューからCocoon設定>Cocoon設定>ヘッダーの順でヘッダーの設定画面を開きます。
下にスクロールすると「ヘッダーロゴ」という項目があります。
ここの選択ボタンをクリックし、GIMPで背景除去した画像を選択します。
一番下までスクロールし、「変更をまとめて保存」ボタンをクリックします。
これでロゴの設定は完了です。
Cocoon設定繋がりで、ついでに説明すると、スキンという項目からテーマ全体のカラーや枠の形なんかが変更できます。
アイコンの作り方
アイコンはデザインを凝らない場合は、ロゴよりも簡単です。
Canvaでのデザイン
まず、Canvaを開いて、「デザインを作成」ボタンをクリックします。
次に検索窓に「ロゴ」を入力して、「ロゴ」を選択します。
あとは、次のようなステップで自分の好みに整えるだけ。
- 好みのテンプレートを選ぶ
- テンプレートの文字や図形のサイズ、色、フォントなどを自分好みに調整する
- 共有ボタンをクリック
- ダウンロードを行う
アイコンデザインの注意点は、アイコンのサイズが小さいことを忘れないことです。
テンプレート内では複数文字使われており、それにつられて複数文字入力したくなりますが、文字の場合1字が限界だと思うので、ぐっと我慢してください。
複数文字の場合、野球チームのマークみたいに重ねたデザインくらいかと思います。
漢字の場合、線が潰れてしまうので画数の少ない文字がいいかと。
（私の「苦」はギリアウトな気もしますが、悩んでいる顔文字っぽく見えなくないと自分に言い聞かせてます）
また、ブログで扱うテーマが住宅系なら家のシルエット、スマホ系ならスマホのシルエットなどイメージしやすいものがいいと思います。
WordPressへの取り込み
管理メニューから外観>カスタマイズを開きます。
次にサイト基本情報をクリックし、下にスクロールすると現れる「サイトアイコン」の「画像を変更」ボタンをクリックし、作成した画像を選択しましょう。
Canvaで作成した画像は500 x 500ピクセルですが、問題なく使用できました。
気になる場合は、画像をペイント等で開きサイズ変更で調節すると良いでしょう。
最後に「公開」ボタンをクリックするとアイコンの設定が完了です。
ついでにキャッチフレーズも書くと、ロゴの下に表示されるようになります。
位置を変えたい場合は、Cocoon設定>ヘッダー>キャッチフレーズの配置から変更できます。
まとめ・感想
以上のように、Canva(無料版)とGIMPを使ってロゴとアイコンを作成できました。
触ってみて思ったのは、どちらのツールの機能もまだまだ掘り下げられそうです。
特にCanvaの画像生成AIは面白かったので、近日記事を書こうと思います。
また、Canvaはアイキャッチ画像やスライドの作成にも使えます。
そのため、Canva Proも使う頻度や作りたいものによってはアリだと思いました。
最後に、ブログ開設手順⑤まで来てようやく自分だけのブログっぽくなってきました。
ここまでの設定や記事を書くのにレンタルサーバー契約から7日かかりました。
（可愛い娘から保育園の洗礼の2次被害を受け、3日ほどダウンしていましたが…）
ここまでの記事がブログをこれから開設しようと思っている人の助けになれば幸いです。
まだまだデザインやセキュリティ等の設定の方法を勉強しなければならない身のため、また勉強して身に付いたら記事にしたいと思います。
コメント