2-2.ファーストビュー作成（Illustratorでの配置）

Illustratorを使って、前回作成した画像の上にトップコピーなどの要素を配置していきましょう。
今回でファーストビュー部分が完成します。

今回の実習の範囲

実習では、ランディングページのパーツごとに見本をご用意しています。
その見本をトレースして、最終的には１枚のLPデザインを完成させてください。
レッスンページでは、要点のみポイント解説していきます。

実習内容はデザイントレースですが、見本と完全に重ねる必要はありません。
大きさや余白の位置などは多少ズレても問題ありませんので、あまり考え込まずに進めてください。

今回の実習はページトップからファーストビューの終わりまでです。
グローバルメニューも作成してください。

※ファイル確認用。縮小していますので、トレースには使用しないでください。

トレース用の画像は、当レッスンページの素材欄、もしくは下記のボタンからダウンロードしてご利用ください。 training02-2.zipをダウンロード

デザイントレース時には、下記のように制作中のアートボードと並べて作業すると確認しやすいです。
本番、ご自分のデザインを作る時は、トレース見本のかわりにデザイン参考をおくと進めやすいでしょう。

制作ポイント

1.画像の配置

Photoshopで作成した女性の画像は、psdファイルのままリンクファイルとして配置しましょう。
psdファイルをIllustratorのアートボードにドラッグして配置すればOKです。

リンクファイルにしておくと、photoshopで修正すると、変更がIllustratorにも自動で反映されるので便利です。
「女性の位置を変えたい」 「黒色レイヤーの不透明度を変更したい」などの調整が楽にできますよ。

2.文字入れに関して

バナー講座では文字のカーニングを行いました。
しかし、Webデザインの場合は基本的にカーニングは不要です。
見出しや装飾的な文字など、画像化する文字部分のみカーニングは行いましょう。

また、Webページデザインでは、テキスト部分に使うフォントもこだわりすぎないほうが良いです。

windows/macなどOSによって初期状態でインストールされているフォントは異なります。
このためデバイスフォント（システムフォント）で表示させる場合、環境差は出ます。

ですので、本文のフォントはゴシック系か明朝系かの大まかな分類程度でOKです。
こだわりがあってWebフォント等を使用したい場合は、事前にクライアントと相談しましょう。

定番のOS標準フォント

ゴシック系
windowsならメイリオ・游ゴシック
macならヒラギノ角ゴ

明朝系
windowsならMS P明朝・游明朝
macならヒラギノ明朝

なお、今回の見本では環境差なくトレースしやすいよう Google Fontsの「Noto Sans CJK JP」を使っています。

※Adobe Fontsからインストール可能です
https://fonts.adobe.com/fonts/noto-sans-cjk-jp

3.画像端のピンクと白の枠

長方形ツールで四角を作り、回転ツールで斜めにして配置します。

クリッピングマスクをかけて、はみ出しを見えないようにしましょう。

4.表彰の枠の作り方

下記の枠部分の作り方を紹介します。

なお、見やすいように黒い背景を入れています。
皆さんはそのまま進めてください。

1.楕円を描く

2.はさみツールでパスをカット

はさみツールに持ち替えます。

赤い丸を付けたあたりを、それぞれクリックしてください。

はさみツールでクリックすると、パスが分割されます。
レイヤーパネルでは楕円形×1だったものが、パス×3の表示に変わっています。

パスの表示・非表示を切り替えて、下図のように半円だけ表示させてください。

3.長方形２つを作る

長方形ツールに持ち替えて、縦長の長方形を1つ作ります。

作った長方形を選択した状態で、windowsの方はaltキー/Macの方はoptionキーを押しながらドラッグ。
適当な場所に1つ複製します。

4.ブレンドの作成

作った長方形を2つとも選択。
そのまま オブジェクト > ブレンド > 作成 をクリックしてください。
　↓

ブレンドが作成され、上図のように長方形２つの間が繋がったような形になります。
（※初期設定や位置の違いで、見え方が違っていても大丈夫です）

出来たブレンドと、最初に作った半円、どちらも選択状態にします。
オブジェクトメニューのブレンドから「ブレンド軸を置き換え」をクリック。


半円に沿うように長方形が並んだらOKです。

5.ブレンドを調整する

ブレンドオプションを使って、ブレンドに使われているオブジェクトの並び順や数を調整します。

間隔を距離やステップにすると、任意の数を入れることが出来ます。
作成しているサイズにもよりますので、適当な数値を入れてみましょう。

方向は赤線で囲った「パスに沿う」の方を選択して下さい。
OKで確定します。

ブレンドはダブルクリックすると、始点と終点のオブジェクトを変更できます。
角度を付けたり、拡大縮小するなどして、見本と似た形を作っていきます。

必要に応じて調整してください。（※見本とピッタリ揃える必要はありません）

• ブレンドオプションで距離等を設定する
• 始点と終点のオブジェクトを変形する
• ブレンド全体を拡大縮小する

6.文字を配置

テキストツールで文字を入れてみましょう。

ブレンドの上側はもう少し開けて、下側を閉めると、バランスが良くなりそうです。
全体の丸みも、もう少し平坦な方が良いですね。

文字に合わせて調整してみます。

7.リフレクトでコピーする

ブレンドを選択した状態で右クリック。
メニューから変形 > リフレクト を開きます。

垂直にチェックを入れます。
「コピー」と書いてあるボタンをクリックしてください。

反転した複製が作成されます。
円になるように横に移動させてください。

これで完成です。
複製して文字を「満足度～」と打ち替えて並べてください。

5.角丸とドロップシャドウ

資料請求のボタンのところでは、長方形の角が丸くなっていて、ドロップシャドウが入っています。

角丸

角丸ツールを使わなくても、長方形を作成後に設定できます。
設定する場所はコントロールバーのカーブアイコン横、もしくは変形パネル。

コントロールバー

変形パネル

また、パスの内側にある丸いアイコンをドラッグしても、角を丸く出来ます。

ただし、この方法を使うと、角の丸みの値が11.48pxなど半端な数になります。
コーディングが必要な箇所（画像として使わない部分）は整数になるように注意してください。

ドロップシャドウ

ドロップシャドウは下記どちらかの方法で設定できます。
どちらも同じなので、使いやすい方からドロップシャドウをクリックしてください。

• トップメニュー - 効果 > スタイライズ > ドロップシャドウ
• アピアランスパネル - fxボタン > スタイライズ > ドロップシャドウ

表示されるウィンドウを使って、シャドウの色や方向を設定します。
プレビューにチェックを入れておくと仕上がりを確認できます。様子を見ながら、数値を変更してみてください。