詳細デザインはこちらからご覧ください。
https://www.figma.com/file/ReS2Usg0kChNYwBMMcGMEV/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9LP?node-id=0%3A1
🔽デザイン詳細
コンセプト
・親しみやすい、可能性を広げる
イメージ
・成長、親しみ、自由
ターゲット
・これから副業の勉強を初めようとしている人
・フリーランスを目指している人
・20代〜50代の人
・今の仕事に不満がある人
デザイン
・親しみやすく、誰でも挑戦できることが伝えわるようなデザインを意識して制作いたしました。
・デイトラの既存の雰囲気をなるべく壊さずホップなデザインを意識。
1.ヘッダー
・hover、選択時、透明度70%に。
2.FV
・どんなことが学べるのか見て分かるよう、プログラミング、ドローン、動画編集などのイメージ画像を背景に取り入れました。
また、ターゲットとしている年齢層に近い人物画像も取り入れ親しみやすい背景を意識してデザインしました。
・「手に職」を文字にメリハリをつけるためフォントをKaiti SCにいたしました。
・文章を目出させるために、写真の上に薄い青色の背景色を取り入れました。
3.未経験から活躍中の受講生たち
・どんな人が受講しているのか、分かりやすくなるよう顔写真大きく表示しました。
・ラベルには各コースのテーマカラーを取り入れました。
4.こんなお悩みありませんか?
・挫折、高額、不安を強調させるために、文字の大きさを大きくしました。
・悩んでいる男性のイラストを取り入れイメージしやすいデザインに。
5.解決
・1〜3のイラストでそれぞれの内容が分かるものを選びました。
6.なぜ「業界最安級」なのか?
・伝えたい箇所を黄色の背景色、フォントサイズ、太さを変え目立つようにしました。
・イラストで誰でも挑戦できる、楽しさを表現できるもの選びました。
7.CTA
・各セクションと異なるよう、黒の背景にいたしました。
・ボタンを目出させるため、オレンジを使用し目立つようにしました。
ビデオだと分かるイラスト選び、無料を再度、強調するようフォントサイズを大きくしました。
・hover、選択時、透明度70%に。
8.コース一覧
・各ボタンは、hover、選択時に塗りつぶされるデザインにいたしました。
>のイラストをつけることでボタンだと認識できるよう意識しました。
デイトラが選ばれる7つの理由
・伝えたい箇所を黄色の背景色、フォントサイズ、太さを変え目立つようにしました。
理由1
・web制作でコース初級編〜実践編の各編ごとに何を学習するのか一目で分かるイラストをデザインしました。
理由2
・アップデート内容が分かるよう画像重ねデザインしました。
理由3
・各メンターが常に三人紹介されるよう中央に配置。スライダ形式で常に流れているデザイン
にいたしました。
理由4
・長期間のサポートがイラストで分かるよう、カリキュラム期間、サポート期間をグラフでデザインしました。
理由5
・「#デイトラ」でツイートしているイメージになるようイラスト、画像をデザインしました。
理由6
・満足度をグラフに表示し受講生をイメージして女性の画像を使用しました。
理由7
・デイトラが目立つよう影、文字色をデイトラのカラー色と合うように紫を使用しました。
・比較表を用いて、他社との違いが分かるようデザインしています。
・段落ごとに見やすくなるよう、薄い赤を使用しました。
9.学んだスキルで仕事をするために
・伝えたい箇所を黄色の背景色、フォントサイズ、太さを変え目立つようにしました。
・01〜02は、配布画像です。
・ボタンが目立つよう、背景色を赤色に、中央寄せにしています。
・hover、選択時、透明度70%に。
03
・伝えたい文章を、赤文字、フォントサイズ、太さを変更しました。
・それぞれが発言しているイメージになるようデザインいたしました。
10.他スクールとの比較
・コース一覧、理由7と同様。
11.メディア掲載実績
・一目で分かるようロゴサイズ、背景色を考慮してデザインしました。
12.めざましテレビ
・動画内で表示されているものを、背景に取り入れ、目立ちすぎないよう黒の薄い背景色を重ねています。
13.厚生労働省
・デイトラでよく使われている、あしらいを使用し、「厚生労働省-求職者支援訓練」のフォントは、厚生労働省のHPと同じもの使用しました。
14.法人の方へ
・シンプルで分かるようにデザインしました。
・文章を中央寄せにし、「フォーム」でリンクに飛べると分かるよう、文字、下線カラーを赤にいたしました。
15.誰でもWebスキルを学べる環境を
・伝えたい箇所を黄色の背景色、フォントサイズ、太さを変え目立つようにしました。
・「代表取締役 大滝昇平」をメリハリをつけるため、Kaiti SCを使用しました。
16.よくある質問
・開封式で常時開いているデザインに致しました。
「Q」「A」は、デイトラのロゴのカラーと同じカラーを使用致しました。
・閉じた場合は下記のように表示されます。
17.フッター
・現在と同じフッターデザインに致しました。