架空Webページ制作
目次
- Webサイト制作の目的とゴール
- 要件定義
- ワイヤーフレームの再考
- ムードボードの作成
- 制作のポイント
- 頑張ったポイント
1. Webサイト制作の目的とゴール
■目的
- ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する
- イメージを固めるためのムードボード作成に挑戦する
- Webデザインをする際に気をつけるべき点を学ぶ
- PCとスマホのレイアウトの変化を考えられるようになる
■ゴール
- ワイヤーフレームがある状態から、自分でデザインカンプを作り上げることができる
- PCのデザインを元にスマホに最適なレイアウトを考えることができる
- Webデザインをするときに気をつけるべき基本的な観点を身につけて最低限のデザインクオリティを出せるようになる
2. 要件定義
3. ワイヤーフレームの再考
クライアント提供のPCワイヤーフレームを元に、PCワイヤーフレームは再考し、再考したPC版を元に、スマートフォン（SP）版のワイヤーフレームを制作しました。
PC版については、主に下記を再考の上、修正しました。
- FVに入っていたコンセプトをFVの下に移し、FVをシンプルに。
- 競合サイトには設備詳細が載っているものが多かったため、スペースのセグメントに追加。
- 朝活・夜活・テーマごと交流イベントの開催がアピールポイントの1つであるため、設備紹介の後にイベント紹介を追加。
- 設備・イベント紹介など、一通りの特徴を紹介した後、CTAを設置し、利用申込・見学予約に誘導。
SP版については、横並びの情報を、縦並びや、カルーセルに変更し、PC版から変えました。
4. ムードボードの作成
デザインは、ペルソナの30代広報部部長女性が大切にしているキーワード、成長・自由・選択肢・上質な環境からイメージされる、LPやムードボードをピンタレストで探し、参考にしながら作成しました。
色合いやフォントはヴィンテージ感のあるものを選び、シンプルで洗練されているけれど、自然の温かみを感じるデザインにし、画像はターゲットが大切にしているキーワードを意識し、選択しました。
5. 制作のポイント
テーマは、「わたしを、もっと自由に。成長と出会いが叶う、”もうひとつの居場所”」で、全力で仕事に向き合う30代女性に成長・自由・上質な環境を叶えられる場所だと感じてもらえるような画像や色、情報配置を意識しました。
また、ペルソナの大切していること、「成長・自由・選択肢・上質な環境」といったキーワードから、シンプル、洗練された、芯の強さ、甘すぎない、自然の温かみ、メリハリのあるといったイメージで色合いを決めました。
6. 頑張ったポイント
1つ目はムードボードで、Webサイトをどのようなビジュアルイメージにするのか、ペルソナが大切にするキーワードから、検討をしました。ペルソナをイメージしながらピンタレストで他の人が作成したムードボードを探したりもしました。
2つ目はファーストビューのメッセージで、こちらもペルソナが大切にするキーワードから、このコワーキングスペースがペルソナに提供できる価値は何か？ということを考え作成しました。
3つ目は情報配置のバランスで、横幅や縦幅など、細かく測りながら作成しました。
