1.デザイン前の設定、配置決め

このレッスンでは、ランディングページを制作する準備や初期設定について解説します。 実習で使うデザインに関しては見本ファイルをご用意しておりますので、ワイヤーフレームの作成は飛ばして進めてください。

制作の下準備

1.フォルダを作成する

これから作成していくLPデザイン、デザインに使用する画像等をまとめるためのフォルダを作りましょう。
フォルダ名はLP講座実習など、お好きにつけてください。

ダウンロードした素材を解凍して、そのまま移動させます。

次に作るイラストレーターファイル（.ai）も同じフォルダに保存してください。

2.新規作成 - アートボード幅を決める

Webデザイン制作には、アートボード幅とコンテンツ幅、２つの幅を使います。
以下のイメージです。

• アートボード幅 = 全幅表示をイメージできるようにする
• コンテンツ幅 = Webサイトのコンテンツ幅を示す

近年はコンテンツ幅がない（どこまでも広がる）デザインのページもありますが、だいたいのページはコンテンツ幅が決まっていますね。これをデザインでも分かりやすく示しましょう。

アートボートサイズはコンテンツ幅よりも広く作ります。
adobeが推奨している“Web”プリセットの幅内、1280px ～ 1980pxの間くらいにしておくと無難です。

コンテンツ幅は日本のWebページだと、940px ～ 1200px程度が多いです。

今回の見本ファイルはアートボード幅1440px、コンテンツ幅1140pxで作成しています。
新規ドキュメントはアートボード幅＝幅1440pxで作成します。

3.Webデザイン向けIllustrator設定

Illustratorは印刷物の制作にも使われるソフト。
印刷物に最適化されている設定になっていることが多いです。

Webデザインに適した設定になっているか、下記3項目を確認してください。

①キー入力単位

トップメニューの編集から、環境設定 > 一般を選びます。
キー入力を「1px」に設定して下さい。

②変形の設定

長方形ツールで適当に図形を描画してください。
図形を選択して、変形パネルを開きます。

角を拡大・縮小 と 線幅と効果を拡大縮小 のチェックを外しておきます。

チェックを外したら、設定のために描画した図形は削除してください。

③表示をピクセル基準に

トップメニューの表示を開きます。
下記２箇所にチェックを入れてください。

• ピクセルプレビュー
• ピクセルにスナップ

4.コンテンツ幅のガイドを作成

ガイドとは、レイアウトの目安となる線を設定できる機能です。
コンテンツ幅の目安になるガイドを作成することで、配置時の左右のブレを無くせます。 作業自体もスムーズに進みますので、最低限、コンテンツ幅のガイドは作っておきましょう。

長方形ツールで以下の長方形を作ります。

• 幅＝コンテンツ幅（1140px)
• 高さ＝アートボードの高さ～それ以上

整列ツールを使って、水平方向中央に配置します。

更に上に整列させたら、長方形を選択した状態で右クリック。
メニューの中からガイドを作成、をクリックします。

蛍光ブルーの枠線のような見た目に変わります。
これで、作った直線はパスではなくガイドになりました。

※定規を使って２本線を引いても良いです。

●グリッドタイプのガイド

Bootstrapや、独自でグリッドデザインもしくはグリッドに準じたデザインをする場合は、グリッド線を示すガイドを作ると更に作業しやすくなります。
Bootstrap対応の12分割ガイド作成方法を紹介します。

Bootstrapでは、.containerの内側に左右15pxずつのpaddingが入ります。
ですので、1140px - 30px = 1110pxの幅で長方形を作りましょう。

整列ツールで位置を整えます。
長方形を選択した状態で、トップメニューのオブジェクト > パス > グリッドに分割をクリック。

列の段数を12、間隔を30pxに設定します（幅は自動で算出されます）。
プレビューにチェックを入れると分かりやすいです。

OKボタンで分割を実行。
右クリックでガイドを作成を行うと、12分割のガイドラインが出来ます。

わかりやすいように「ガイド」などのレイヤー名に変更して、動かないようにロックしておきましょう。

ちなみに、以下のような方法でベースを作る方もいらっしゃいます。

• ガイド化せずに淡い色を載せる
• 不透明度20％くらいで最前面レイヤーにする

作業を効率化する目的で作っているものですので、使いやすい・見やすい方法を採用してください。

文字を流し込み、配置を決める

※実習ではトレース元になるデザインをご用意しているため、この工程は不要です。
最終課題で、ご自身のデザインを作る時の参考としてお読みください。

クライアントの方でワイヤーフレームまで作ってくれていると、すぐデザインに入れます。が、そこまできっちりしていることは、あまりありません。
テキストだけ送られたり、今回のように大雑把な配置指定だけ送られてきたり…。

この状態で最初（上）からデザインしながら作ろうとすると、下記のような状態に陥りやすいです。

• どこから手を付けて良いか分からず悩む
• 最初と最後でデザインテイストがズレる
• 別のパーツを作る→最初に作ったパーツを直すなど手間がかかる
• クライアントから大幅な修正指示が来る

まずは、ワイヤーフレームにテキストを流し込んだ状態を作ってみましょう。
ワイヤーフレームに掲載文章は入れないという方も多いですが、こればデザインの下書きも兼ねています。見出しや文章が、どのくらいのフォントサイズで、どのくらいのスペースが必要になるのかも合わせて確認します。

二度手間と思うかもしれませんが、結果的に短時間で終わることが多いです。
クライアントがWeb制作フローに詳しくない方であれば、ワイヤーの段階で一度確認していただくこともできますしね。

配置に迷ったら、参考ページを探しながら進めます。
良いなと思ったサイトはスクリーンショットをとって、アードボード外に貼り付けておくとわかりやすいですよ。