AYNO SATO

Light Lounge

Light Loungeのファーストビュー
Light Loungeのabout
Light Loungeのserice

Overiew

TECH::EXPERTの模擬課題にて、新規出店するコワーキングスペースのwebサイトの作成。
ヒアリングからデザイン、コーディングまでを行いました。

制作物
コワーキングスペースのWEBサイト(レスポンシブデザイン)
URL
Light Lounge.com
使用ツール
Photoshop/ Illustrator/ Figma/ HTML/ CSS/ JavaScript
制作期間
17日

Request Content

店名
Light Lounge
住所
〒150-0041 東京都渋谷区神南1丁目12-16 アジアビル2階
電話番号
03-3223-653×
営業時間
10:00 ~ 22:00
目的
新規出店で知名度がないため、集客やブランドの認知確立をしたい。

Proce

Hearing

サイト作成の目的
新規事業出店における集客/認知度の向上
与えたい印象
作業しやすそう/安心して過ごせそう/行ってみたい
お客様の強み
空間にこだわりがある/wifiなどの設備も完備した上で低価格
希望イメージ
暖色系/シンプルで情報が分かりやすい/写真やアイコンを使っていてる/開放感のあるもの/ごちゃごちゃしていない

カラーパターンとファーストビューをいくつか作成し、イメージのすり合わせを行いました。

Persona

性格
女性
年齢
25歳
出身地
東京都
職業
webデザイナー(独立を考えている)
年収
350万
住まい
都内の1DKでひとり暮らし
性格
おしゃれが好き/ベンチャー気質/目標をしっかり立てる
趣味
カフェ巡り/読書
平日の過ごし方
10時から19時まで職場、カフェ、自宅のいずれかで仕事をしている。24時までには就寝。
休日の過ごし方
友人と食事をしたり買い物に出かけることが多い。
スキルアップのため、自宅で学習している。
好きな
ファッション
流行のデザインを好む
使用デバイス
iPhone 8
使用頻度
毎日利用する
よく使うSNS
LINE/ Instagram/ Twitt/ Facebook(こまめに情報発信している)

Concept

お客様の強み:空間にこだわりがある/wifiなどの設備も完備した上で低価格

Design comp

  • ファーストビューにベースカラーと同じ色のグラデーションをかける事により、ゆったりした空間を表現
  • Aboutの可読性を上げるためにアピールしたい部分を色や太文字で強調
  • 情報を伝えやすくする為にアイコンを使用
  • Floor Mapはターゲットが必要とする情報に絞りIllustratorで作成
  • FAQを項目別に分けたアコーディオンにする事でページが長くならないよう工夫

Color

店内の壁や家具に使われている色を選択することで
空間のイメージがしやすくなると考えました。

Font

和文:Hiragino Kaku Gothic Pro あいうえお
欧文:Lato abcdefgABCDEFG