デザイン鍛錬28〜お店（D2Cブランド）のWebサイト(TOPページ)〜

　今回もCocodaというサービスでUI/UXのアウトプットをしています。
今回は4回目です。

過去の作品は下記マガジンに掲載していますので、ぜひご覧ください。

デザイン鍛錬｜ひとみ｜noteイベントの常連｜note

1. デザインお題

要件定義書を参考にWebサイトをデザインしていきます。

＊

2. 要件定義書を確認

デザインの目的
・50年続く老舗家具屋さんのサイトの作成
→依頼の背景…目黒に店舗を持つ家具屋「柴田家具店」は、コロナの影響で店舗に足を運ぶ人が減り、売り上げが大幅に落ち込んでいた。店主の柴田 謙三 氏(42) は、経営を立て直すために、「オンラインでも、まるで店舗に来て柴田家具店の良さが伝わるような体験を届け、売れるようにすること」を目指し、サイトの制作を依頼。
・オンライン上で家具を買えるようにして欲しい
・SNSなどを通じて、多くの家具好きやインテリア付きに柴田家具店の認知が広まることを目指す

ターゲット層
・無印良品によく買い物で行っているような「生活、部屋、インテリアへのこだわりがある人」
・生活、ライフスタイルへのこだわりがある程度あり、自分にとって質の高い暮らしを求めている
・食器や棚など、無印製品で統一しているような人

雰囲気や伝えたい印象
老舗家具屋として受け継いできた伝統や誇りを、かっちりしたテイストで伝えながら、家具の持つ温かみ、若い世代までゆったりできるような雰囲気を目指す

参考にしたサイト
・KARIMOKU CAT
・杉山家具製作所

　上記の参考にしたサイトに関し、模写を行い経緯をnoteに記載しました。

＊

3. 骨格をデザインする

　今回のポイントとして、1440px X 1280pxの範囲の指定があるので、そこから制作します。

掲載する項目
1セクション目
- 柴田家具店
- サブタイトル：あなたの自然な暮らしを支える家具ショップ

2セクション目
- 柴田家具店について：創業50年を超える柴田家具店では、一貫して温かみのある暮らしを支える家具づくりをしてまいりました。一人で暮らすのにも、パートナーと過ごすのにも、家族でも、コミュニケーションを優しく彩る家具なら柴田家具店にお任せください。

3セクション目
- 商品一覧 (各商品に対して「詳しく見る」という導線を設置)

4セクション目
- お知らせ：
- 2020年11月21日「ブランドサイトを新設しました」
- 2020年10月12日「新商品追加のお知らせ」
- SNSリンク：
- テキスト：こちらから最新情報を受け取ってください
- Twitter (アイコンのみ表示)
- facebook (アイコンのみ表示)
- Instagram (アイコンのみ表示)

フッター
- 会社情報
- お問い合わせ
- 採用情報

上の情報を踏まえ、まずはラフ案で手書きで書き起こしました。
※字が汚くて申し訳ないです。笑

そしてラフ案を元にデザインに起こしました。

4. 詳細をデザインする

ここから、色の配色と写真を入れていきます。

=============

Twitterでも発信中です。
デザイン関連でアウトプットしています。
気になる方はぜひご覧ください！

Hitomi｜@ichito0123