【架空案件】LP制作-女性向けコワーキングスペース-(デザイン)
SHElikes MULTI CREATOR PROJECTにて、LP制作課題に取り組みました。PC版ワイヤーフレームの修正と、PC版・SP版のデザインカンプを制作しました。
|制作概要|
制 作 期 間 :約2週間
制 作 範 囲 :ワイヤーフレーム分析・修正案作成・PCデザインカンプ
使用ソフト:Photoshop
|目次|
1. 目的
2. 制作物
3. 要件
4. 工夫したところ
5. 制作を通して学んだこと
1, 目的
・ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する
・イメージを固めるためのムードボード作成に挑戦する
・Webデザインをする際に気をつけるべき点を学ぶ
・前回の課題でインプットしたPCとスマホのレイアウトの変化を自分で考えられるようになる
2, 制作物
■ ワイヤーフレームの修正案
■ 作成したデザインカンプ
・テーマ:キャリアアップを目指す大人の女性が通いたくなるワーキングスペース。
同じ意識を持つ仲間とつながる場所
・キーワード:かっこいい大人女子、仲間との交流・繋がり、自己成長
要件書を見た時に、ターゲットの女性は“自立したかっこいい大人な女性“という印象を受けました。ただ、キャリアアップを目指す中でも、同じような志をもつ”仲間との交流“といった点も重要視していることを同時に感じました。そのため、コワーキングスペースというビジネス的な場所ではあるけれども、人間味のある温かさや親しみを感じられるような雰囲気を表現できるように作成しました。
3, 要件
- クライアント情報
<クライアント名:WORK,inc.>
女性向けのビジネススクールを展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。 - 目的
会員様限定のカフェ&コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらいたい - ターゲット
ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方 - ペルソナ
4, 工夫した点
■ コンテンツの再検討
- もとのワイヤーフレームではドリンクメニューが上部に来ていました。今回の要件ではカフェの要素よりも“勉強ができる場所”“同じ高い意識を持った仲間との交流”を主に伝えたいと思ったのでドリンクメニューはページの下部へ移動し、シンプルに記載しました。
- 利用者は女性会員ということなので、雰囲気を視覚的にわかる項目があったほうが良いと考え“Facility-設備”の項目を追記しました。ワイヤーフレーム通りだと、ページの最初に抽象的な“コンセプト”があり、次に具体的な項目である“システム”に入ってしまうため、その間にワーキングスペースの雰囲気やどのようなサービスがあるのかを伝える項目があるとよいと考えました。
■ 非会員向けの誘導
今回のターゲットは会員の方だけでなく、まだ会員でない方も含まれているため、このLPサイトを通して興味を持ってもらいWork,inkのページへ繋げるボタンを追加しました。ページの序盤(コンセプト)と終盤(フッター前)に設置することで、会員ではない人がこのページを見て会員になりたいと思ったときにすぐworkのページに飛べるように工夫しました。
■ 配色
- 自立したかっこいい女性をターゲットとしているためメインカラーは「洗練」「かっ こよさ」をイメージしたネイビーを設定しました。本文やボタンの色に用い、サイト全体を引き締める効果をもたせています。
- ネイビーとグリーンはどちらも寒色系の色の為、調整をせずにそのまま使用するとサイト全体が冷たい雰囲気になってしまうので、タイトルに手書き風の筆記体を用いて優しく柔らかい雰囲気を出したり、濃いグリーンをベタ塗せずアクセントとして用いました。洗練されたイメージではあるけれど、仲間との交流などもある温かさ・親しみやすさを表現できるようにサイト全体のバランスを見ながら配色しました。
■ 視線誘導とあしらい
- 大きいタイトルは左右に振りながらも、文章をしっかり読んでもらえるようにアクセントとして画像を配置しました。背景と文字の色も視認性を意識しながら調整をしています。背景色として用いたグレーがかった水色(グリーン)は、微調整を重ね設定しました。少しの違いで子供っぽさのある水色のようになってしまうので渋すぎず、子供らしくならないような色味となるよう調整しました。
- キーワードをデザインとして表現することにもこだわりました。キーワードとして挙げていた「仲間との交流」はタイトル部分やコンセプト部分で画像を重ねることで表現をしました。またターゲットである「かっこいい女性」を表現するために、曲線的なデザインより直線的なデザインをメインに使用し、統一感を出しました。
5, 制作を通して学んだ点
■ ムードボードの重要性
LP全体の雰囲気を確り言語化し、トーンや雰囲気を統一することが非常に重要だと思いました。そのためにも、ムードボードにキーワードや参考にするサイトを書き出し、定期的に確認しながらLP制作に取り組むことで雰囲気を崩さずに作成することができると学びました。