手書き風フォントと手書き風ボタンを組み合わせたらこんな感じになった

by
カスタマイズ＆プラグイン
（更新: 2024年9月13日）

本記事は手書き風フォントと手書き風ボタンを組み合わせてみたところ、実に味のあるデザインになったという内容です。
恐らく他の方には使い途ないと思いますが、よろしければ読んでみてください。

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

手書き文字とBootstrapデザインは合わない

本サイトはいかにもなBootstrap風味にしています。
いらっしゃる方は記事を読むというより情報収集という感じでしょうし。
余計な装飾のない、無骨な方が好まれるかなあと。

しかしメインは手書きタイトルで、かなり雰囲気を変えています。

サインペンで殴り書きした感じが気に入ってます。

しかしボタンはというと、

質問者の写真

右下のボタンが雰囲気に合ってない……

手書き風フォントと手書き風ボタンを組み合わせてみる

CSS整えるのもボチボチ慣れてきたということで、何かいいのないか探しに行きました。
すると一発で見つかりました。

手書き風ボタンを紹介しているサイト

http://www.nxworld.net/tips/10-css-cute-design-good-chemistry-button-design-and-hover-effect.html

（リンク切れ）

質問者の写真

あるものだなあ……

英字の手書き風フォントとは組み合わせてるけど、日本語のWebフォントと組み合わせたらどうなるか。

結果

かなり統一感とれたと思います。
サイドバーもこんな感じ。

サイトの雰囲気、大分柔らかくなったかなあって思います。

導入方法

手書き文字フォントの設置方法はこちらとなります。

手書き文字風日本語フリーフォントでブログをデザインして高速に読み込む | きもおた・わーどぷれす。
メイリオなどデフォルトのフォントは読みやすいけど単調。 特にテーマが被ると、少々のカスタマイズでは被って見えます。 ちょっと変化をつけてみたかったので手書き文字風フォントを採り入れてみました。 ……しかし、 「サイトが重くなる」という大問題…
http://kimoota.net

本サイトでは「ふい字P」を使っています。
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;
}

字は指定よりも大きめにするのがポイント（フォントによると思いますが）。
色を付けたらのっぺりするので、白のままにするか工夫した方がよさそうです。

まとめ

解答者の写真
味はあると思う
ワンポイントに使って遊んでみると面白いかも
スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる