Design Rationale — Two Demos
構成・コピー・導線は元サイトのまま、見た目とデザイン判断だけで「綺麗」より「効く」を狙いました。各パートを「なぜそう設計したか」で解説します。
それぞれ単体で動きます。スマホでも確認してください（1stビューの視線誘導とCTA動線が肝です）。
AIが作るサイトは"全要素を均等に綺麗"にしがちで、それが「開発会社っぽさ」「テンプレ感」の正体です。今回は意図的に主従・コントラスト・密度差をつけ、業種の"格"と視線誘導を優先しました。
全部を同じ重さにしない。主役（CTA・主力サービス・数字）に視線が集中するよう、他を意図的に引く。
配色・書体・余白・モーション・写真トーンを、業種の"効かせ方"に合わせて丸ごと切り替える。
モーションも余白も「視線を運ぶ」「上質に見せる」目的だけに使い、飾りのための演出はしない。
「写真を送れば最短即日見積もり」が主CTA。迷わず行動させるため、視線を最短距離でLINEボタンへ運ぶ設計。
| パート | どう設計したか・なぜ |
|---|---|
| 1stビュー | 現場写真を左から黒く沈める斜めグラデで、視線をコピー→数字→緑のLINEボタンの順に一直線に落とす（Z型）。「傷を直す。」だけアンバーで掴む。 |
| 配色 | チャコール×アンバー×生成り白の3色厳格運用。SaaSブルー/均等カラフルを排除＝開発会社っぽさを断つ。純黒でなく鉄・土の暖色寄りチャコールで安っぽさを回避。 |
| タイポ | 見出し900＋数字Bebas Neueでジャンプ率約7倍。「20,000件」の説得力を最大化。 |
| 写真 | 全画像にトーン統一フィルタ（コントラスト強・彩度−28・暗め）。バラバラな素材を"現場の格"に揃え、開発会社っぽさを消す。 |
| 角・余白 | 角丸を捨て武骨に。ヒーロー直後は詰めて連続感、施工事例は広げて見せ場＝余白に緩急。 |
| サービス | 主力リペアだけ1.4倍幅＋MAINバッジ。3つを均等にしない＝「全部同じ重さ」の逆。 |
| 施工事例 | 先頭にドラッグできるBefore/Afterスライダーで証拠を体感→下に密グリッドで物量。施工面積・工期を数値開示し信頼を具体化。 |
| モーション | LINEボタンのパルスは1st CTAのみ2回までに制限（広告LP臭を回避）、数値カウントアップ、スライダー自動ガイド。すべてCV・視線誘導が目的。 |
| カード | ふわっと浮かせず線と密度で見せる（実績台帳寄り）。工事会社でカードが浮くと開発会社テンプレ感が出るため。 |
「信頼が命」の業種。煽らず、じっくり相談へ導く。解体版の全要素を意図的に反転させています。
| パート | どう設計したか・なぜ |
|---|---|
| 書体 | 見出しを明朝（Noto Serif JP）に。ゴシック900の力強さと真逆の、知性・誠実・伝統を出す。 |
| 配色 | 白基調×濃紺×控えめゴールド。冷静に任せられる信頼感。チャコール×アンバーの武骨さと対極。 |
| 1stビュー | 明るい対話写真＋濃紺グラデ。CTA上に信頼の3点証明（初回30分無料／オンライン可／駅徒歩5分）を置き、静かでも相談する理由を明示。 |
| 余白 | たっぷり取り静謐に。ただしセクションごとに変化をつけ、フェードは軽く速くしてテンプレ感を回避。 |
| 料金 | 解体版は「料金非掲載」が信頼につながる業種だが、税理士は明朗な料金提示こそ信頼。ここが最も対照的。「人気No.1」でなく「標準プラン」と士業の品位で。 |
| FAQ・代表 | 不安を先回りで消すFAQ、代表の顔（縦長3:4で人物が映える比率）。信頼業は「誰が見るか」を見せる。 |
| CTA | 解体版の「写真1枚送れ」（即行動）に対し、「まず話を聞かせてください」（対話へ）。ヘッダーCTAは塗って導線が埋もれないよう強調。 |
同じチームが、業種で"デザイン言語そのもの"を切り替えています。
| 軸 | 解体版（力・速・行動） | 税理士版（信頼・静・対話） |
|---|---|---|
| 書体 | ゴシック900（力） | 明朝（知性・誠実） |
| 配色 | チャコール×アンバー | 白基調×濃紺×金 |
| 余白 | 密度コントラスト・武骨 | たっぷり・静謐 |
| 写真トーン | 暗め・高コントラスト・現場 | 明るい・誠実・人物 |
| 数字 | Bebasで巨大に強調 | 明朝で控えめに |
| 料金 | 非掲載が信頼 | 明朗提示が信頼 |
| モーション | パルス・カウントアップ | 静かなフェードのみ |
| CTA | 「写真1枚送れ」即行動 | 「話を聞かせて」対話へ |
「人間のプロの判断」は、一度で綺麗に出すことではなく、批評眼で殴って直すループにあります。今回も役割を分け、別の監査役とCodexで多重チェックしました。
建設・解体業の一流サイトのDNA（配色・タイポ・写真トーン・視線誘導）を抽出
抽出DNAから「効かせ方」を定義し、コピー・構成を変えずデザインを構築
作り手と別の監査役が9項目で採点 → スライダーの実装バグ・絵文字ルール違反を発見し差し戻し
指摘7点を改善。スコアが上がり合格
CTA動線・モーション過多・余白均一などを指摘 → CSS/構造で反映