セミナーLPファーストビューデザイン

目次

1. デザインカンプ

2. 案件の情報整理 ・ワイヤーフレーム

3. 制作意図

4. 制作期間・使用ツール

1. デザインカンプ

◆PC版

◆SP版

2. 案件の情報整理 ・ワイヤーフレーム

◆クライアント情報

webやグラフィックなどさまざまな媒体のデザイン制作とブランディングを行なっているデザイン事務所。デザインスクールも運営しており、デザイナー養成を行い、卒業生はパートナーとしてデザインを依頼する予定。

◆制作目的

デザイン未経験者を対象のデザインスクールを受講してもらうためのナーチャリング第１段階として無料のセミナーを開催するので、参加者を募集したい。

◆ターゲット

20代で、今はデザインとは無関係の仕事に就いている男女。

◆ペルソナ

【属性】

25歳男性。新卒で入ったアパレルメーカーで販売担当。

【背景】

今の仕事が嫌ではないが、会社の業績が芳しくなく、明るい未来が見えない。会社を離れても武器になるようなスキルを身につけたいと思っている。デザインスキルを身につければ、副業できるか、もしかすると独立できるのではないかと考えている。

【ニーズ】

まずは副業デザイナーになりたいので、そのために必要な知識やスキルを身につけたい。

【ゴール】

副業の収入が今の収入を上回り、デザイナーが本業となり、楽しい毎日を送る。

◆ワイヤーフレーム

以上をふまえて次のようなワイヤーフレームを作成しました。

3. 制作意図

【構成】

・面積の割に乗せるべき項目が多かったため、項目ごとに重要度を決め、それに応じてフォントサイズや強調の仕方を変えました。

・「次世代WEBデザイナー」を強調するため、一番大きく表記しました。

・「無料」「期間限定」「特典のプレゼント」など、お得感を感じてもらえる内容は、下線を引いたり色で目立たせたりしました。

・背景には、うっすらと装飾を入れて、都会的な雰囲気にしました。

・写真は、楽しく仕事をしている雰囲気のあるものを選びました。

【カラー】

・ペルソナが男性のため、ベースには青（#003674）を選択し、それに近い色を使ってさりげなく装飾を入れました。

・メインには活動的なオレンジ（#EE6230）を選択し、文字の帯などにベタ塗りではなくグラデーションも使いました。

・CTAにはアクセントで緑（#0FB151）を選択し、クリックしやすくなるようにしました。

【フォント】

視認性が高く、ブラウザによる見え方の差が少ないGoogle Fontsの中から日本語には「Noto Sans JP」、英語には「Roboto」を採用しました。

4. 制作期間・使用ツール

【制作期間】8時間

【使用ツール】Adobe Photoshop・XD