【DLLの講義レポ】LPのファーストビュー作成

2022-03-11

こんにちは、ソラです!

コピー&マーケティングのWEBデザインスクール「DLL」を受講していて、今はLPの作り方を習っています。

前回のブログではLPのファーストビューの作り方をざっくりまとめました。

 

今回はやってみた中での気づきなどをレポートしていきますね。

手書きラフにチャレンジ

バナーの講義でも、LPの講義でも講師のF先生から「デザインするときは必ず手描きでラフを起こしてみましょう」と教えてもらいました。

しかし…手描きに苦手意識がありすぎて、バナーの講義では指導を無視して手描きラフを描かずにいきなりIllustratorで作成しちゃいました。

せっかく講義を受けても無視してやっては上達しませんよね😅

今回はちゃんと手描きラフを作ってみよう。

そう決意してノートに描こうとしたものの。。。

まったくイメージが湧かない😭

ペンを入れてみても上手くいかずラフをボツにしたりと手描きラフで大苦戦です💦

最終的には「まずは先生のお手本を写すだけでもやってみよう」と真似して描くことに落ち着きました。

お手本のマネでこれ?

って思うかもしれませんが、お手本のマネでコレです。

配置の目安としてのラフなので、これで勘弁してください…

というか、WEBデザインには絵の上手さはまったく必要ないそうです。

なので私のこの絵でも「配置を決める」という目的が達成できていれば全然OKなんです!!

WEBデザインを志す絵が下手な人たち、自信持ってください…😂

 

とにかく「500円モニター募集します!」のコピーが1番目立つよう配置するというイメージです。

メダル状のオブジェクトを作れるようになりました

ラフを目安にオブジェクトを配置していきます。

F先生が実践してくれているのと同じようにオブジェクトを置いていこうとするのですが……

この丸にギザギザのついたメダル状のオブジェクトってどうやって作るんだ??と手が止まりました。

バナーを作成するときはフリー素材を取り込んだのですが、色を気軽に変更できなくて苦戦したんですよね。。

Illustratorでデザインをしながら色を変えたい時、わざわざ画像をフォトショップで色を変更して、再びIllustratorに取り込んで…としてました。

取り込んだ画像の色をIllustrator上でいじれる機能とかあるんでしょうか…?

とにかく今回は画像ではなくオブジェクトでこのメダルを作りたい。

ということで、調べながら作ってみました。

メダルの作り方①楕円のオブジェクトを用意する

メダルを作るにはまず楕円形ツールで○を作るようです!

メダルの作り方②ジグザグの効果をつける

「効果」→「パスの変形」→「ジグザグ」を選択してジグザグの効果をつけます。

選択すると、どのくらいジグザグさせるかを設定する画面が出てくるのでそこで数値を入力します。

あら、簡単。。メダルができました。

大きさが大きいと切り込みが深くなり、折り返しが多いほど細かくジグザグの数が増えるようです。

オブジェクトなら色を変更するのも簡単ですね😊

複製して色を変えて…も楽ちんです。

本当にちょっとしたことですが、バナーの時にはできなかったことを1つ覚えられたので嬉しいです!

LPのファーストビューはバナーの作り方と手順は同じなので、やりながらバナー作りの復習とそこでできなかったことのリベンジをしている感じで作っていて有意義でした✨

LPはファーストビュー以外はまだあまりどんなものか把握できてないので、次の講義も楽しみです。