【課題】LPデザイン制作(会員限定コワーキングスペース)
SHElikes MULTI CREATOR CORSEの課題で、会員専用コワーキングスペースのLP制作に取り組みました。クライアントからの要件書とワイヤーフレームをもとに、情報を整理・再設計しPC/SPのワイヤーフレームとデザインカンプを制作しました。【制作期間:2週間】
目次
------------------------------------
1.制作物
2.課題要件
3.ペルソナ
4.情報設計
5.デザインコンセプト
6.工夫した点
7.修正箇所
8.制作を通して学んだこと
------------------------------------
1.制作物

2.課題要件

3.ペルソナ

4.情報設計(WFの修正)
クライアントから提供があったWFを以下のとおり修正しました。

①CTA追加
LPの目的が認知拡大と新規会員の募集であるため、サイトを訪れた人に必ず見てもらえる位置に「ビジネススクールWORK会員募集中」のボタンを配置。
②PLAN追加
座席の種類と付随するその他サービスを紹介するセクションを追加。MENUの前にPLANのセクションを持ってきたのは、ペルソナがドリンクメニューよりもどんな座席があるのかを重要視するのではないかと考えたため。
③MENU表示
ペルソナがドリンクメニューよりも他の情報を重要視するのではないかと判断したため、ドリンクの情報は少量にし、見たい人はカルーセルを動かす仕様に変更。
④NEWS追加
イベント情報(コーチング等)や休業日をお知らせするセクションを設け、コワーキングスペースとしての利用だけでなく、イベントに参加する目的の利用者の増加も狙う。
⑤お問い合わせ追加
機材の確認や事務的な確認で問い合わせ先を設けたほうが、サイトおよびコワーキングスペース全体の信頼度があがると考えられるため、配置。
5.デザインコンセプト
【コンセプト】
落ち着きと余裕を感じさせる大人の女性が過ごす空間
【デザイン】
ペルソナおよび課題要件から次の「Key Words」を考えました。シンプルで洗練された雰囲気と女性らしいしなやかさを感じられるデザインを目指しました。

6.工夫した点
◆背景のあしらい
◆写真や図形の形
写真や図形の形は右上と左下が直角、左上と左下が角丸の形状としました。
この形状を選んだ理由は、仕事に熱心に取り組む強さと、女性らしいしなやかさを同時に表現できると考えたからです。直角の部分が強さを象徴し、角丸の部分で柔らかさや親しみやすさを表現しています。

◆アイコンの使用
その他設備やサービス、利用方法の部分でアイコンを使用しました。
視覚的にわかりやすく情報を伝えるため アイコンを適宜使用することで、サイトに訪れた人が一目で内容を把握でき、スムーズに情報を取得できると考えました。

◆アプリの認知とダウンロードを促す
サイトのデザイン全体に視覚的な変化を持たせるために、それまでのデザインとは異なる要素を取り入れました。幅いっぱいに広がる紺色の帯の上に、白い文字でダウンロードを促すテキストを表示し、サイトを訪れた人の印象に残るように工夫しました。

7.修正箇所
デザインカンプを制作する中で、多くのフィードバックをいただきました。その中でも特にデザインに大きな影響を与えた修正点は以下のとおりです。
【フィードバック内容①】
休業日は確実にお知らせする必要があるので、ページ上部に持ってきた方が安心。
【修正内容】
ご指摘を受け、いくつかサイトを確認し、ニュースがトップページに記載されているパターンが多いことに気が付きました。また、LPの目的である認知拡大に気を取られ、コワーキングスペースの運用という観点が欠落していたことに気づくことができました。そのため、「NEWS」のセクションを「EVENT」に変更し、ニュースの項目はトップのメインビジュアル内に表示するようにしました。


【フィードバック内容②】
日付よりもイベントタイトルが目に入るように主従関係を調整した方がよい。
【修正内容】
ご指摘を受けて他の事例を調べたところ、イベントタイトルのフォントが目立つものが多いことに気づきました。そのため、イベントタイトルがより目立つようにフォントサイズを大きくし、日時の情報を小さく修正しました。この修正を通じて、情報の優先順位を考える重要性を学びました。

8.制作を通して学んだこと
◆全体
ペルソナの深掘り、要件を満たした情報設計、そしてワイヤーフレームの組み立ての流れを実際に手を動かしながら実践出来たのが1番の学びでした。
◆デザインの基本原則の徹底
デザインの基本原則である「近接」「整列」「反復」「対比」 を徹底的に厳守することで、美しく、読みやすいデザインを制作できることを改めて実感しました。
◆フォント
高級感があるデザインのフォントは、主にセリフ体や明朝体であり、細くて上品なものであることを知りました。また、文字間や行間を広めに設定することで、余裕のあるデザインを演出できることを学びました。
