NOCTRA
高級輸入車ディーラーのWebサイト
世界の高級車を扱う架空のディーラーのWebサイトです。学校の課題として、デザインからコーディングまで一人で制作しました。
- 制作の経緯
- 学校の課題（架空の店舗）
- 体制
- 個人制作
- 担当
- デザイン／コーディング
- 制作期間
- 3週間
- 使用技術
- HTML / CSS / JavaScript
- 対応環境
- PC
- 公開URL
- noctra.ryoya25kdgn.workers.devPCでの閲覧を想定しています（別タブで開きます）
- コード
- github.com/TeradaRyoya/NoctraGitHub（別タブで開きます）
コンセプト
Luxury in Silence.
静けさで、上質さを伝える。
見せびらかすための車ではなく、自分のために選ぶ一台。
ターゲットは35〜45歳の経営者やクリエイター、専門職の人たちです。建築やデザインが好きで、見た目の派手さより質の高さを大切にする人を想定しました。
こうした人は、大きな売り文句より、ブランドの品格や信頼感で店を選ぶと考えました。そこで「夜」を意味する店名から、夜のショールームのような暗く落ち着いたトーンを選び、情報を詰め込まずに写真と余白で語る構成にしています。
企画の段階では「シルバー×青、サンセリフ体」で考えていましたが、完成版では「ゴールド、明朝体」に変えました。明朝体のほうが優雅さを出せると考えたためです。また、最初はボタンをすべて青にして押せる場所を分かりやすくしようとしましたが、それでは写真よりボタンが目立ってしまいます。そこで青は一番下のお問い合わせボタンだけにし、アクセントを金色にしぼりました。色数をおさえることで、さまざまな色の車が引き立つようにしています。
画面ごとの工夫
1
2
3
-
ロゴは文字の間を広く取る
文字の間の余白で、急がない落ち着いた印象をつくりました。
-
最初の画面には文字を置かない
情報より印象で選ぶ人のために、まず車の美しさだけが目に入るようにしました。
-
コピーは写真のあとに
写真を見たあとに「あなたにふさわしい一台と出会う」と言葉で背中を押す順番にしました。
1
2
3
-
区切りは余白と金色の線で
写真を目立たせつつ、コンテンツのまとまりがはっきり分かるよう、余白を空けて金色の線で囲いました。
-
写真を大きく、余白を広く
車そのものが主役になるよう、カードの大半を写真にしました。
-
情報は年式と走行距離だけ
最初に知りたい2つに絞り、一覧で比べやすくしました。
1
2
3
-
日本語の見出しは明朝体
ラグジュアリーブランドらしい、品のある印象にしました。
-
写真と文章を左右交互に
3つのサービスを交互に並べ、長い文章でもリズムよく読めるようにしました。
-
本文は行間を広めに
暗い背景でも読み疲れしないよう、行間をゆったり取りました。
配色と書体
黒の階調と、一点の金色
- 背景#222222
- パネル#252525
- 文字#E1E1E1
- 金色#E2BB7B
- ボタン#0077BE
真っ黒ではない #222 を背景にし、パネルに少し明るい黒を重ねて奥行きを出しました。青は一番下のお問い合わせボタンだけに使い、写真よりボタンが目立たないようにしています。
CAR STOCKS
Cormorant Garamond — 英字の見出し
一台と出会う
Zen Old Mincho — 日本語の見出し
052-123-4567
Roboto Condensed — 電話番号などの数字
実装
ライブラリに頼らず、JavaScriptで書く
ニュースのカルーセル
4秒ごとの自動再生と、ドットでの切り替えに対応しました。ドットは記事の数に合わせて自動で作り、最後の記事で右側に空白ができないよう、動く量に上限を設けています。画面幅が変わったときは位置を計算し直します。
お問い合わせのモーダル
「入力 → 確認 → 送信完了」の3つの段階を、ページを移動せずにモーダルの中で完結させました。
CSS変数での管理
色と書体をすべてCSS変数で管理し、デザインをそろえたまま修正しやすいコードにしました。
ページ全体
枠の中をスクロールすると、ページ全体を見られます。
振り返り
高級感と優雅さを出すために色数を少なくしましたが、それだけでは味気ないサイトになってしまいます。そのため、インパクトのある写真選びに苦労しました。また、ホバーしたときの動きや、サービスの紹介が横から現れるアニメーションを付けて、味気なさを減らしました。
このサイトはPCでの閲覧を想定して作ったため、スマホでは表示が崩れます。今のままスマホに合わせると、文字や写真が詰まって優雅さが損なわれてしまうと考えています。今なら、SNSへのボタンをアイコンに変え、サービスの説明文は途中から開いて読めるようにして、画面に余白を残します。
