Web Design / Coding / WordPress

イルミネーション
商材サイト

サイト全体のデザインからフロント実装まで担当。

Overview

案件概要

Design

サイト全体のビジュアルデザインから、下層ページへの展開、バナー・画像制作、フロント実装まで一貫して担当しました。

実装まで自身で行うことを前提に、デザイン段階からレスポンシブ時の変化や共通パーツへの展開を考慮。見た目だけでなく、その後のページ制作・更新まで意識して設計しました。

イルミネーション商材の画像を多く掲載し、それぞれの商品を際立たせたいという要望から、サイト自体は無彩色を中心としたシンプルなデザインが求められました。

初期案ではモノトーンを中心に構成しましたが、「やや寂しい」というフィードバックを受け、商品画像の邪魔をせずサイトにメリハリを加える方法を検討しました。

商品画像の印象を損なわないよう、ベースは白・黒・グレーを中心に構成。メインのボタンには紺色を加え、サブボタンは黒ベタ・黒枠とすることで、使用する色を増やしすぎずに導線の強弱をつけました。

また、画像を多く掲載しても窮屈な印象にならないよう、コンテンツ間の余白を広めに設定。文字サイズも比較的小さく抑え、写真や商品ビジュアルが画面の主役になるよう調整しました。

Implementation

多数の下層ページへの展開と公開後の更新を考慮し、ページ名に依存したclassではなく、レイアウトや役割を基準に共通classを設計。カラム数やカード形式などを組み合わせることで、異なるページでも同じ仕組みを再利用できるようにしました。

共通グリッド設計
g-boxをベースに、col-3 sp-2などのclassを組み合わせることで、PC・スマートフォンそれぞれのカラム数を指定できるようにしています。また、card-listなどコンテンツの見せ方を定義するclassとも組み合わせられるようにし、同じグリッドの仕組みを通常の画像一覧・リンク付きカードなど複数の用途で利用できるようにしました。
カードUIへの展開
カード全体をリンクにする場合だけでなく、動画サムネイルなど画像部分のみをクリック可能にするケースにも対応。.itemの有無によって内部構造に合わせたレイアウトへ切り替え、同じカードコンポーネントを異なるコンテンツにも展開できるようにしています。

Navigation

PC・タブレット・スマートフォンで、画面サイズや操作方法に合わせてナビゲーションの構成と挙動を切り替えました。
共通HTMLをベースとしながら、JavaScriptで各デバイスに必要な状態を制御しています。

PC / 1200px〜
ホバー操作を基本とし、「商品情報」はメガメニュー、「コンテンツ」はドロップダウンとして展開。
メニュー表示中は背景スクロールを固定し、スクロールバー消失による画面幅のずれも補正。
Tablet / 600〜1199px
ハンバーガーメニューに切り替え、PCでは分かれていたナビ項目を一覧しやすい構成に再編。
サブメニューも展開した状態で配置し、限られた画面幅でも各項目へアクセスしやすいレイアウトに調整。
SP / 〜599px
ハンバーガーメニューを基本とし、サブメニューには開閉ボタンを設置。
初期状態ではサブメニューを閉じ、必要な項目のみタップで展開できるアコーディオン形式に切り替え。