へっぽこコーダーの備忘録

phpやらjavascriptやら、使った技術をすぐに忘れちゃうから、おぼえがき程度に書いていきまーす
2017.12.27

バナー作成時のレイアウトやフォント使用例

バナーを作成するときにレイアウトのパターンや、どのようなフォントを使用していたかを忘れてしまうので、練習で作成したバナーのレイアウトやフォントを覚書していきます^^

写真右、キャッチコピー左、テキスト下レイアウト

写真右、キャッチ左、テキスト下レイアウトイメージ
商品写真やイメージ画像が右側、キャッチコピーや商品名が左側、詳細な情報などのテキストが下部に配置されたレイアウトパターンのバナー例です。

バナー例その1

ゴシック使用バナーその1
ほぼほぼゴシックフォントを使用したバナーです。
ネットで見かけたバナーを模写したもので、元のバナーは全文字ゴシックだったのですが、「ふるさと納税」の部分だけは明朝でもしっくりくる気がしたので、明朝で作ってます^^
とりあえず「Noto Sans」を使っておけばそれっぽく見えるような気がしますね(笑)
あと、数字系は外国語フォントを使うとキレイに見えると前読んだ本に書いていたので、いつもは頑張って外国語フォントを選んで使っていたのですが、今回は「はれのそら明朝」でかなりしっくりきました^^

■使用フォント

>ゴシック部分

Noto Sans CJK JP

>「ふるさと納税」

Noto Serif CJK JP

>「12/31」

はれのそら明朝