【課題】女性向けコワーキングスペースのLPデザイン
SHElikes MULTI CREATOR COURSE 4つ目の課題。架空クライアントの依頼内容をもとにデザインカンプとSP版ワイヤーフレームを制作しました。目的達成のために一貫した情報設計をし、ターゲットに合わせてビジュアルデザインに落とし込みました。
制作時間:約30時間
制作期間:約3週間
制作範囲:情報設計・ワイヤーフレーム・デザインカンプ
◎成果物
◎課題内容
【架空クライアントからの依頼内容】
- クライアント
クライアント名「WORK ,inc.」 20代〜30代女性向けのビジネススクールを展開。定期的にビジネスコンテストなどのイベントも開催している。 - 目的
新しくオープンする会員限定のカフェ&コワーキングスペース「WORK lounge Aoyama」について知ってもらうこと。 - ターゲット
ビジネススクールの会員、会員ではないが気になっている方。 - ペルソナ
32歳女性、東京在住、メガベンチャー ゲーム事業部部長(8年目)、既婚で旦那さんと二人暮らし、スキルアップへの投資は惜しまない。 - ペルソナのニーズ
仕事の成果をもっと出したい。同じような目標を持った女性との人脈を作り、切磋琢磨しあいたい。会社外での人脈を作りたい。ゆくゆくは起業も考えている。マネジメントやコーチングを学びたい。 - 提供素材
ロゴ、PC版ワイヤーフレーム
◎情報設計
目的) 「WORK lounge Aoyama」に興味を持ち、足を運んでもらう
- どのような施設なのか詳細に掲載することで、実際に施設に足を運んだ時のイメージができる。似たような施設との比較がしやすくなる。
足を運んだ場合の疑問点や不安な点を解消できるようにする。
この時代だからこそ気になる点はページ上部に配置
FAQや問い合わせフォームも配置することで、ユーザーの施設への不安な点を無くす
会員でない方も興味が出るような惹きつける内容も掲載
◎ビジュアルデザイン
「落ち着き」「清潔感」「温かみのある空間」がコンセプト
【配色】
可愛らしすぎないくすみカラーをベースに、優しくも女性らしいピンクや、温かみのあるライトの色のようなベージュを使用しました。
【フォント】
本文フォントはデバイス搭載の「游ゴシック体」に。欧文は視認性が高く丸みのある「Century Gothic Pro」を使いました。あしらいには「Dancing Script」を使用し、すっきりとオシャレな印象を与えるようにしました。
【装飾】
ボタンのデザインは濃い塗りではなく、全体との統一感を出すために、細い線の囲みがあるデザインにしました。使用しているアイコンも線の細いものを使用し、優しさと落ち着き感を与えられるようにしています。
【制作する上での工夫ポイント】
- 施設の詳細情報によって利用する/しないが変化すると考え、ユーザーが気になりそうな情報は全て掲載しました。
- 落ち着きや清潔感がコンセプトなので、すっきりとした余白の取り方ときっちりとした整列には時間をかけてこだわりました。
- 全体的なイメージを崩さないような写真・アイコン・あしらい選びをしました。
【課題を通して学んだこと】
- Webページトレースで学んだことをアウトプットすることができました。クライアントの目的達成のため、情報設計から細かく根拠を持って制作することの大切さを学びました。
情報設計やデザインに迷った時は、クライアントの目的を改めて確認することが重要だと学びました。
デザインカンプの時点でコーディングを意識しながら、余白・整列・タイポグラフィに規則を作る必要があることを学びました。