【LPデザイン】架空コワーキングスペースのWebサイト | 実践課題

制作時間：約20時間

制作期間：約2週間

使用ツール：Photoshop

制作範囲：情報設計・ワイヤーフレーム・デザインカンプ

目次

• 制作物
• 課題内容／要件
• 情報設計
  • ユーザーストーリー
  • ワイヤーフレーム修正
• ビジュアルデザイン
  • デザインコンセプト
  • 伝えたいイメージ
  • 配色について
• 工夫したポイント
• 課題を通して学んだこと

制作物

課題内容／要件

架空クライアントからのLPデザイン作成依頼。

・要件

・ペルソナ

情報設計

要件とペルソナを元にユーザーストーリーを考え、ワイヤーフレームの修正を行いました。

・ユーザーストーリー

・ワイヤーフレーム修正

ビジュアルデザイン

・デザインコンセプト

コンセプトは、「可能性を引き上げる、成長とつながりの場」です。単なる作業場所ではなく、同じ志を持つ仲間と出会い、切磋琢磨しながら共に成長していく場所。訪れるたびに「私にもできる」という自信が湧き、理想の自分へ一歩ずつ近づいていく場所。そんな明るく前向きなエネルギーに満ちた、新しい一歩を踏み出せる場所としてWORK lounge Aoyamaの魅力をお伝えできればと思い、このコンセプトにしました。

・伝えたいイメージ

　　・キャリアアップを真剣に考える女性のための成長できる空間

　　・同じ志を持つ仲間との出会いやつながりが持てる

　　・明るい未来への期待、活力がありワクワクする

　　・洗練されつつも温かさもある場所

・ムードボード

・配色について

ビジネスやキャリアを連想させるネイビーと成長を表すグリーンの中間色をメインカラーに置き、堅苦しすぎずに落ち着きや清潔感を感じられる配色をベースに、エネルギーや前向きさを表す色をアクセントカラーに取り入れました。アクセントカラーは彩度や明度を揃えることで、4色と多くはありますが統一感の出るようにしました。アクセントカラーはそれぞれ、コーラル→活力や行動力・女性らしさ、スカイブルー→朝の始まり、爽やかさ、ライトグリーン→成長や成功、ゴールド→輝きや朝日を表しています。

・作成したスタイルガイド

工夫したポイント

・「お問い合わせ」の固定ボタン

他のCTAボタンと同様にコーラルを使用して統一感を保ちつつ、ゴールドとのグラデーションで差別化しました。

・アイコン・イラストによる情報伝達

利用可能設備やご利用方法では、直感的に理解できるアイコンを使用し、テキストを読まなくても情報が伝わるよう工夫しました。

・コンセプトセクションのデザイン

「理想の姿に向かって頑張るあなたへ」というメッセージを印象付けるため、従来のセクションタイトルを廃し、背景に「Concept」を配置することで感情的な訴求を優先したレイアウトにしました。

・アプリダウンロード導線の強化

アプリからの予約やリピートへ繋げるため、アプリダウンロードはモックアップやアイコンを追加してより目立つように工夫しました。アプリストアへの導線やQRコードを設置することで、その場ですぐにダウンロードできるようにしました。

・写真デザインの統一

全ての写真に、角丸を1箇所のみ大きくしメインカラーを薄くした影をつけるというデザインを採用することで統一感が出るようにしました。

・グラデーションの円のあしらい

多様な人々の出会いとつながり、そして個人の成長・変化を象徴するモチーフとして、グラデーションの円をあしらいに配置しました。

・マウスホバー状態の設計マウスホバー時のデザインもPSDに含めることで、実装者が迷うことなくデザインを再現できるよう配慮しました。

課題を通して学んだこと

• クライアントとのヒアリング動画を見て、ヒアリングの流れを知ることができました。ペルソナを深堀りしたり、優先事項や気になった点を詳細に聞いていくことで、相互の認識のズレを無くしてより目的に沿ったものが制作できるのだな、と感じました。
• クライアントから頂いたワイヤーフレームをそのまま使うのではなく、目的やターゲットを理解した上でこちらから提案していく大切さも学びました。
• 事前にムードボードやスタイルガイドを作成しておくことで、デザインのコンセプトやイメージがブレにくく手戻りも減るなと実感しました。スタイルガイド作成→デザインという流れで実際に手を動かすことで重要さを体感できました。