webデザイナースクール「DLL」に入会してから4か月目に入りました

いつもたくさんの方にご覧いただき、誠にありがとうございます。

心から感謝しております！

 

さて、「3カ月でwebデザイナーになれるというオンラインスクール」…。

ばりばり4カ月目に突入しております。笑

 

※ちなみに、必ず3カ月で卒業しなければならないという決まりはありません。

※今のところ追加料金もありません。

 

私は現在、最後のワークブックに挑戦中です。内容は「ランディングページの作成」です。

ランディングページの作成は、DLLの卒業制作の課題のひとつでもあります。

ワークブックで慣れておいた方が良いですね。

 

今回はランディングページの中でも最も重要な、「ファーストビュー」という部分を作成していきましょう。

与えられた素材を確認し、ペルソナを決めましょう。

 

素材はDLLより提供されています。

あと商品の画像も用意されていました。

 

優先順位を決め、手書きでラフを書いていきましょう。

illustratorを立ち上げ新規作成し、アートボードにガイドを作成します。

アートボードのサイズは幅「1,366ピクセル」高さ「768ピクセル」です。

web項目から新規作成すると、すでにこの数値になっているので大丈夫です。

 

しかし、どんな閲覧環境でも確実に表示できる幅が「1,000ピクセル」とのこと。

というこでデザインをしていく前に、1,000ピクセルの幅になるようにガイドを付け、その中からはみ出さないようにデザインしていきます。

 

ガイドは定規から引っ張ってくればOKです。

まずは白黒で配置していきます。

ガイド内にラフ画をもとに配置していきましょう。

細かいデザインと色は後でやります。

デザインと色をつけて完成です！

 

背景と、「第1位」とかに使っている勲章みたいなフリー画像は下記からダウンロードしてきました。

 

・背景画像

写真AC（無料の会員登録が必要です）

 

 

・勲章みたいなやつ

イラストAC（無料の会員登録が必要です）

 

ちなみにまだDLLに提出していません。

ランディングページはこれだけではないので、もう一つ「共感部」と呼ばれる部分を作成して一度提出してみようと思います。

 

というわけで今回は一旦終了です！

お疲れ様でした。

また次回！

 

※11/1追記…共感部も作成完了！DLLに提出しました！

作り方としては、バナーやファーストビューの優先順位をつけるのとは違い、文言をカテゴリごとに分けていきます。

 

カテゴリ①問題提起

カテゴリ②チェックポイント

カテゴリ③原因や原因の裏付け

 

作成時のサイズは幅「1366ピクセル」です。

縦は好きな数値で大丈夫です。

縦はとりあえず倍の「2,732ピクセル」にしました。

あとでも変えられるので大丈夫です。

 

ということで本日、DLLにファーストビューと共感部を送りました！

どんなフィードバックが届くのかドキドキします…。

DLLからお返事がきたらまたご報告します。

 

ではまた次回！