キャンペーンに使える！日付表記のデザイン・文字組のパターンまとめ

masaca（@masaca_dApps）です。

ランディングページやキャンペーンサイトなど、日付の表記のデザインや文字組にはさまざまなパターンがあります。
ある程度レイアウトのパターンを把握しておけば、デザインもスムーズに終わるのでまとめてみました。

日付や期間のデザインはいろんなところで出てくるので、覚えておくと便利です！

日付・期間を強調したデザイン

フォントサイズにメリハリをつけたり、レイアウトを工夫することで日付表記はデザインのアクセントにもなります。
キャンペーン期間などを目立たせたいときは、日付や期間の見せ方を強調しましょう。

図形を利用する

円形の中に日付をいれることで、色でメリハリを出すことができます。
日にちを極端に大きくすることで情報が伝わりやすくしています。

曜日のレイアウトを少し変えたものです。すこし崩した配置です。

西暦と時間をつめこんだパターンです。

キャンペーンやセールでよくある日付表記

キャンペーンやセールで定番の日付の見せ方ですね。曜日をアルファベットで縦書きにするとそれっぽくなります。

その他のレイアウト

枠にキッチリはめたいときにこの組み方は使えそうです。

日付・期間を強調しないデザイン

比較的日付をあまり目立たせないデザインです。
期間の優先度が低い場合は、こういったパターンもあります。

背景をつける

背景色をつけて、カーニングを整えただけで、文字は全て同じサイズで特に日付を強調もしていません。
あまり日付を主張しないときはこのようなデザインが多いです。

フォントサイズに差をつける

主要な日付と数字部分のみフォントサイズを大きくし、西暦部分は重要でないので小さめにしています。
曜日表記は記号を利用することで、アクセントになりますね。

日付表記の記号はこちらのパターンもあります。

最もコンパクトで最低限の表記

曜日と西暦をカットして最低限の表記だとこのような場合もあります。

まとめ

定番を押さえておけば、応用もできるようになりますしデザインスピードも上がります。
まだまだ日付の表記パターンはありそうなので、今後も随時追加していきます！

ツールを使うと数字のフォント選びが楽になるので「wordmark.it」を使いましょう。
Webデザインのフォント選びに迷ったときに便利なサイト「wordmark.it」

コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！

SPONSORED LINK