背景
最近のweb制作の現場は様々かと思いますが、私の請け負う現場ではサムネイル画像が複数必要な場面が多々ありました。私ではなく他の担当者さんが作られることや、私のときもありました。しかも、複数作成してからの変更や、サイズ変更など様々な変化する要望にスピーディにお答えせねばという状況でした。（私ははっきりいって追いついておりませんでしたが・・・）
そこで、今振り返ってこうすればよかったかなぁという反省を含め効率の良いサムネイルやまたアイコンのつくり方を掲載しておきたいと思います。（もっと他に良い方法もあるのでしょうがmacoなりのです）
サイズは、正方形？長方形？
コーディングまで影響を与えるのでここは最初に決めておけばよかったーというところでした。特にアイコン的に使うものは正方形だとぴしっと見えやすかったです。またサイズですが、200px×200pxで表示させたいと考えても、最近のスマホやＰＣは解像度が高くお美しくみえるので、倍ほどの400px×400pxなどで作ったほうがお美しくみえます。また、「線」の太さを指定してしまうと拡大縮小で困るので線のアウトライン化などの処理も必要です。
イラストレータで効率よく統一されたデザインで
最初はXdやphotoshopなども使っていたたりもしたのですが、やはりこういうのはイラストレータの出番でした。なんといっても、アートボードを並べて作れるという点がよいです。
最初、少しづつ画像作成を依頼されていたときは、1つ1つのアイコンファイルに名前をつけて保存していましたが、「macoさん、アイコンAとアイコンFを修正してください」と言われたときに、えっとどれだっけ、いつの変更のはこれだっけ、、、みたいな面倒なことになります。
そんなときには、1画面でアートボードを複数並べることで一目瞭然だし作業効率がよいのです。
このサイトでカテゴリごとのサムネイルを用意する例をあげてみます。
アートボードの画面から複製すると、横に9個並びましたので↓下の赤枠のところを押して並べ替えました。見やすいかなと思うように調整します。今回は横3で折り返します。
次に同じ色、フォントでカテゴリごとに文字を変えていきましょう。だいたいこんなカテゴリかな・・・と。
これをそれぞれpngに書き出してアップして使います。
こうやって一つのファイルで作っておいて、修正がきたらこれを触る。と。
アートボードの名前を付けていって完成です。