今日は天下一品でお昼
こってりと白飯はずっと友だょ♪

手描き風ブログをでっち上げる

　ユルい手描きイラストや手書き文字があるブログって、暖かみや独特の面白さがあってついつい読んでしまいますよね。だけど僕は絵や文字を描くのが壊滅的に下手なので、そういう表現ができずに寂しい思いをしてきました。

　「はてなブロガーだから文章にこだわりがある」という感じの事を言われがちだけど、「自分、それしか出来ませんから」ってのが実情だったりもします。

<a href="http://bulldra.hatenablog.com/entry/2014/03/26/184522">暇だからイケダハヤト氏にブログのダメ出しをされてきた - 太陽がまぶしかったから</a>

　だけど世界は進歩しました。手描きイラスト風フィルタアプリや手書き風Webフォントを活用する事で、手軽に写真を手描き風イラスト化したり、ブログ内の任意の文章で手書きの情緒を再現できるようになったのです。おっさんが本当に便箋の取り込みをし始めてもアレですが、「手描き風」であれば「店長の手捏ね風ハンバーグ」みたいな感じでむしろセフセフなのではないかと思われます。

手描きイラスト風フィルタ

　iPhoneでは写真を手描きイラスト風に変換するアプリがひとつのトレンドになっているようで、検索してみると複数の手描きイラスト風変換アプリがありました。今回は無料セール中のこのアプリを利用。

Sketch Me!

Bluebear Technologies Ltd.
写真／ビデオ
無料

写真をライブラリから読み込んで適当な大きさに縮小

色付きのフィルタを適用(料理写真はこのフィルタが映えるみたい)

クシャ紙風テクスチャを適用

ブログアップ用にSketichでトリミング。

Skitch: 撮る。描き込む。共有する。

Evernote
仕事効率化
無料

　以上の手順で写真から手描き風イラストを生成しました。この手のアプリは人物写真に使うことが想定されているようですが、基本的に気持ち悪くなるので、食べ物や風景との相性が良い感じです。

Webフォント設定

　次にWebフォントの設定をCSSから行います。Webフォントとは、クライアントに表示させたいフォントがインストールされていなくても、表示時にフォントをダウンロードさせて描画する仕組みです。手書き風フォントを自発的にインストールしている人はあまりいないでしょうが、この仕組みを利用することで手書き風の表示が可能となります*1。

　『HuiFont (ふい字) - Free Japanese Font - Free Japanese Font』はフリーの手書き風フォントであり、はてなブログのサーバー内にインストールされているため、こちらを利用することとします。利用するにはデザイン画面のCSS設定部に以下の内容を追記します。一部のブログテーマでは手書き風フォントを利用しているため、既に組み込まれている場合もあります*2。

@font-face {
    font-family: 'HuiFontP109';
    src: url('/fonts/public/HuiFont/HuiFontP109.eot');
    src: url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'),
         url('/fonts/public/HuiFont/HuiFontP109.woff') format('woff'),
         url('/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'),
         url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
    font-weight: normal;
    font-style: normal;
}

.hand-write {
  font-family:HuiFontP109;
  font-size:120%
}

　手書き文字を利用する際には以下のように記載します。エントリ全体のスタイルをいじる事も可能ですが、長文を手書き風にすると読む側も疲れるので、一部分だけにしておく方が無難でしょう。また一部の文字については手描き風のフォントが用意されていないため、通常のフォントで表示されます。

　<span class="hand-write">手書き文字を利用する際には以下のように記載します。エントリ全体のスタイルをいじる事も可能ですが、長文を手書き風にすると読む側も疲れるので、一部分だけにしておく方が無難でしょう。また一部の文字については手描き風のフォントが用意されていないため、通常のフォントで表示されます。</span>

ふわふわ☆パンケ〜キ

まとめ

　以上のような技術を活用する事で手描き風ブログをでっちあげる事ができました。いつもよりもなんとなく親近感を感じるような、逆にムカつくような……という効果が期待できます。

<a href="http://bulldra.hatenablog.com/entry/2013/10/14/160522">そろそろメシマズ写真から卒業したい - 太陽がまぶしかったから</a>

TakiDori-炊き撮り-

MorokoshiMan
写真／ビデオ
無料

　過去に勃発したメシマズ写真問題についても食事写真用アプリで解決しましたが、テクノロジーの進歩によって、これまで熟練者じゃないとできなかった表現が手軽にできるようになるのが時代なのだなーと思いました。文章が雄だとか、誰得だとか言わないの。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。