よりオリジナリティを引き立てる。ビスケット風タイポグラフィデザイン

先日実績として紹介させてもらった「びすけっと保育園」のwebサイト。

webサイトをつくっていくにあたって、webページ制作には何が必要か？をボクはまず考えます。webページを構成する要素は複数あり、

などですが、このアイコンやイラスト、タイポグラフィなどは基本的に制作するwebサイトのデザインテイストに合わせて自作するようにしています。

今回のびすけっと保育園の場合、「びすけっと」のイメージをより引き立てるためにビスケットのアイコンを数種類制作してwebページにも使っているのですが、さらにタイポグラフィも制作し、ページに反映させるようにしました。

イメージは英語のビスケット

今回のタイポグラフィをつくるにあたって、イメージしたのは子供の頃食べたことのある英語のビスケット。今はIKEAなどに売っているみたいですが、なんとなく頭に昔の記憶があったのでそれを元に既存のフォントを選び、そのフォントをビスケット風に加工していきました。

制作過程としては、既存フォントの文字の周りにビスケットらしい丸い模様？をつけ、文字の中央部分に気泡をランダムにつけていきました。文字の太さは太すぎると小さいサイズにすると読めなくなってしまいかねないので、細すぎず太すぎずのバランスを考慮しながら少しだけ試行錯誤しました。

オーソドックスなタイプのビスケットですが、あくまでwebページを構成するひとつの要素にすぎないのでパッと見て「英語のビスケット」と多くの人がわかるようなデザインがベストです。変にデザインにこだわる必要はありません。

タイポグラフィを応用する

webサイトに合わせたフォントが決まると、いろんな使い方ができるようになります。

例えばページ内に「3つのポイント」のような訴求が必要になった場合、各ポイントごとにバッジをつくってそれぞれが目立ちやすく、わかりやすくすることもできます。

バッジをつくらず数字だけで表示させることももちろん可能ではありますが、トンマナに沿ったデザイン要素があるのとないのでは見え方もかなり変わってきます。オリジナルの世界観をデザインでつくっていくためには、できるだけ要素にもこだわるということが大事だとボクは思っています。

びすけっと保育園のwebサイトはこちらから

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。