ホームページのデザインを構成する大切な要素の1つが「文字」です。
文字は情報を伝える意味合いだけでなく、ページの印象をも決めかねない要素でしょう。

文字フォントを少し工夫するだけで、ホームページのデザインは個性的なものになります。
特に、柔らかい印象を持たせるのに便利なのが手書き風のフォントです。
しかし、手書き風のフォントは個性的だからこそ、使い方に迷うもの……どのように活用するか迷ってしまうかもしれません。

今回は手書き風フォントを活用する3つのポイントをご紹介します。
フォントを使いこなして、魅力的なデザインを制作できるようになりましょう。

1.手書き風フォントの特徴を掴もう

ホームページトップページや商品紹介ページなど、様々な場面で「文字」をデザインに組み込むことがあるでしょう。

その際には利用するフォントを変えるだけで、デザインの印象は大きく変わります。

スクリーンショット_2017-02-16_17.01.21.png

【使用したフォント】
[ほのぼのポップ](http://nonty.net/freefont/)
 [たぬき油性マジック](http://tanukifont.com/tanuki-permanent-marker/)

例えば、上記の画像では左右ともに文字のフォント以外のデザインは全く同じです。ですが、見比べてみると印象は異なるでしょう。

右側の画像では、人間が手で書いたような手書き風のフォントを利用しています。
このような手書き風フォントデザインに親しみやすさや柔らかい印象をもたせます。

子供向けや女性向けなど穏やかさが求められるホームページに活用出来るだけでなく、筆文字のような力強い印象の文字を使えばユーザーの目を引くデザインにもできるでしょう。

以下の記事では、手書き風のフォントをご紹介しています。それぞれのフォントの特徴を掴みながら、利用してみましょう。

参照記事:
[親しみやすさのあるデザインに取り入れたい手書き風フォント38選]
(https://ferret-plus.com/4048)
[グラフィカルなデザインにはもってこい!手書き風フリーフォント50選]
(https://ferret-plus.com/1646) 

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

2.手書きフォントを活用したデザイン事例を参考にしよう

人間の手で書いたような文字はクセがあり、他のデザインから浮いてしまうこともあります。
そのような事を防ぐためにも、配色や工夫を事例から学んでいきましょう。

2-1.竹虎

竹、炭、竹酢液、虎斑竹専門店_竹虎.png
http://www.taketora.co.jp/

竹製品専門のネットショップである竹虎では、ショップのロゴとして手書き風の筆文字を利用しています。
ロゴ以外にも商品ページバナーにも登場し、味のある雰囲気を演出しています。

特徴的な字体だからか、あまり多用はされていません。
商品の製造者による想いを語るページのような、メッセージ性の高いデザインに利用されています。

2-2.haconiwa

箱庭_haconiwa|女子クリエーターのためのライフスタイル作りマガジン.png
http://www.haconiwa-mag.com/

女性クリエイター向けのメディアであるhaconiwaではホームページのサブタイトルやカテゴリーの表記に手書き風の文字を利用しています。
全体をパステルカラーでまとめ、フォントと合わせて柔らかい雰囲気を作り出しています。

2-3.北星鉛筆株式会社

大人の鉛筆|書いて作って楽しい未来をクリエイト|北星鉛筆.png
http://kitaboshi.co.jp/home/otonanoenpitu.html

鉛筆の製造技術をシャープペンシルに応用した「大人の鉛筆」シリーズを展開する北星鉛筆株式会社では、ホームページトップページに手書き風の文字を使っています。

今まさに文字を書いているとイメージさせるデザインと合わせて、自社の商品をアピールしています。
手で文字を書くことに関連した商品を展開している企業ならではのこだわりがうかがえるでしょう。

2-4.文京区立図書館YAページ

文京区立図書館_YAページ.png
https://www.lib.city.bunkyo.tokyo.jp/ya/

文京区立図書館に所蔵されている書籍のなかでも、中高生向けのものを紹介したYA(ヤングアダルト)ページでは手書き風のフォントタイトルを書いています。

アイコンにはアニメーションをつけ、対象者である子供にとっても親しみやすい印象を与えています。

2-5.東山動物園

東山動植物園.png
http://www.higashiyama.city.nagoya.jp/index_pc.php

名古屋市にある東山動物園では、ロゴや画像のデザインに手書き風の文字が利用されています。

ロゴだけでなくキャラクターやシンボルマークは統一したデザインとなっており、公式ライセンス商品へも展開されています。
現在では100以上の商品が展開され、動物園全体のブランディングとして活用されています。

3.Webフォントを活用してみよう

ホームページ内で使用する画像内で使えるだけでなく、フォントによってはWebフォントしてホームページCSSで埋め込むこともできます。

このようなフォントをWebフォントといい、サーバーにフォントのデータを預けているため、どのようなデバイスであっても同一のデザインで表示できます。
また、画像として埋め込むよりも、ページのデータ量も削減できるのもメリットと言えるでしょう。

Webフォントには日本語対応のものは少ないのが現状です。
ですが、なかには日本語に対応している手書き風のフォントもあります。

紹介するようなフォントを活用して、よりホームページの質を高めていきましょう。

関連記事:
[Webフォントを使用するなら知っておきたいメリットとデメリット]
(https://ferret-plus.com/3475)

3-1.たぬき油性マジック

フリーフォント『たぬき油性マジック』を公開しました。___たぬきフォント.png
http://tanukifont.com/tanuki-permanent-marker/

油性のペンで書いたようなデザインのWebフォントです。
収録されている文字数も多く、汎用性が高いでしょう。

3-2.ふい字

ふい字置き場.png
http://hp.vector.co.jp/authors/VA039499/

柔らかい手書き風のフォントです。
豊富な文字数が収録されているだけでなく、縦書きにも対応しています。

3-3.やさしさゴシック

https://ferret.akamaized.net/images/58a56c80fafbd82301000016/original.png?1487236223
http://www.fontna.com/blog/379/

ゴシック体に手書き風のアレンジを加えたフォントです。
シンプルなデザインなので、使いどころをあまり選びません。

まとめ

フォントを利用することで文字自体をデザインとして魅力的なものに仕上げられます。
Webフォントして利用できるものであれば、どのような端末でも同様のデザインとして表示できるというメリットがあります。また、文字情報として読み込まれるので、SEOの面でも優れているでしょう。

手書き風のフォントは柔らかい印象を与え、個性的なデザインを作成できるのが特徴です。
その特徴を最大限生かせるよう、今回紹介した他にも様々なデザインの事例を見て自身のアイディアの役に立てていきましょう。