主ボタン｜背景と矢印を前へ送る
FV・お問い合わせの、次の行動を決めるボタン。
変更前TOP v0.13
適用済みTOP v0.14
01 / DIRECTION
車には余韻。操作には切れ。
車体や映像はゆったり見せ、ボタンとリンクはすぐに応答する。この速度差を、トップ全体のモーションの軸にします。
横方向へ進む
矢印、下線、背景面が左から右へ。前へ進む感覚を、小さな操作に揃えます。
速く動き、静かに止まる
動き始めは素早く、終わりは減速。跳ね返りや大きな傾きは使わず、質量を感じる止まり方に。
読む位置は動かさない
日本語のラベルとクリック領域は固定。反応させるのは背景・線・矢印・写真の内側です。
02 / COLOR
色の役割
現行のCSS変数を使用。黒と温かい白が大部分を占め、ベージュは選択状態と操作のアクセントに使います。
INK
#151513ページ・映像背後の基調
PAPER
#F0EEE7本文・明るいセクション
ACCENT
#D0C2A9ホバー・フォーカス
MUTED
#AAA99F暗い面の補助文
LINE
#45453F暗い面の区切り線
MUTEDは暗い背景向け。明るい面の説明文は #505047 などの濃い色に。操作対象は色だけでなく、線やフォーカス枠でも区別します。
03 / TYPOGRAPHY
文字の強弱を揃える
英字の主見出し ／ Archivo Black・400 ／ 行間 0.88〜1.05 ／ 字間 −0.055em前後
AMERICAN
SOUL.
日本語の見出し ／ 和文ゴシック・700 ／ 行間 1.5〜1.6
憧れを、乗り継ぐ相棒に。
車種・メーカー ／ Barlow Condensed・600
JEEP / CHEVROLET / DODGE
本文 ／ Arial・ヒラギノ角ゴ・游ゴシック等の環境フォント ／ 12〜16px ／ 行間 2〜2.3
車を選ぶときの相談から、日々のメンテナンス、ボディの修理、そして次の一台への乗り換えまで。アメリカ車との暮らしを、ひとつの場所で支えます。
| 用途 | PCの目安 | SPの目安 | 運用 |
|---|---|---|---|
| 英字見出し | 58〜130px / LINEUP | 56px | 長い単語は個別調整。買取はSP 15.5vw。 |
| 和文見出し | 35〜74px / ABOUT | 38px | 意味のまとまりで改行する。 |
| ボタン | 12〜14px・700 | 12px・700 | ラベルは動かさない。 |
| 注釈 | 10〜11px | 9〜10px | 現行値。公開前に実機で読みやすさを再確認。 |
日本語はOSで書体が変わります。大英字の役割は見出しとメーカー名に絞り、日本語の明朝体や装飾目的の小英語は追加しません。
04 / SPACE & LAYOUT
大きな面と、読む余白
現行は左右4.5vw、スマートフォンは24px。写真と文章はおおむね1.2：1、間は8vw。固定スクロールは幅1024px・高さ650px以上で使い、小さい画面は通常の縦並びにします。
写真・車体
1.2
1.2
見出し
本文
相談リンク
1
本文
相談リンク
1
共通化する余白の目安
8px
16px
24px
32px
48px
80px
| 画像の役割 | 比率と見せ方 | 動きとの関係 |
|---|---|---|
| FVの走行動画 | PCは横長、SPは素材ごとの専用構図 | 動画を主役に。文字を重ねる余白を確保。 |
| 取扱車種 | 通常時は横長約1.55〜1.6。固定時は画面に合わせる。 | 車体を切り過ぎず、変換は画像の内側に。 |
| 整備の写真 | PC固定は縦長、SPは約1.15 | 手元と作業面を焦点にする。 |
| 車体の切り抜き | 元画像の縦横比を保持 | 背景の境界に重ね、車体を傾けない。 |
8〜80pxは今後の部品整理に使う基準案。既存のセクション余白を一律に置き換えず、PC 80〜150px／SP 40〜75pxの強弱を維持します。ボタンの角丸は0、直線の枠と横向き矢印を共通にします。
05 / MOTION
3つの速度を使い分ける
次の数値は操作部品の改善案です。スクロールに追従する位置変化には時間を重ねず、映像や大きな写真の800ms前後の切替と速度差をつけます。
即応160 ms
操作320 ms
写真560 ms
| トークン案 | 値 | 役割 |
|---|---|---|
| speed-response | 160ms | ナビ・文字色・選択状態 |
| speed-action | 320ms | ボタンの面・下線・矢印 |
| speed-media | 560ms | 写真の小さな寄りと移動 |
| speed-enter | cubic-bezier(.16,1,.3,1) | 素早く進み、終わりを減速 |
常時動くボタンや磁石のように逃げるカーソル、点滅は使わない方針。キーボードでも反応し、タッチ操作は一回のタップで移動。動きを減らす設定では移動を省略し、色と線で状態を伝えます。
06 / INTERACTION LAB
変更前と改善案を試す
マウスを重ねるか、Tabキーで移動してください。「動きを再生」で両方を同時に比較できます。スロー設定は改善案に適用します。スマートフォンでも再生できます。ここでのサンプル操作はページを移動しません。
部品の共通仕様
形と寸法：角丸0、枠1px。基本の高さ58px、CONTACTはPC70px／SP60px。矢印24px、操作領域は最低44pxを確保。
状態：通常 → ホバー・フォーカス → 押下。Tab操作では2pxのフォーカス枠を表示。改善案の主ボタンは押下時に内側の枠でも応答します。
動きを省略：状態の色と線は残し、写真は拡大しない。サンプルの再生は一度で終わり、自動反復しません。
枠ボタン｜左から面で満たす
買取相談・ヘッダーのお問い合わせに展開。
変更前TOP v0.13
適用済みTOP v0.14
下線リンク｜線が走り、矢印が入れ替わる
取扱車種・整備・板金の詳細導線。
変更前TOP v0.13
適用済みTOP v0.14
ナビゲーション｜短い線で即座に応答
現在は薄くなる反応。改善案では明るさを保つ。
変更前TOP v0.13
適用済みTOP v0.14
車種写真｜わずかに前へ進む
写真から車種紹介へ移動できます。スクロールとホバーは別の要素で動かします。
変更前TOP v0.13
DODGE Challenger適用済みTOP v0.15
記事・一覧行｜横から反応する面
文字をずらさず、行全体が押せることを伝える。
変更前TOP v0.13
適用済みTOP v0.15
6種類の改善をトップへ適用済みです。相談例は写真切替に合わせ、選択行の線と矢印も反応します。「写真」の現行欄は停止状態を示しており、スクロールの再現ではありません。
07 / NEXT IMPROVEMENTS
次に磨く箇所と優先順位
主・枠ボタン、下線リンク、ナビに続き、車種写真・記事行・相談例もトップへ適用しました。大きなシーンの速度を上げ続けるより、操作の反応に切れを出す方が今のトップに合います。
| 場所 | 変更前（v0.13） | 改善方針 | 優先度 |
|---|---|---|---|
| 主・枠ボタン | 背景色の変化 250ms、矢印 +5px | 面の横移動＋矢印の入れ替え。CTA全体で統一。 | 適用済 |
| 下線リンク | 矢印 +6px、下線は固定 | 線が左から走る。矢印は主ボタンと同じ320ms。 | 適用済 |
| ヘッダーナビ | ホバー時に透明度 .65 | 明るさを保ち、160msの下線で即応。 | 適用済 |
| 車種写真 | スクロールで拡大率が変化 | 写真リンク化と小さな前進。スクロールの変換と競合しない構造へ。 | 適用済 |
| 相談例 | 行選択で隣の写真を800msで切替 | 写真の切替は維持。選択行の線と矢印だけ320msで応答。 | 適用済 |
| お知らせ行 | 下線表示と矢印の移動 | 暗い背景面を横から入れ、行全体を反応させる。 | 適用済 |
| メニュー | ダイアログで表示 | 開閉の面を280〜360ms、項目の時間差を30ms程度に。別途、開閉試作が必要。 | 次段階 |
| FAQ | 高さと透明度が300msで変化 | 現状を維持。ここは回答を落ち着いて読む場所。 | 維持 |
| FV・取扱車種の切替 | 動画＋スクロールに伴うマスク | 現状を基準にする。操作の反応だけを速くし、映像の余韻は保つ。 | 維持 |
| ABOUT・SERVICE・買取 | 視差・写真固定・文字の移動 | 背景と車の大きな動きは維持。新たな長い固定区間は足さない。 | 維持 |
| フッター | CONTACTが前を通り、ロゴが収まる | リンクの反応をナビと揃える。大きなロゴは静かに終える。 | 維持 |
採用した操作の動きは上のサンプルで確認できます。メニュー開閉は整理のみで未試作。既存モーションの維持対象と、追加する操作の反応を分けて記録しています。