手書き風フォントと手書き風ボタンを組み合わせたらこんな感じになった
本記事は手書き風フォントと手書き風ボタンを組み合わせてみたところ、実に味のあるデザインになったという内容です。
恐らく他の方には使い途ないと思いますが、よろしければ読んでみてください。
手書き文字とBootstrapデザインは合わない
本サイトはいかにもなBootstrap風味にしています。
いらっしゃる方は記事を読むというより情報収集という感じでしょうし。
余計な装飾のない、無骨な方が好まれるかなあと。
しかしメインは手書きタイトルで、かなり雰囲気を変えています。
サインペンで殴り書きした感じが気に入ってます。
しかしボタンはというと、
手書き風フォントと手書き風ボタンを組み合わせてみる
CSS整えるのもボチボチ慣れてきたということで、何かいいのないか探しに行きました。
すると一発で見つかりました。
手書き風ボタンを紹介しているサイト
英字の手書き風フォントとは組み合わせてるけど、日本語のWebフォントと組み合わせたらどうなるか。
結果
かなり統一感とれたと思います。
サイドバーもこんな感じ。
サイトの雰囲気、大分柔らかくなったかなあって思います。
導入方法
手書き文字フォントの設置方法はこちらとなります。
本サイトでは「ふい字P」を使っています。

ふい字置き場
フリーの手書きかなフォント「ふい字」のサイト。2バイトで打ててシフトJIS第二水準漢字まで使えます ...
http://hp.vector.co.jp/authors/VA039499/
CSSは次の通り。
.tegaki-button{ font-family: 'huimin' !important; display: inline-block; font-size: 1.8rem; padding: .2em 2.5em; border: 2px solid #333; border-radius: .4em 2em .5em 3em/3em .5em 2em .5em; color: #333; text-decoration: none; text-align: center; background-color: #fff; margin:10px; font-weight: bold; }
字は指定よりも大きめにするのがポイント(フォントによると思いますが)。
色を付けたらのっぺりするので、白のままにするか工夫した方がよさそうです。
まとめ

ワンポイントに使って遊んでみると面白いかも
コメント