手書き風 デザイン LPキット、クレヨン風セクション9選
手書き風 デザインは、カードやボタンの周りに太くよれた輪郭線を描き、その輪郭線だけにSVGフィルターをかけて、定規で引いたのではなく手で描いたように見せるスタイルです。手で描いたと思ったら実は CSS だった、というのがこのキットの正体です。
子ども向けの絵画教室やハンドメイドブランドのサイトで見かけるあの雰囲気で、名前が分からず検索できなかった画面そのものです。下にそのまま動く原寸大の1ページLPを置きました。まずナビからフッターまで通しでスクロールしてみてください。
ここからは同じ画面を9つの部品にばらして並べ直しました。訪問者が最初にLPを開いたとき視線が流れる順 — 概観、機能確認、料金、信頼、行動喚起、登録 — そのままです。落書きヒーロー・二重線カード・ジグザグフッターの3つは同じ仕組みで動いています。輪郭線を描くSVG図形だけに揺れフィルターをかけ、文字を包む要素には一切かけません。
自動再生 · タイルを押すとその項目へ · すべて1つのzip
- 01 クレヨン落書きヒーロー
- 02 手書き丸ナビ
- 03 よれよれステッカーカードグリッド
- 04 手書きチェックリスト
- 05 星と丸の料金プラン
- 06 クレヨン吹き出しのレビュー
- 07 クレヨンハッチングCTA帯
- 08 はさみ切りジグザグフッター
- 09 二重線クレヨンボタン・入力欄
このキット全体の色は7つで完結します。文字は常に一番下のインク色1つに固定するのが、読める手書き風デザインの条件です。
| 役割 | 色 | 使う場所 |
|---|---|---|
| 紙 | #fff8ef |
ページ背景全体 |
| インク | #33261c |
すべての文字(コントラスト12.1〜13.9:1) |
| レッドクレヨン | #ff5a5f |
手描きの線・強調枠 |
| イエロークレヨン | #ffcd3c |
ボタン・星・下線 |
| ブルークレヨン | #4fa3e3 |
二重線・フォーカスリング |
| グリーンクレヨン | #6dbe6d |
チェック・アバター |
| パープルクレヨン | #a685e2 |
CTA背景の淡色 |
01クレヨン落書きヒーロー
カードの枠線は文字とは別のSVGレイヤーで、そのレイヤーだけにfeTurbulenceの揺れフィルターをかけているので、太い点線が手描きのように波打ちます。見出し下の黄色い下線はstroke-dashoffsetで描かれては消えを繰り返します。
<svg width="0" height="0" style="position:absolute">
<filter id="rough" x="-30%" y="-30%" width="160%" height="160%">
<feTurbulence type="fractalNoise" baseFrequency="0.045" numOctaves="2" seed="4" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="7"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<svg class="frame" viewBox="0 0 300 190" preserveAspectRatio="none">
<rect x="6" y="6" width="288" height="178" rx="20"
stroke="#33261c" stroke-width="5" stroke-dasharray="16 11"
fill="none" filter="url(#rough)" />
</svg>
02手書き丸ナビ
アクティブなタブの文字を赤いクレヨンの丸が囲みますが、きれいな円ではなく片端がもう片端を追い越す二重ループで、たった今描いたように見えます。stroke-dasharrayで描き切ってから逆方向に消します。
<li class="relative px-2 py-1">
<span class="relative z-10 text-xs font-semibold">ホーム</span>
<svg class="loop" viewBox="0 0 56 30">
<path fill="none" stroke="#ff5a5f" stroke-width="3.5"
stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="110"
d="M28 4 C 13 2, 4 11, 7 17 C 9 25, 20 28, 29 26
C 41 24, 50 17, 47 10 C 45 4, 33 2, 25 5" />
</svg>
</li>
03よれよれステッカーカードグリッド
カードごとに赤と青の線を1〜2pxずらして重ね、クレヨンで二度なぞった跡を出します。4枚のカードは開始時刻を140msずつずらし、順番に少しずつ傾きます。
<svg class="frame" viewBox="0 0 100 78" preserveAspectRatio="none">
<rect x="5" y="5" width="90" height="68" rx="12"
fill="none" stroke="#ff5a5f" stroke-width="2.4" />
<rect x="3" y="3" width="90" height="68" rx="12"
fill="none" stroke="#4fa3e3" stroke-width="2.4" opacity=".8" />
</svg>
04手書きチェックリスト
チェックマークはアイコンフォントではなく、1本のSVGストロークが左から右へ描かれるアニメーションです。行ごとに色と開始時刻が違うので、チェックがそれぞれのリズムで完成します。
<svg class="check" viewBox="0 0 20 16">
<path fill="none" stroke="#ff5a5f" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="26"
d="M2 9 C 3 8, 4 10, 7 13 C 10 10, 14 6, 18 2" />
</svg>
<style>
.check path { animation: checkDraw 2s ease-out infinite; }
@keyframes checkDraw {
0% { stroke-dashoffset: 26; opacity: 0; }
45% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: -26; opacity: 0; }
}
</style>
05星と丸の料金プラン
3つのプランカードはそれぞれ違うクレヨントーンで、おすすめプランの価格数字だけ手描きの丸が自分でぐるっと囲み、横で小さな星が2つ別々のリズムで瞬きます。表がなくても色と丸だけでどれを選べばいいか伝わります。
.ring-path {
fill: none;
stroke: #ff5a5f;
stroke-width: 3.2;
stroke-dasharray: 190;
animation: ringDraw 2s ease-out infinite;
}
@keyframes ringDraw {
0% { stroke-dashoffset: 190; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -190; }
}
06クレヨン吹き出しのレビュー
レビューはきれいな四角ではなく、輪郭がでこぼこしたSVGパスに収まり、しっぽもなめらかな三角形の代わりに折れた線2本で描きます。星評価は5つの幅を100・100・100・80・40%と変え、本物のレビュー点数らしく見せました。
<svg class="frame" viewBox="0 0 260 110" preserveAspectRatio="none">
<path fill="#fff8ef" stroke="#33261c" stroke-width="3" stroke-linejoin="round"
d="M18 10 L242 10 C250 10 252 18 252 26 L252 78 C252 88 248 96 238 96
L48 96 L30 110 L34 94 L18 92 C10 90 8 82 8 74
L8 26 C8 16 10 10 18 10 Z" />
</svg>
07クレヨンハッチングCTA帯
帯の背景は画像を使わずrepeating-linear-gradient1行だけで引いた細かい斜線ハッチングで、その上のボタンは赤い点線の枠がずっと行進するように描き直され続けます。塗り絵の1ページに置かれたボタンのように見えます。
.band {
background:
repeating-linear-gradient(45deg, rgba(51,38,28,.08) 0 2px, transparent 2px 9px),
#efe6fb;
}
.btn-rect {
fill: none; stroke: #ff5a5f; stroke-width: 3;
stroke-dasharray: 14 8;
animation: march 2s linear infinite;
}
@keyframes march { to { stroke-dashoffset: -440; } }
08はさみ切りジグザグフッター
フッターの上辺は切り込みごとに要素を置かず、clip-path: polygon()1つで高さがばらばらな歯を描き、子どもがはさみで雑に切ったように見せます。均一なジグザグではなく点ごとに高さが違うことがポイントです。
.zigzag {
height: 14px;
background: #33261c;
clip-path: polygon(
0% 100%, 0% 30%, 6% 85%, 12% 15%, 18% 90%, 24% 20%,
30% 88%, 36% 12%, 42% 92%, 48% 18%, 54% 85%, 60% 22%,
66% 90%, 72% 15%, 78% 88%, 84% 20%, 90% 92%, 96% 14%,
100% 30%, 100% 100%
);
}
09二重線クレヨンボタン・入力欄
ボタンは赤と青の二重線がループで少しずれては戻り、入力欄は手で描いたような青い丸が外側へにじむように広がって消えることをくり返します。
.btn-rect-a { stroke: #ff5a5f; animation: shiftA 2s infinite; }
.btn-rect-b { stroke: #4fa3e3; opacity: .85; animation: shiftB 2s infinite; }
@keyframes shiftA { 50% { transform: translate(-2px, 1px); } }
@keyframes shiftB { 50% { transform: translate(2px, -1px); } }
.ring-rect { animation: bloom 2s infinite; }
@keyframes bloom {
0%, 100% { opacity: 0; transform: scale(.9); }
50% { opacity: 1; transform: scale(1); }
}
tailwind.config カスタム
クレヨン7色と半径3種をここ1か所に書いておけば、1ページ版と部品9種が全部同じルールに従います。揺れフィルターのidは部品ごとに別の番号を振って衝突を避け、1ページ版だけ1つのidを共有します。
theme: {
extend: {
colors: {
paper: "#fff8ef", ink: "#33261c", red: "#ff5a5f",
yellow: "#ffcd3c", blue: "#4fa3e3", green: "#6dbe6d", purple: "#a685e2",
},
borderRadius: { crayon: "20px", control: "12px", pill: "999px" },
spacing: { gutter: "16px" },
},
},
バイブコーディング プロンプト
configをプロジェクトに入れたあとClaude Code・Cursorに渡す指示は、揺れフィルターをどこにかけてどこにかけないかが要です。指示文の全文はzipのprompt.mdに入っています。
背景は paper(#fff8ef) 1色に統一する。枠のある箱すべてに、手描き風の揺れる輪郭線
(SVG feTurbulence + feDisplacementMap) を別レイヤーとしてかける — 文字を包む
要素そのものには絶対にかけない。角丸は rounded-crayon か rounded-pill に統一。
二重線を使うときは赤と青を1〜2pxずらして重ねる。
この指示文をpage/index.htmlに実際に適用し、1280px幅の画面全体を撮影したのが下の画像です。
どこで壊れるか — 落とし穴
最初に実際にぶつかった落とし穴は、揺れフィルターをどこにかけるかでした。最初はカード全体(枠線と見出し文字ごと)をfilter: url(#rough)でまとめて包んだところ、feDisplacementMapがすべてのピクセルを同じノイズマップでずらすため見出し文字まで波打ち、小さいサイズでは読みにくくなりました。枠線を描くSVGのrect・pathだけを別レイヤーに切り離し、そのレイヤーだけにフィルターをかけ直すと、文字はくっきり残り枠線だけが揺れました。
2つ目は実測で見つかった数字です。フッターの星2つの瞬きだけで動きを測ったところ、変化した面積が0.07%しかなく、このサイトの下限(0.08%)に届かず静止画と区別がつきませんでした。星のサイズを14pxから20pxへ、拡大縮小の範囲を0.7〜1.2倍から0.5〜1.7倍に広げると0.35%まで上がり、通過しました。3つ目はアクティブなナビタブを囲む丸の大きさで、viewBoxを92×50で描いたときは隣のタブの文字まで丸がはみ出し、56×30に縮めてようやく「ホーム」の文字だけを正確に囲みました。この3つを直した完成版は、このパスワード r6qyfm69 がかかったzipを開けば確認できます。
9つのデモすべてがMDNのprefers-reduced-motionメディアクエリを検知すると、線が描かれるアニメーションとカードが傾く動きを止め、各要素を完成した状態(チェックは完成形、丸は閉じた円)のまま固定します。
アクセシビリティ
手書き風デザインで最もよくある失敗は、揺れフィルターを文字そのものにかけてしまうことです。feDisplacementMapはソースの全ピクセルをノイズマップの値だけ押しのけるので、文字のストロークも例外ではなく、小さいサイズでは字形が崩れて読みにくくなります。このキットはフィルターを常に枠線専用のSVGレイヤーにだけかけ、文字要素には一切触れません。文字色は常に濃いインク色(#33261c)に固定し、紙の背景で13.9:1、キット内で最も暗いカードの淡色(パープルの淡色)の上でも12.1:1と、WCAG 2.1の最低コントラスト基準である4.5:1を大きく上回ります。赤・青の強調線は装飾的な枠線なので文字コントラストの対象ではありませんが、ボタン・入力欄のキーボードフォーカスは色線に頼らず、インク色の:focus-visibleアウトラインを別に描いています。
クレヨンではなく別の明るいトーンのホームページ流行も気になる方はパステルキャンディランディングもあわせてご覧ください。デザイントレンドカテゴリ全体とこのブログの紹介は紹介ページにまとめてあります。
FAQ
手書き風デザインと手書きフォントを使うのはどう違いますか?
手書きフォントは文字そのものの形を手書き風に変えますが、このキットは文字は整ったフォントのまま残し、枠線・下線・チェックといった装飾の線だけをSVGフィルターで揺らします。文字を揺らすと読みにくくなりますが、枠線だけ揺らせば可愛さは残り読みやすさも保たれます。
暗いトーンのブランドでもこのスタイルは使えますか?
使えますが、紙色(#fff8ef)の代わりに暗い背景にする場合はインクの文字色も明るい色へ反転させないとコントラストが崩れます。赤・黄のような彩度の高いクレヨン線は暗い背景でもそのまま使えますが、カードの淡色は暗い背景用に組み直す必要があります。
feTurbulenceフィルターは重くなりませんか?
このキットのフィルターは枠線を描く小さなSVGレイヤー1つだけにかかり、値も固定されているため毎フレーム再計算されません — 見えている動きはstroke-dashoffsetとtransformが担当しています。カード全体やページ全体にフィルターをかけると重くなるので、常にこのキットのように小さな枠線レイヤーだけに絞って使います。