Work1 北欧家具販売店ECサイト2(トップページのみ)

ファーストビューで商品画像を大胆に表示。

ファーストビューにメインビジュアルを配置して、商品を購入することで実現できる空間・暮らしをイメージさせるページにした。

学んだこと・工夫した点

PHPテンプレートタグを使用してWordPress化に成功。カテゴリー別にフィルタリング機能をcssで実装し、ボタンをクリックすると商品のカテゴリーごとの表示や人気ランキングが表示されるようにした。よくある質問では、Qをクリックするとアンサーが開くアコーディオンパネルを用い、ユーザーが情報を選択できるようまとめた。WordPressオリジナルテーマを作成、カスタムフィールドの作成により商品の入れ替え・アンケート結果の更新・商品のランキングをWordPress上で更新できるようにした。

要件定義

01プロジェクトの概要

東京・蔵前にある北欧家具専門店。日々の生活を豊かに彩る家具の販売、"家具のある空間・心地よい暮らし"を提案したい、という企業理念。ヴィンテージ家具や暮らしに関心がある人をターゲットにしている。新たにオンラインショップを開設するため。

02クライアントの要望と解決方法

クライアントの要望

商品のカテゴリーごとの表示切替を行えるようにしたい。コンテンツにレビューや利用者の声を入れ、信頼性を持たせるサイトにしたい。

解決方法

商品の画像と価格、説明文を1セットにし、かつカテゴリーごとの表示ができるようにフィルタリングを実装する。利用者の声をWPカスタムフィールドで更新できるようにする。よくある質問をピックアップし、購入前の疑問点を解消できるようにする。

03ターゲットのペルソナ設定

年齢/性別
34歳/女性
趣味
映画鑑賞、コーヒーを淹れる
家族
パートナーと暮らしている
職業
スタイリスト
その他
家具に興味がある、&.Premiumを購読している

04デザインコンセプト

キーワード

#北欧 #ナチュラル #アンティーク

トーン&マナー / フォント
メインカラー
#B49F74
アクセントカラー
#D1CDCC
ベースカラー
#FFFFFF

グレーを加えたスモーキーな色合いにまとめることで北欧のスタイルを表現。冬になると極端に日照時間の減る北欧の国々では、家の中に明るく優しい色を上手に取り入れていることから、複数のくすみカラーを設定した。

A
Edu VIC WA NT Beginner
Noto Serif Japanese

Google Fontsを使用。日本語には明朝体を使い、シンプルで上質なイメージを表現した。

05キャプチャー

SP時にはmenuボタンをクリックすると、メニューからお気に入りやカートに飛べるようなデザインに。

Top