中小企業・お店のための Web制作

Landing Page — Concept Work

湯の社 こだち

家族経営の日帰り温泉施設（架空のクライアントを想定した自主制作）

画像クリック、または上のボタンで実際のサイト（PC・スマホ対応）が開きます。

課題

常連の高齢客は多いが、観光客や若い世代に存在も魅力も伝わっていない。

狙い

「入りたさ」を写真で伝えつつ、営業時間・定休日・日帰り可否で迷わせない。

工夫したポイント

• 湯気を主役にしたファーストビューで「入りたさ」を最優先
• 営業時間・定休日・最終受付を1画面に固定表示
• 高齢の常連にも読める大きめ文字とコントラスト

5軸評価（自己評価）総合 A

第一印象・世界観	●●●●●
導線・使いやすさ	●●●●○
成果への貢献	●●●●○
技術品質	●●●●○
独自性	●●●●○

生活者ゲート：通過（3秒判別・連絡先・可読性）

技術品質を4にしたのは、フレームワーク不使用の素のHTML/CSSで更新運用の仕組みが最小限なため。満点にせず正直に評価することで、いちばんの強み「第一印象・世界観（5）」を際立たせています。

※自主制作のため効果は想定です。実案件では問い合わせ数などの実数値を記載します。施設名・内容はすべて架空のものです。

Corporate Site — Concept Work

大地工務店

地域密着の工務店・リフォーム／リノベーション（架空のクライアントを想定した自主制作）

画像クリック、または上のボタンで実際のサイト（PC・スマホ対応）が開きます。施工事例はクリックで詳細モーダルが開きます。

課題

腕は確かなのに施工事例を見せきれず、大手ハウスメーカーに見劣りして問い合わせにつながらない。

狙い

施工事例を主役にして「この会社なら任せられる」という信頼を作る。

工夫したポイント

• 施工事例をBefore/Afterで見せ、得意分野が一目で分かる
• 代表・職人の顔と想いを出し、「誰が建てるか」を可視化
• 各事例の下に「無料相談」への動線を置き、見る→相談の流れを作る
• 断熱・耐久など住まいの安心を、ならではの訴求ポイントに

5軸評価（自己評価）総合 A

第一印象・世界観	●●●●○
導線・使いやすさ	●●●●●
成果への貢献	●●●●●
技術品質	●●●●○
独自性	●●●●○

生活者ゲート：通過（3秒判別・連絡先・可読性）

第一印象・世界観を4にしたのは、信頼感を優先して華やかさを抑えた判断のため。技術品質4はフレームワーク不使用で保守の仕組みが最小限なこと。狙って伸ばした強みは導線・成果（ともに5）です。

※自主制作のため効果は想定です。実案件では問い合わせ数などの実数値を記載します。社名・内容はすべて架空のものです。

Online Shop / EC — Concept Work

里の恵み

農園・生産者のお取り寄せEC（架空のクライアントを想定した自主制作）

画像クリック、または上のボタンで実際のサイト（PC・スマホ対応）が開きます。商品はカートに追加でき、手描きイラストが描かれる演出を入れています。

課題

良いものを作っているのに魅力が伝わらず、価格競争に巻き込まれる。スーパーには出せない旬を、直接届けたい。

狙い

作り手の顔と旬のストーリーで「ここで買いたい」を作り、取り寄せ・定期便につなげる。

工夫したポイント

• 有機的なコラージュと手描きイラストで「素朴・あたたかい」世界観を主役に
• 作り手の一人称の手紙とサインで「誰が育てたか」を可視化し信頼を作る
• 商品に価格＋カート、画面下に常時CTAを置き、迷わず買える導線に
• 定期便（解約自由・配送透明）で不安を先回りし、リピートを促す

5軸評価（自己評価）総合 A

第一印象・世界観	●●●●●
導線・使いやすさ	●●●●○
成果への貢献	●●●●○
技術品質	●●●○○
独自性	●●●●●

生活者ゲート：通過（3秒判別・連絡先・可読性）

技術品質を3にしたのは、手描き演出が多くLCP・no-JS耐性に課題があったため（指摘を受け改善済み）。強みは世界観・独自性（ともに5）。弱い項目を残して書くことで、満点の項目の信頼性を担保しています。

※自主制作のため効果は想定です。実案件ではクリック率などの実数値を記載します。店名・内容はすべて架空のものです。

Corporate / Portal — Concept Work

東京建材協同組合

建材・設備資材の事業協同組合（架空のクライアントを想定した自主制作）

まずトップページを高完成度で実装。明朝×英字の組版と、図録の図版様式を借りた口絵プレート（Plate Ⅰ）が世界観の核です。下層ページは後フェーズで展開します。

課題

事業協同組合のコーポレート／ポータル。堅実さと伝統を保ちつつ古びて見えず、長期検討・勧誘を嫌うBtoB相手でも「加入相談」に踏み出せる設計が要る。

狙い

「書籍装丁家」の組版で老舗の品格を画面化し、重厚なエンタープライズUIの実績を1本持つ。地方・中小・親しみ系の3作と対をなす、都市・BtoB・重厚系の守備範囲を獲得する。

工夫したポイント

• 極大の余白と明朝×英字キャプションの対比で「本の扉ページ」の静けさを再現
• カード反復を避け、極細罫線のリスト・左右非対称・沿革タイムラインでAIっぽさを排除
• 図録様式の口絵プレートと難読漢字のルビ（礎）で、作者の個性とモーションを一点に集約
• 「強く勧誘しません／資料請求だけでも」の一文と3項目フォームで、BtoBのCVハードルを低減

5軸評価（自己評価）総合 A

第一印象・世界観	●●●●●
導線・使いやすさ	●●●●○
成果への貢献	●●●●○
技術品質	●●●●○
独自性	●●●●●

生活者ゲート：通過（3秒判別・連絡先・可読性）

強みは第一印象・独自性（ともに5）。技術品質は4——CWV対策（LCP用preload・aspect-ratioでCLS抑制）、no-JS耐性、全アンカーのデッドリンク検証まで実装確認済み。重厚系で技術も担保できることを示す1本です。

※自主制作のため効果は想定です。実案件ではクリック率などの実数値を記載します。団体名・内容はすべて架空のものです。

Featured Case — 同一商材 C → A

Lumina｜ビフォーアフター

溶かして飲むインナーケアパウダーの定期通販（架空のクライアントを想定した自主制作）

狙い

同じ商材でも、基準で診断して主役軸に処方すればA評価に届く——それを改善前後の対比で示す。感覚ではなく理由で判断していることを、スコアと「直し方」の言葉で説明できるようにした。

5軸の C → A と、その直し方C 1.8 → A 4.2

生活者ゲート：C＝一部要注意　→　A＝通過（3秒判別・連絡先・可読性）

改善前の弱点は、診断モードで一つずつ「何が起きて・なぜ弱いか」を解説しています。改善後は薬機法に配慮し、効果・効能を断定する表現は用いていません。

※自主制作のため効果は想定です。実案件では申込率などの実数値を記載します。商品名・内容はすべて架空です。平均は5軸の単純平均（C＝1.8／A＝4.2）。