カバー画像に使用するフォントの選び方

真っ白なキャンバスを前にすると、どうしていいかわからなくなることがあります。また、デザインを始めるには時間がかかります。多くのWebサイトテンプレートは、シンプルで美しい、フルスクリーンのカバー画像と1つの大きな見出しを基本としており、デザインを開始する際の手助けになります。

シンプルさは、サイトのトップページを目立たせる上で効果的な方法ですが、どのような
トーンを選ぶかは制作者次第です。では、カバー画像に使用するフォントはどのように選べばよいのでしょうか？

https://blogs.adobe.com/creativestation/files/2016/05/screen-shot-2016-04-26-at-11-25-28-am.png

Adobe PortfolioのLinaテンプレートなどで推奨される、カバー画像に大きな画像と見出しを組み合わせる手法

Typekitでは、ある実験をしてみました。まず、Adobe Stockから画像を選び、その上に理想的なフォントを重ねるとどうなるか試してみました。テキストには、「Summer 2016」という短いシンプルなフレーズを使うことにしました。

https://blog.adobe.com/media_69b54e368433c2f54173cc6ed24666cedefc0917.gif

上記の画像には、Hamilton Wood Typeを使用しました。その中でも、Matthew Carter氏のVan Lanenが背景の木活字との相性が良いと感じました。Carters氏は、実際にこの書体デザインを木に彫刻したのですが、完成された名品を作るというよりも実験をしてやろうという意図が感じられ、私たちはその点が気に入りました。

https://blog.adobe.com/media_17d8f9507242f15e2c2b400acb4f0d0ad8d8e1a4.gif

当初、この色鮮やかで、少しぼかしが入ったフルーツの画像には、上品なフォントが合うと思っていましたが、新鮮な果物の威力を侮っていました。その鮮やかな色と斜めに入ったぼかしが、試した多くのひ弱に見えるフォントを完全に打ち消してしまっていました。そのため、画像に負けない、Rui Abreu氏デザインのAzo Sansを選びました。ブルーベリーも通らないほど小さいカウンターと、尖った角からは力強さを感じさせます。

https://blogs.adobe.com/creativestation/files/2016/05/blog-bookmania.png

いくつかのフォントを組み合わせてみたところ、この穏やかな画像では、Bookmaniaのセリフ書体がしっくりきました。Bookmaniaは、スウォッシュやオルタネートの字形にも利用できるフォントです。ノスタルジックな雰囲気が漂う、今回の実験には適したフォントでしたが、他のフォントを選ぶことで、全体的なトーンを180度変えることも可能です。

今回使用したすべての画像は、ロイヤルティフリーの写真、ビデオ、イラストおよびグラフィックを数多く揃えた、Adobe Stockよりご利用いただけます。制作で大量のストックイメージを使用する場合、サブスクリプションプランの利用もご検討ください。また、画像は1枚ずつ購入することもできます。詳しくは、公式サイトをご覧ください。Typekitフォントを活用した作品を制作された際は、是非お知らせください。

※この記事は英語版ブログの抄訳です。