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

北欧をイメージさせる配色と、質の良い家具を伝えるデザインに。

"家具のある空間・心地よい暮らし"を提案する企業のコンセプトから、商品を購入することで実現できる空間・暮らしをイメージさせるデザインを心掛けた。

学んだこと・工夫した点

ラフ、ワイヤー、カンプ、コーディングまでのフローを理解する。ローディングアニメーションの実装とモバイルファーストでのコーディング。flex boxを活用した写真と文章の入ったコンテンツの見せ方。店名のsiili(ハリネズミ)という単語から、ロゴに使用するイラストをIllustratorで制作。拡大縮小に強いSVGで書き出した。

要件定義

01プロジェクトの概要

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

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

クライアントの要望

家具のある空間・暮らしを提案することから、インテリアに関する特集ページなどをサイトに入れたい。家具に関心を持ってもらい購買に繋げたい。

解決方法

北欧らしさをイメージさせる配色と、落ち着いた印象で家具の質の良さを表現する。商品に興味を持ってもらった場合、オンラインショップで購入できるような動線を意識した設計にする。

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

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

04デザインコンセプト

キーワード

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

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

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

A
Edu VIC WA NT Beginner
Noto Serif Japanese

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

05カンプデザイン / キャプチャー

モバイルファーストでのコーディングのためflex boxを活用し、視線誘導でユーザーが迷わないコンテンツの配置を意識した。

Top