最近はCanvaの普及の勢いがすごいのですが、それでもやはりクォリティをコントロールしたいと思った時にはAdobeのアプリが優れていると思います。
今回はIllustratorを使った画像の作成方法をご紹介します。
Illustratorといえば、印刷物を作る際に使用することが多いのですが、WEB用の画像もあまり難しくはありません。
①新規ドキュメントを作成する
ブログのアイキャッチ画像は、幅1280px、高さ670pxで作っています。
以下の入力をしてアートボードを作成しましょう。
- 幅：1280px
- 高さ：670px
- カラーモード：RGB
- ラスタライズ効果：スクリーン（72ppi）
なお、ホームページ内で重要な画像に関しては、もう少しサイズを上げて、2倍で画像を作ることもあります。
時折最新のスマホや、パソコンで見た時にぼやけた画像を見る機会があると思いますが、Retinaディスプレイと呼ばれるディスプレイを使った環境ではそのように見えることがよくあります。
画像が大きいとサイト自体重くなるのでむやみに大きくする必要はありませんが、なるべく解像度が高い画像を作ることをおすすめします。
②長方形ツールで1280px×670pxの長方形を作る
この中で事前に撮った写真や作成したイラストを入れてください。
ちなみに、アイキャッチにはテキストを入れるのがおすすめです。
アイキャッチ画像にテキストを入れることで、記事の内容が一目でわかり、SNSやブログ一覧でも目を引く効果があります。視覚と文字の組み合わせは記憶に残りやすく、スマホ表示でも内容を的確に伝えられるため、クリック率の向上につながります。また、同じフォントや色で統一すればブランディング効果も高まり、「このデザイン＝あなたのブログ」という印象を与えられます。さらに、画像に文字情報が含まれることで画像検索でもヒットしやすくなり、検索流入のチャンスも広がります。
ただ、この辺りはお好みで良いと思います。
③画像をWEB用に保存する
完成したら、書き出しましょう。
「書き出し」→「WEB用に保存（従来）を選んでください。
ベクターデータはPNGが軽いことが多いのですが、写真のように多彩な色とグラデーションが含まれる場合はJPEGで書き出すのが一般的で、PNGより軽くなるでしょう。画質も、100％ではなく、80%くらいにした方が軽くなります。
以上で、「保存」を選んで書き出せたら新しい記事でアイキャッチとして設定しておきましょう。
※この画像では触れませんでしたが、「2分割」タブを使って画像がイメージ通りの表示になるかを確かめると安心です。
なお、現在はまだ公開されていないのですが、こちらのブログ記事は千葉県にある「自家焙煎珈琲豆屋・じゃくう鳥」さんのサイトのサポート記事となっています。
雑味が無いのが大きな魅力のコーヒーが堪能できますので、ぜひ、コーヒー好きな方はお買い求めください。