FLOW ANATOMY #15 — 1サイトを縦に解剖する
みのり農園は、
なぜ手描きで信頼されるのか。
技法は『点』、サイトは『線』。架空のクラフト農園『みのり農園／MINORI FARM』は、シズル写真を一枚も使いません。かわりに手で描いた野菜と破れた紙だけで、「この畑は近い」と感じさせます。ラグジュアリーLPが余白で格を出すのに対し、ここでは温かいクラフト紙の色、少しゆがんだ線、めくれる紙の手ざわりが"人が作っている"実感になる。畑から食卓へ——スクロールに合わせて一本の道が描かれていく物語を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ヒーロー→想い→収穫ごよみ→畑から食卓へ→産直→つくる人→みのり便→締め。派手な演出で押すのではなく、"手ざわり"と"季節のリズム"を一枚ずつ積み上げて信頼をつくる設計です。色は暖かいクラフト紙とテラコッタ、オリーブ、マスタードだけに。
- 00HERO起 — 手描きの野菜が線から描かれる動
- 01STORY想い — つくりすぎない、という約束動
- 02持続レイヤー常 — 紙の質感と麻ひもの進捗が全篇を包む常
- 03CALENDAR季 — 収穫ごよみで一年を見せる動
- 04JOURNEY物語 — 一本の道が種から皿まで描かれる動
- 05LINEUP質感 — 紙がめくれる産直カード動
- 06MAKER人 — つくる人の顔とコラージュ動
- 07ORDER誘い — みのり便へ、急かさずに動
手描きの野菜が、線から描かれる
狙い暖かいクラフト紙の背景に、太陽・にんじん・トマトの手描きイラストが「線を引く」ように現れ、ふわりと面の色がにじむ。見出しは手書き系フォント Klee One で「土と手から、食卓へ。」。写真を一枚も使わず、少しゆがんだ線とリソグラフ調の単色プレートだけで"人の手の跡"を出す。上下端は破れ紙で断ち切り、印刷物のような手ざわりを最初の一画面で宣言する。
つなぎここで決まるのは「これは工場ではなく、人が作っている畑だ」というトーン。以降のすべての章が、この手描き＋紙の質感の上に積まれていく。
つくりすぎない、という約束
狙いマスキングテープで留めたような一枚の紙に、畑主の言葉が手書きフォントで並ぶ。「つくりすぎない、を、まもる。」——量ではなく手のとどく範囲を守る、という宣言を、ふぞろいな行間と余白でゆっくり読ませる。破れ紙カードの縁は feTurbulence + feDisplacementMap で本物の紙のように波打たせ、右下には芽のイラストがそっと揺れる。
つなぎヒーローで作った「近さ」を、言葉で裏づける章。ここで"少ししか採れない"を先に伝えておくことで、のちの数量限定やみのり便の希少性が自然に響く。
一本の道が、種から皿まで描かれる
狙いこのサイトの背骨。中央を蛇行する一本の道（SVGパス）が、スクロール量に応じて破線で描かれていく。道に沿って「種をまく→芽が育つ→実を採る→食卓へ届く」の四段が左右交互に配置され、各段の丸いフレームの中で野菜イラストが線から立ち上がる。読み手の指の動きと、畑の時間の進みが重なる仕掛け。
つなぎ個々の技法（産直・つくる人）を並べる前に、"畑から食卓まで"の全体像を体で通す章。ここを通ると、以降のカード群が「あの道のどこか」に位置づいて見えるようになる。
みのり便へ、急かさずに
狙い三つの定期便プランを紙箱イラストのカードで提示し、真ん中に「いちばん人気」のリボンだけを控えめに立てる。カウントダウンや在庫を煽るバナーはなく、「数量限定・先着順」「いつでも休止OK」という誠実な条件で背中を押す。最後は手描きの木箱を添えたお試しフォーム。送信すると畑主の言葉で静かに応え、フッターは破れ紙の縁でオリーブ地に着地する。
つなぎ想いから始まった"つくりすぎない"が、最後に「だから数はかぎられる」という納得へ収束する。急かさない設計そのものが、このブランドの誠実さの証明になっている。
TAKEAWAY"手描き"でつくる流れの5原則
みのり農園から取り出せる、産直・クラフト・食品・ハンドメイド系のサイト全般に持ち帰れる設計則。#10 静けさ の"引き算のラグジュアリー"と読み比べると、同じ「余白と少なさ」でも、片や高級・片や親しみ、と目的で正反対に効くことが分かります。
写真がなくても信頼は作れる
シズル写真は説得力の代名詞だが、手描きのSVGは"人が作っている"実感で別の信頼をつくる。素材が完璧でないほど、かえって作り手の顔が見える。ブランドの人格に合うなら、イラストは弱点ではなく武器になる。
線を「引く」ことが物語になる
完成した絵を置くのではなく、pathLengthで線が描かれる過程を見せる。種→芽→実→皿の道をスクロールで描くように、"時間のかかること"を動きで語ると、商品の背後にある手間が伝わる。
不完全さを設計する
破れ紙の縁、少し傾いたカード、ふぞろいな行間。feDisplacementMapやわずかなrotateで"きっちりしすぎない"を意図的に作る。整いすぎたグリッドは量産の顔になる。ずらしは、手仕事の記号として効く。
暖色を絞って一貫させる
クラフト紙のオフホワイトに、テラコッタ・オリーブ・マスタード。リソグラフのように色数を絞り、乗算グレインで全篇を同じ紙の上に乗せる。高明度で明るく保つほど、暗い高級路線との差別化が効く。
親しみと誠実さはセット
バネのようなホバーや揺れるイラストで親しみを出す一方、煽らない価格提示、休止できる定期便、reduced-motionでの動き停止を用意する。手ざわりの良さは、来訪者を急かさない配慮とセットで初めて"良い人柄"に見える。