初心者がファビコンを作ったら、「デザイン」にちょっとだけ触れられた話

私は、絵が描けません!デザインが、できません!!

と、思っていたのですが。

やっぱりこのブログのファビコンがないとタブを開いた時に寂しいので、よっしゃやったろ、と思って一から作ってみました。ちなみにファビコンとは、favorite iconの略で、ウェブサイトのアイコンのことです。Google Chromeとかでタブを開いた時、サイトのアイコンとして出てくるちっちゃい画像、あれがファビコンです。これが私の新しく作ったやつ:

はい、初心者丸出しです。

ご覧の通り、洗練されたデザインではなく、まあ見た通り「の」と四角を組み合わせただけなのですが、自分の手で何かを作ってみると嬉しいものです。

さらに面白かったのは、自分でやってみると「デザインとは何ぞ、絵とかの天才がやるものなのか」と思っていたのが、「あ、こう言うことなの?もしかして?もしかしたらこんな感じ、みたいな感じ?」ということがちょっと見えてくること。

と言う訳で、デザイン完全初心者がファビコンを作ったプロセスとその過程で気づいたことを記録したいと思います。

1. どういうデザインにするか決めた

ここがこのブログ記事で一番大事な部分だと思います。クロームのデフォルトの紙切れみたいなのはもういやだ。でもどうしたらいいのか分からない。自分のサイトの個性みたいなのは出したいけど、新しく何かをデザインとかはできない。

ここしばらくはこの段階で腰が重くなっちゃってたんですけど、昨日は「もうやっちゃうしかない」と言うことで、どんなに雑でもいいからとにかく作ろうと思いました。この「どんなに雑でも下手くそでもいいや」という思い切りは、どんなジャンルであれ、不慣れな新しい作業をやる上で大切なんじゃないかな、と思います。

という訳でデザインらしきものをこうやって考えてみました。

  • ブログの内容に即したデザインにしたい
  • でもまだ記事のジャンルも定まってないし、内容も何も…
  • タブを見たら、なんとなくこのブログだって分かるようにしたい
→内容じゃなくて、タイトルの「のだもなのだ」から取ればいいんじゃない?
→一文字だけのデザインなら、フォントを選ぶだけで良さそうで簡単そうだから、「の」にしよう
→でも白地に「の」は寂しいから、色付きの背景にしよう
→ブログトップの写真が青っぽいから、色は水色にしよう

あとで調べていて気づいたんですが、この「デザインの目的→それに即した色や形」と言う過程は、プロの方の過程とも通ずるものがあるみたいです。なんというか、デザイナーの人の手にかかったら、カッコ良い見た目のものが魔法みたいに出来上がるんじゃないか、というイメージがあったのですが、そうじゃないんだと知りました。目的を踏まえた上でそれに即したものを作る、んですね。

LIGのこのブログ記事、デザイナーの方の思考プロセスが一歩一歩丁寧に解説してあって、参考になります。

というわけでLIGみたいにかっこよくはないけれど、私のめっちゃ簡略バージョンの「デザイン案」が出来上がりました。

ここから先は、実際に自分で似たようなお手製ファビコンを作ってみたい方のための記録です。デザイン思考、みたいなのは全く出てきません。済みませんのでご理解の程よろしくお願いします。

2. とりあえずフォントをダウンロードした

見た目がいい「の」が必要なので、「フリーフォント」で検索します。私が参考にした便利でおしゃれな無料フォントまとめをいくつかご紹介します。
今回私は「あさご本丸ゴシック」を使いました。可愛いです。

3. 文字の画像をpngファイルにした

さて、ダウンロードして手に入れたフォントをどうやってpngファイルにするか、なのですが。あの…もっといい方法がきっとあるはずだと思ったんですが、お恥ずかしながら初心者なもので、思いついたたった一つの方法でアナログにやりました。

ワードで「の」って打って、最大のサイズにして、スクリーンショットをとりました。デスクトップにスクリーンショットのjpgファイルができるので、それをpngに変換します。画像の名称の最後をpngにするだけです。

4. pixlrと言う無料のオンライン画像編集サービスを使って、背景の白を消した

無事に「の」は手に入れた!次は画像を編集しないといけません。私はPhotoshopを持っていないので、pixlrという無料画像編集サービスを使いました。初心者でも使いやすく、完全に無料で色々できるので、ちょっと画像をいじってみたいだけ、という方にはこれ、おすすめです。

無事にpixlrを開いたら、背景に水色の四角を合成します。合成する前に、まず背景の白を消さないといけないので、ググった結果を参考に白を抜きます。この記事がとても参考になりました。

5. 新しいレイヤーを作って、青い四角をかいた

pixlrの右側のツールから新しいレイヤーを作って、左側のツールで青い四角を作ります。

 

6. 「の」の輪郭が変だったので、試行錯誤して、青くした

二つのレイヤーを合わせてみたところ、せっかくの選ばれし「の」の輪郭がなんかガタガタしています。拡大して見てみると、白い背景に合わせてちょっと赤っぽい色が輪郭に使われていることがわかりました。そのせいで背景の色が青に変わると輪郭がガタガタして見えるんですね。

しょうがないので、バケツのツールを使って一個一個赤いピクセルを青色に変えました。(実は途中でめんどくさくなったのでちょっと赤いのも残ってます)(ゆるして)

7. ファイルを保存した

pixlrで、ファイルをpng形式で保存したあと、そのpngファイルをfav.icon形式に変換します。違うインターネット環境の人もきちんと画像が見られるようにするためです。

オンラインで無料で形式変換ができます。

8. fav.iconファイルをwordpressにアップした

「サイトアイデンティティ」から、画像をアップロードするだけで簡単に設定できちゃいます。前はプラグインを入れないといけなかったりして色々めんどくさかったみたいですが、最新のワードプレスを使っていると一発です。

9. できたーーーーーーー

できました!ごく簡単なものではあるといえ、一からやってみると楽しいものです。一番大事なのは、なんとなーーーくデザインってこんな感じ?みたいなのが掴めた気がしたような気がしたこと。これで次に何かを作るときにあんまり怖くないし、「色の調整は大切なんだな」「フォントもデザインがいろいろなんだな」とか分かって、枝の広げ方が分かるのが面白いです。

というわけで兎にも角にも作ってみたので、飽きるかもっといいデザインを思いつくまでは、「の」でいく予定です。

Leave a Reply

Your email address will not be published. Required fields are marked *