36b3416388c0570f

WEBサイト①

OVERVIEW

自主制作で、オリジナルのレスポンシブ対応WEBサイト制作をしました。架空のグリーンショップをテーマにしています。


■タイトル
Little Garden(店名) 

■サイト概要
吉祥寺にオープンした観葉植物の専門店のサイト。ターゲット・ペルソナに訴求するためにお洒落な雰囲気であるのはもちろん、豊富な品揃え・cafeスペースがあることをアピールして他店との差別化を図り集客を目指す。

■制作について
制作範囲:デザイン・コーディング
使用ソフト:Photoshop/HTML/CSS/JS
制作期間:3週間

対応端末:PC/スマホ
サイトURL



CONCEPT


■ターゲット

・20代後半から~30代後半の男女。
・独身・既婚問わず、仕事や生活に余裕が出てきてインテリアや住まいを充実させたい層

       ↓  ↓  ↓

■ペルソナ

神山 美咲(33歳、女性、会社員)
・中堅IT企業の人事職としてバリバリ働く
・オフは自然豊かな場所や旅行でリフレッシュ
・結婚を機に最近、武蔵境駅に引越してきた
・コロナ渦で家にいる時間が長くなりインテリアにこだわりたい
・家具は揃ったが、なんとなく無機質すぎるので観葉植物を取り入れたい

        ↓  ↓  ↓

■ニーズ
・1つのお店で植物本体や鉢といったトータルアイテムを揃えたい
・センスの良い品揃えや高品質な物を扱っている
・じっくり選びたいので休憩もできる充実した店舗
・入店しやすい雰囲気があり、初心者でも植物の相談がしやすい

 

ポイント1.写真が映えるシンプルなデザイン

ライフスタイル雑誌のようなシンプルな色味や構成で写真を引き立てるデザインにした。各要素には必ず写真(商品・店内写真など)を置き、店内が魅力的に見えるようにした。

ポイント2.使いやすくわかりやすい設計

TOPページに主要な各情報を簡潔にまとめて載せ、細かい店舗情報やアクセスについては別途コンテンツページにアクセスして確認できるよう分かりやすいサイト構成にした。

ポイント3.レスポンシブを意識したデザイン

レスポンシブ表示にしやすいよう各要素を四角の枠・帯でまとめた。スタイリッシュさも担保できる。スマホ・タブレット・PCどの媒体でもある程度のレイアウトで見られるように3種類のレスポンシブ書き込みをした。

 

【感想・気づき】

・初めてのサイト制作だったため、重複など無駄の多いコーディングになってしまった。セクション分けなど整理の意識を持って次回はもっと簡潔かつ効率的なコーディングを目指す。

・パソコンサイトに合わせたテキストのままだと、レスポンシブでは変な場所で改行されるため、どちらでも綺麗に表示できるように、PC・SPの両方のコードをしっかり書くことが大事だと感じた。