WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

今回は、比較的若い人をターゲットにしたWebサイトで時々見かける、いい感じにエモーショナルな手書き文字のコツをご紹介します！

「エモい手書き文字を書いてみたいけど、自分の筆跡ではエモさを感じられない…」とお悩みの方もいらっしゃるかもしれませんが、今回ご紹介するコツを押さえれば、それなりにエモさのある手書き文字素材を自作することができます。

※少し練習が必要です。

手書き文字の良さ

「手書き風フォント」は何種類か存在していて、フリーで使用できるものもあります。「手書き風フォント」も元々は手書き文字なので柔らかさはあるのですが、本当に人の手で書いたそのままの文字というのは、手書き風フォント以上に味のある雰囲気になります。

手書き風フォントは読みやすく整っているため、基本的にはそちらを使ったほうが可読性は高いのですが、キャッチコピーなど感情に訴えたい時には、手書き文字を使用するとさらに効果的です。

「手書き風フォント」と「手書き文字」を上手に使い分けることで、読みやすく、かつエモーショナルなデザインに仕上げることができます！

用意するもの

まずは、紙とペンを用意し、文字を書いていきます。PCに取り込んで加工することを考えると、可能であれば無地の白または薄い色の紙に黒いペンで書くことをおすすめします。

ペンについては、ボールペンよりもサインペンがおすすめです！書くサイズにもよりますが、あまり太くないほうが良いでしょう。

紙はあまり大きくないほうが線がブレにくく、書きやすいと思います。

文字を書く

実際に文字を書いていきます。分かりやすいように、まずは普通に文字を書いてみました。

これはこれで何かに使えそうな雰囲気がありますが、今回はさらにエモーショナルな文字を目指します。

いかがでしょうか？先ほどよりも躍動感や走り書き感が大きくなり、インパクトの強い文字になったと思います！

こちらについては、以下のことを心掛けました。

• ところどころ線を長く伸ばす
  線が飛び出ることで躍動感が出ます。特に、文頭・文末の字の一部を長くするとバランスが良いです。
• 漢字とカナのサイズにメリハリをつける
  メリハリをつけることで読みやすく、かつテンポ感や勢いも出ます。
• インク溜まりをつける
  インクの溜まった感じを少し強調することで、手書き感が強まります。Photoshopのブラシで後から追加することもできます。
• あえて行書っぽく崩す
  走り書きっぽさが出て、躍動感とアナログ感が強まります。

もっとメリハリをつけても良いかもしれませんが、デザインの雰囲気や配置する場所、お好みに合わせて加減を調整してください。

上手く書けなかった文字があっても、別の紙にその文字だけ書き直して合成することもできるので、納得のいく文字が書けるまで挑戦してみましょう。

PCに取り込んで切り抜く

文字が書けたら、スキャンするか写真に撮って送るなどの方法でPCに送り、Photoshopで開きます。

上部メニューの「選択範囲」＞「色域指定」を開き、文字の色をスポイトで取る（文字の上でクリックする）と、文字の部分だけ選択されます。

「許容量」の数値をできるだけ大きくすることで、細かいところまで文字要素を拾うことができます。文字のサイズによって数値を調整しましょう。

文字の部分だけ選択できたら、レイヤータブの下部にある逆日の丸のようなアイコンをクリックするとマスクがかかり、選択範囲のみが表示された状態になります。

この時、マスクをかけた文字のレイヤーを右クリックして「スマートオブジェクトに変換」を選択し、スマートオブジェクトにしておきましょう。そうすることで、のちに拡大・縮小したときに画質が荒くなるのを防げます。

文字を切り抜くことができました。あとは加工していきます。

写真と組み合わせる

カラーオーバーレイで文字色を白に変更し、写真に置いてみました。

普通のゴシック体フォントで文字を置くのと比較すると、手書き文字のほうが温かみや柔らかさがあり、労ってくれている雰囲気がより伝わりますね！

また、基本的な手書き文字は「（紙などに）置かれている」感じがあり、「仕事が終わって家で一息つく」というイメージになるのに対し、こちらは動きが感じられることで、「一旦仕事は終わったけれど明日も前向きに頑張ろう」という雰囲気になったと思います。
前者は「暮らし」「趣味」などのオフタイム、後者は「ビジネス」「勉強」などのジャンルで使えそうですね。

このように、手書きの文字をデザインに取り入れることで、感情に訴えるデザインを作ることができますし、今回ご紹介したコツを取り入れることで、より大きなインパクトを与えることができます。

コツを押さえて手書き文字を作ってみよう

このように、コツをつかんで書いてみると元々の筆跡に関係なく、それなりに「エモい」手書き文字を作ることができます。

実際に書いてみると線がブレてしまったり読みにくい部分ができてしまったりするので少し練習が必要ではありますが、手書き風フォントではどうしても柔らかさやアナログ感が足りない、もっと印象的にしたい、という時にはとても良いアクセントになりますので、ぜひ取り入れてみてくださいね！