Webデザインに大きな差をつける！手書きフォントの活用事例10選

最近、海外のWebデザインは手書きフォントを活用しているものが増えています。日本でも、ロゴやアイコンなどへ部分的に手書き風フォントを使うことでWebサイト全体のデザインを引立たせる手法がときおり見られます。

今回は、手書き風フォントを中心に、手書きデザインを使ったWebサイトの活用事例を10件まとめてご紹介します。

1. やさしさを感じさせる

参考：たかしま農園

子供の写真と一緒に手書きフォントを使うことで、赤ちゃんや子供の無垢なイメージをやさしく伝えることができます。子供服や、ベビー用品、あるいは事例にあるように農家のWebデザインでこのようなタイプの手書きフォントを活用している例が多くあります。

事例でご紹介している「たかしま農園」のWebサイトはテキスト文章の文字以外をすべて手書きフォントにし、ロゴにも手書きのイラストとフォントを使用しています。「あたらしいトマトブランドはじまります」というキャッチフレーズのもと、Webサイト全体が手書きフォントでうまくまとめられています。

2. 女性の注目を集める

参考：女子旅つくるプロジェクト

JTBの「女子旅つくるプロジェクト」では、女性が書くような字体の手書きフォントを使用することで、女性に近寄りやすいイメージを与えています。この他、女性向けのおけいこごとや、美容商品、エステなどにも手書きフォントは活用できるでしょう。

このJTBのサイトでは、女性らしさを感じさせるピンク色を効果的に配しているところがポイント。トップページにはモデルを中心とした女の子とたちが旅先で楽しそうにはしゃいでいる写真が並び、そこへ適度にピンクが使われています。また、商品名を「姫様ラインナップ」とするような、女心をくすぐるネーミングもうまいところです。

3. まごころを感じさせる

参考：有限会社ほそや

豚肉通販サイトほそやの「まる豚」では、動物の写真と一緒に手書きフォントを使い、商品にまごころを感じさせます。高級感のある黒の背景に白と金色の手書きフォントを使うという、あまり見られない組み合わせですが、高いデザイン力でまとめられています。

また、明朝体と手書きフォントをうまく組み合わせているところにも注目したいですね。明朝体のしっかりとしたイメージを活かしつつも、手書きフォントによってWebデザインにやわらかさを加えることができています。

4. 今っぽさを感じさせる

参考：NERO HAIR SALON

美容院「NERO HAIR SALON」のサイトは、写真共有SNS「Pinterest」のピンボード風なグリッドデザインとなっています。その余白にあえて手書きデザインを置くことで、流行のWebデザインに手作り感をもたせる、いわゆる今風のオシャレなサイトに仕上げています。

美容院やアパレル関係など「美」を専門とするWebサイトでは、手書きデザインをうまく取り入れることでユーザーに洗練されたイメージを与えることができます。

5. ユーモアを感じさせる

参考：プロテインバイブル

Webサイトにマンガを置いているケースも増えてきましたが、マンガの中で手書きフォントを使うと、一層ユーモアを感じさせる仕上がりとなります。また、ユーザーの注目を集めるために、「ウイダー」のWebサイトのようにマンガとキャッチフレーズを組み合わせてトップへ置くというのも新しい手法でしょう。

こちらのWebサイトには「プロテインのすべてがわかるウイダープロテインポータルサイト」として、プロテインに関するお役立ち情報が集まっていて、いわゆるコンテンツマーケティングの役割も担っています。

6. 手作りのこだわりを感じさせる

参考：寿々屋

老舗料理店のメニューで使われているような手書きフォントをWebサイトで使うと、商品がぐっと良いものに見えます。また、手作りという印象も与えられますね。食べ物の紹介ページで手書きフォントが活用されている例はけっこうあります。ユーザーにおいしそうだと思わせることができるのでしょう。

「寿々屋」のWebサイトでは、「めんたい」の字体が、実物の明太子のように太く、中身がたっぷり入っているような美味しさを連想させます。

7. ブランドを感じさせる

参考：立川志の八 公式サイト

個人の公式Webサイトで手作りフォントを活用した好例です。落語家、立川志の八さんの公式サイトは、手書きフォントを使った画像をトップページの背景に置き、その前に本人の写真を置くという、おもしろいアイデアとなっています。

習字のようなフォントであることから昔っぽさを感じさせながらも、Webサイトというデジタルな環境でダイナミックに使っています。このように、昔のものと今のものをかけ合わせることで、新しいかっこよさを演出できます。

8. キッズ向けだと感じさせる

参考：株式会社ペーパーボーヤ

幼稚園やおけいこ事など子供向けサービスのWebサイトに手書きフォントを使うと、子供向けであることをイメージさせることができます。また子供に受けそうな楽しさを感じさせ、子供のみならず親の関心を引くことも可能です。

上の事例は、アプリ開発の企業サイト。企業サイトで手書きフォントを使っている例はあまり見かけないのですが、子供向けの商品であれば、事例のように楽しい雰囲気を作るのに活用できます。一風変わったデザインということで、取引先の会社からも注目を集めることができるでしょう。

9. 力強いメッセージを感じさせる

参考：竹虎

竹の通販・販売を行っている「竹虎」の、竹皮ぞうりの商品紹介ページ。「世界一のフローリング履きだと思います。」というキャッチフレーズを手書きフォントで大きく描いています。キャッチフレーズに手書きフォントを使うことで、ユーザーに心のこもったメッセージを届けられます。

また、Webサイト全体に手書きフォントを使いたくない場合や、すでにWebサイトのデザインを変更できないときも、事例サイトのように画像の中で手書きフォントを使うことで、気軽に活用することができます。

10. お客様の生の声を感じさせる

参考：FANCL

FANCLのダイエットサプリメント「カロリミット」のお試しセット紹介ページでは、「やせている子には　正直、教えたくない！」というお客様の声を手書きフォントで表現しています。

手書きフォントを使うことで、「生の声」という感じが伝わり、説得力が増すのかもしれません。また手書きフォントの周りに、ケーキやパスタなどの手書きのイラストを置き、メモに書かれているかのように楽しく見せています。

手書きフォントがデザインを一段と美しくする

手書きフォントは、どんな要素と組み合わせるかによって、バラエティーに富んだ使い方が可能です。その効果はさまざまですが、多くの場合、部分的に手書きのフォントを使うことで他の文字が一層引立ち、Webサイト全体のデザイン力がアップします。

今回ご紹介した事例の中から、まねできそうなものを見つけ、取り入れてみてはいかがでしょうか。

参考：
➢ たかしま農園
http://www.takashima-nouen.com/
➢ 女子旅つくるプロジェクト
http://jtpj.jp/
➢ 有限会社ほそや
http://marubuta.jp/
➢ NERO HAIR SALON
http://nero-hair.jp/
➢ プロテインバイブル
http://www.weider-jp.com/protein/
➢ 寿々屋
http://shop.mentaiya.com/
➢ 立川志の八公式サイト
http://www.shinohachi.com/
➢ 株式会社ペーパーボーヤ
http://paperbooya.jp/
➢ 竹虎
http://www.taketora.co.jp/
➢ FANCL
http://www.fancl.co.jp/pub/calo/index_lis.html