【課題制作】LP制作(WF〜デザインカンプ作成)

OVERVIEW

SHElikes MULTI CREATOR COURSE DesignerでLP制作課題に取り組みました。要件定義やコンセプト決め、作成したワイヤーフレーム・デザインカンプを作成しました。 ◾️使用ツール:Photoshop ◾️作成時間:14日間

YEAR 2024


▼制作したデザインカンプ


▼クライアント情報と依頼内容

クライアント情報
クライアント名:WORK,inc.
女性向けのビジネススクールを展開している。会員は20~30代女性が多く、キャリアアップのためにビジネススキル学ぶ場を提供したり、アウトプットのためのビジネスコンテストなどのイベントを開催している。

目的
LPを通して、カフェ&コワーキングスペーススペースの認知拡大を進めること。また、カフェ&コワーキングスペーススペースの存在をきっかけに、新しく会員を増やすこと。

ターゲット
20~30代のビジネス感度の高い女性 (ビジネススクールの既存会員、又は会員ではないが、スクールのことが気になっている人)

トンマナ
ペルソナ像に合わせて制作。

▼ペルソナ

▼課題設定とコンセプト

▼ターゲットに対しての目的設定

▼ワイヤーフレームと作成時に工夫したこと

・パソコン版ワイヤーフレーム


・スマートフォン版ワイヤーフレーム 工夫点

▼ユーザーストーリー

▼工夫したこと

1.ターゲットのニーズに基づいた情報設計
ユーザーのニーズと、ラウンジのサービスが一致していることが伝わりやすいよう、「NEWS」や「イベント」などの要素を追加しました。
特に「交流できる」「学ぶことができる」というメリットが目立つよう上部に配置し、ページ離脱前にユーザーの目に入るように工夫しました。
非会員には入会のメリットも併せて伝えることで、入会への意欲を高められると考えました。

2.写真や図形の利用
サービスの説明時には、写真や図形を取り入れ、視覚的にも伝わりやすいよう工夫しました。全ての要素に取り入れるのではなく、ユーザーのニーズに対してより重要な要素に対して使用することで、メリハリをつけました。

3.イメージに合ったフォントや配色設定
ターゲットである「大人の女性」から、洗練されて落ち着いたイメージが連想されたため、派手な配色ではなく落ち着いたトーンの配色を選びました。
フォントにはゴシック体を取り入れ、落ち着きの中にも親しみやすさを感じられるようにしました。

▼課題を通して学んだこと

1.最初にコンセプトを明確にすることの大切さ
要件定義やペルソナ設定を細かく解釈して理解を深めていくことで、情報設計時に「何をメインに伝えるのか」という主軸が固まり、一貫性のあるデザインの作成に繋がるのだと学びました。

2.要素ごとに適したフォントサイズの設定
見出しや本文、注釈など、それぞれの重要度に合わせてフォントサイズを設定することで、情報の優先順位ごとにメリハリがついて、分かりやすいデザインになるのだと感じました。フォントサイズだけでなく、文字の太さや文字間隔を細かく設定し、読みやすいデザインに繋げたいと思いました。

3.リンク部分の装飾
ボタンの図形の上に文字を並べるだけでなく、「>」や「△」など図形をあしらうことで、視覚的に分かりやすくなることを学びました。メニューバーの文字部分では、ホバー時に色が変わるようデザインすることで、リンクテキストであることがわかりやすく表現できるのだと知ることができました。


サムネイル モックアップ著作者:graphictwister 出典:Freepik