Style · 手書き
手書きWebデザインの参考例とAIプロンプト
手書き線・不揃いのフォント・紙のテクスチャなど、人の手の温度を残したAIプロンプト集。
ハンドクラフトについて
手書き線・不揃いのフォント・紙や布のテクスチャで人の温度を残す表現。デジタルの冷たさと対極にあり、教育・子供向け・ライフスタイル・クラフトブランドで心理的距離を縮めます。不完全さが、親密さの記号として働きます。難所は崩しの度合いで、少しの歪みは親しみを生みますが、崩しすぎると素人の手作りサイトに転落する。プロが意図して崩していると伝わる範囲に留めるのが条件です。金融・法務では、不揃いさが信頼性の記号と衝突します。
ハンドクラフトの視覚パラメータ
- #FBF7F0 紙
- #4A3F35 文字
- #E07A5F 主色
- #81B29A 副色
- 書体
- 手書き風の見出しに、読ませる本文はサンセリフ
- 形
- 不揃いな角丸。線はわずかに歪ませる
- 動き
- ゆるい上下の揺れ。周期は要素ごとにばらす
よく使われる場面
- 子供向け・教育サービス
- クラフトビール・手作り食品
- ハンドメイド・雑貨ショップ
- カフェ・ベーカリー
- 結婚式・ベビー系
成功のポイント
- 手書きフォントは1書体に絞る
- 線は完全直線でなくわずかに揺らす
- 紙質感・水彩しみをテクスチャで
- アイコンも手描き風に統一
- 重要な情報は読みやすい書体で補完
このスタイルのデザイン
マンガの吹き出しで進むサポートチャット
太い輪郭線と尻尾付きの吹き出し、網掛けの紙地でサポート対話をマンガのコマとして見せるチャットUI。解決の瞬間だけ叫び吹き出しに切り替えて感情の起伏を作ります。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
図書館カード目録風の検索結果
図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
親しみのあるイラスト付き空状態（受信箱が空）
受信箱や通知センターが空のときの画面UI。シンプルなイラスト・1 行のコピー・1 つの明確なCTAで、「何もない」状態を「次のアクションへ」変える設計。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。