ポケットラボ

最近のトレンドにもなっている「手書き文字」を取り入れたWebデザイン。少し前までは手書き風フォントなどを使って、手描きを再現していましたが、最近は自分（もしくは代筆）でオリジナルの手書き文字を取り入れたデザインが多くなってきた印象です。

今回はそんなオリジナルの手書き文字を取り入れた素敵なWebデザインの紹介と、Photoshopで手書き文字を取り込む方法を紹介します。

「手書き文字」を取り入れたWebデザイン

手書き感の良いところは、ゴシックや明朝に比べて温かみが文字から伝わってくるので、自分に語りかけているように感じます。メッセージ性の強いところで使ったり、人の喋り言葉の部分で手書きをアクセントとして取り入れたりすると効果的なのかもしれません。

LIVESENCE

https://www.livesense.co.jp/

社会の課題に問いかけるようなメッセージを、メインビジュアルのキャッチコピーに使っている事例です。

採用ページでも同じように手描きの文字を使い、サイト全体を通して見出し、ショルダーテキストなどに用いている。

三陸岩手わかめ物語

http://www.iwate-wakame.jp/

動画の上に見ているユーザーに問いかけるように「あなたは知ってる？」と手書き文字を使っている。サイト全体のわかめをデフォルメしたかわいいキャラクターとの相性がとってもマッチしている。

みちきり

http://michikiri.com/

縦書きのと手描きのゆるさが、サイト全体のメッセージの島ぐらしを良い雰囲気を出している。合わせて使っている島のマップも手描き感がとっても素敵です。

PLAN-B 新卒採用サイト2019

https://www.plan-b.co.jp/recruit_2020/

英字のキャッチのオーバーレイされているところもかっこ良いですが、手描きの日本語文字がポイントで少しいれている部分が良い存在感でアクセントになっています。

SMBC 新卒採用サイト

https://www.smbc-freshers.com/

手描きの筆跡からのアニメーションが心地よい。１画面ごとにスクロールで進むアニメーションに合わせて出てくる文字のアニメーションは見ているユーザーを画面に引き込ませられるほど気持ちい良いです。

Fringe

http://www.fringe81.com/

背景の写真とシルエットに合わせる英字のキャッチは反則レベルでかっこ良いです。

Photoshopで手書き文字を取り込む方法

（１）Photoshopで開く

紙に手書きしたものを、取り込んでPhotoshopで開きます。

手書き（紙）からPCに取り込む方法として、今回はスマホで撮影した画像をメールで送っていますが、スキャナーなどを使っても良いかと思います。
紙は方眼紙、罫線が入った紙に書くと文字を抜き取る際に手間が少し増えるので、無地の紙に、ネームペンなど少し太めのペンをおすすめします。

取り込んだレイヤーのロックは解除しておきましょう。（ロックアイコンをゴミ箱へドラック＆ドロップ or レイヤー上で【背景からレイヤーへ】を選択）

切り抜きツールで不要部分を切り抜く

切り抜きツールを使い、文字以外の不要の部分をトリミングで削除します。

取り込みたい手書きの文字の部分を選択し、トリミングするように調整します。調整の際は、左右上下の四隅を動かすとトリミング位置を調整することが可能です。

レベル補正で文字と紙の明暗をはっきりさせる

【イメージ】→【色調補正】→【レベル補正】を選択。レベル補正で文字と紙の明暗をはっきりさせるための作業です。

レベル補正のパネルで、赤で囲っている３つの矢印をなるべく真ん中に調整します。手書きのかすれ具合など出したい場合は、左側に３つの矢印を持ってくるとかすれ具合が再現できます。

【レベル補正後】

照明の影響もあり、レベル補正前は、全体的に黄色っぽくなってしまっていましたが、レベル補正後のは、紙の白と手書き文字の黒がはっきり、くっきりに補正できたかと思います。

不要な部分は選択し、削除する

自動選択ツールを使い、文字以外の不要な部分を削除します。

自動選択ツールで、白色の部分をクリックし、選択します。一度に選択できない「。」「す」「書」「る」の文字の中の隙間などは【shift】を押しながら選択すると、選択範囲を複数選べるようになります。

選択後、【delete】を押すと選択しているところが削除することで、こちらで文字の取り出しは完成です！

完成！

切り抜きいた文字のレイヤーにレイヤースタイルからカラーオーバーレイで色など付けることも可能です。

細かい手順でやっていたのですが、覚えてしまえばとっても簡単にできるので、手書きのデザインをするときなどに参考にしてみてくださいね