安部自動車（仮称）様　ホームページ新規制作　／　2026-09-30 第2版

1ページ完結LP　デザイン3案

6業務を「買う・守る・借りる」の3群に整理し、「担当が変わらない」「料金の目安を先に」「大手にはない小回り」という訴求軸を、方向性の異なる3案で見せています。第2版では、評価の高い自動車業界サイトをリサーチしてテイストを作り直し、スクロールに合わせた動きを全面的に加えました。すべてスマホ優先で、ヘッダーに電話ボタン、画面下部に追従CTAを置いています。

第2版：デザイン刷新＋モーション追加追加写真6枚を反映済み住所・電話・料金・実績はすべて仮置き許可・認証：確認後に掲載フォームは見た目のみ

3案 実際に開いてスクロールすると動きが確認できます

案A PC案A スマホ
案A信頼・正統派

車のご用件を、ひとつの窓口で。

ネイビー×白。英字の大見出し（Jost）と太い和文（Zen Kaku Gothic）を組み合わせ、写真を重ねて配置。広い余白でまとめています。

動き

  • オープニングの幕開け演出と、見出しが1文字ずつせり上がる動き
  • 写真が幕を引くように現れるリビール、スクロールに合わせたパララックス
  • 6業務の英字が流れ続けるマーキー帯
  • 「担当ひとり→6業務」の図は、線を描いてから項目が順に出る
  • 「大切にしていること」はPCで写真を固定し、スクロールに合わせて切り替え
  • ご相談の流れは、スクロール量に合わせて線が伸びる

参考にしたサイト：長野安全自動車（色面・番号付きの事業行）、LEXUS（マスクで見せる演出・余白）、早川自動車整備工場（イージングの統一）

案Aを見る
案B PC案B スマホ
案B親しみ・顔が見える

車のこと、いつもの人に。

クリーム×テラコッタ。丸く切り抜いた写真、縦書きのキャッチ、手書き風の英字（Caveat）で、人柄が伝わる温かさを出しています。

動き

  • 縦書きのキャッチが1文字ずつ現れ、丸い写真はゆっくりズーム、小さい写真はふわっと浮遊
  • 5つの場面をたどるストーリーは、スクロールに合わせてテラコッタの線が伸び、同じ担当（M.A）が各場面に登場
  • 代表写真の枠のまわりを点線がゆっくり回転
  • サービスはスマホで横にスワイプ。ボタンと選択チップは押すと「ぷるっ」と弾む
  • フッターに手書き風の英字がマーキーで流れる

参考にしたサイト：下原自動車（丸い写真・縦書き・英字の添え方）、arinomama（1文字ずつ現れる見出し・固定の相談導線）、早川自動車整備工場（ボタンの弾む反応）

案Bを見る
案C PC案C スマホ
案C料金と分かりやすさ

車の費用、先にお見せします。

白×グリーン×黄色のマーカー。見やすさ重視のUDフォント（BIZ UDPゴシック）に、金額は細長い数字書体（Barlow Condensed）を合わせています。

動き

  • 最上部に料金の目安が流れるティッカー
  • 見出しにマーカーが引かれ、写真の上で料金カードがゆっくり揺れる
  • 料金タブは白い下地がスライドして切り替わり、カードが順に出てくる
  • まとめて相談：チェックすると件数が弾んで増え、フォームへ移ると入力欄が光る
  • すりガラス風の固定ヘッダーと、スクロールに合わせて伸びる流れの線

参考にしたサイト：コバック（料金のマーキー・UD書体＋数字用書体）、KINTO（すりガラスのヘッダー・月額カード）、早川自動車整備工場（料金カード・進捗ライン）

案Cを見る

今回のリサーチと改善方針

参考にした業界サイト（実際のソースで動きの仕組みを確認）

“テンプレート感”をなくすために変えた点

  • 英字の大見出しに日本語の見出しを添え、欧文と和文で書体を分けた
  • 影と角丸だけのカード並びをやめ、写真の重ね・切り抜き・全幅写真で構成
  • イージング（動きの緩急）を1種類に統一して、動きに一貫性を出した
  • 色は各案3色以内。アクセント色はCTAと強調だけに使う
  • スマホの操作感を優先。スクロールはブラウザ標準のまま（慣性スクロールは不使用）、「視差効果を減らす」設定の端末では動きをすべて止める

写真の反映状況

ファイル名使う案／配置場所状況
pit-inspection.jpgAサービス「守る」Bストーリー02・サービスCタイル「守る」反映済み
rental-fleet.jpgAサービス「借りる」BサービスCタイル「借りる」反映済み
used-cars-lot.jpgAサービス「買う」BサービスCタイル「買う」反映済み
corporate-fleet.jpgA法人・事業者のお客様（全幅＋パララックス）反映済み
bodywork.jpgBストーリー03・小回りC選ばれる理由反映済み
appraisal.jpgBストーリー05C選ばれる理由反映済み
owner.jpgA代表ご挨拶B代表・担当より実写待ち（生成しない）。届くまでイニシャル枠「M.A」を表示
case-01〜03.jpg全案 納車・施工事例実写待ち（掲載許可済みの写真を推奨）

共通の仕様

電話・フォーム・写真

  • 電話ボタンは href="tel:"（番号未設定）。タップすると「打合せ後に掲載」と表示。番号確定後は <body data-tel="…"> に入れれば全ボタンに反映
  • フォームの name 属性は 氏名 電話 メール 相談内容 本文 で固定。data-endpoint にENWELLの受付エンドポイントを入れれば送信される
  • 写真は assets/photos/ に同じファイル名で置けば、HTMLを直さずに差し替わる

表現ルール（第2版で再チェック済み）

  • 料金はすべて「◯◯,◯◯◯円〜」の仮置き。車検・レンタカーは下限額表示、中古車は「支払総額でご案内」。二重価格なし
  • ご指定の使わない語は、3案すべてで0件
  • 各案に「許可・認証：確認後に掲載」を入れ、お客様の声は「掲載準備中」のサンプル枠（サンプルと明記）