バナーに色をつける
バナーの配色は、遷移先ページからとることが多いです。
別の色を使用する場合も、基本的にサイトのイメージに合う色を使いましょう。
今回の遷移先であるLP（ファーストビュー）ではピンク色と黄色が使われています。
そのまま使用しましょう。
フチに使われているピンク色は、半透明になっているので、スポイド等でうまく色がとれません。
くっきりとしたピンク色 #FF0069 を使用してきます。
Illustratorで着色する
まず、ピンク#FF0069をキャッチコピーとClick誘導部分に適用します。
次に、学べる項目部分。
この情報の優先度は高くないので、目立たせる必要はありません。
文字色は白のままにしたいので、先程のピンク色を暗くして使います。
Illustratorのカラーガイド（明清色）を使うと、良い具合の色を教えてくれます。
全体を見直して追加や調整
パーツに色を入れたら、全体像を確認します。
このとき、配置した画像や図形がはみ出していると、目が騙されてしまうことがあります。
クリッピングマスクをかけて、整理しておきましょう。
※クリッピングマスクの使い方はWebデザインのためのIllustrator入門講座で解説しています。
とは言え、今作っているバナー。
色を付けましたが、少し素っ気ない印象ですね。
素っ気なさ過ぎるかもしれません。
もう少し、コントラストをつけていきましょう。
フチで余白を際立たせる
バナーの上部、白のみでは背景と同化してしまいそうですし、余白も間延びして見えます。
5px程度、ピンク#FF0069で線を入れてみます。
たった1本の線でも、かなり印象が変わります。
重ね順を見直す
図形や画像を重ねたデザインの場合、重ね順によっても印象がかなり変わります。
しっくり来ない、と思う時は重ね順を見直してみてください。
今回のバナーは、写真は手前に配置したほうが綺麗に見えました。
良いな、と思った方に変更しておきます。
メインコピーにマーカーをひく
全体的にピンク色が主なので、メインコピー部分の主張が弱く感じられます。
もう少し強調できるように、アンダーマーカーを引いてみましょう。
直線ツールで、メインコピーの下に黄色の線を引きます。
黄色は、ファーストビューでボタン色として使われていたものを使用します。
もしくは、ピンク#FF0069をベースカラーにして、カラーガイドの“トライアド”にピックアップされた色でも良いですね。
ブラシパネルから、ブラシライブラリを開きます。
アート > アート_インクを開いて下さい。
黄色の線2本を選択。
アート_インク内にある“マーカー”をクリックして、適用します。
マーカーを引いたような見た目になりました。
線の位置、幅を整えて行きましょう。
更に、全体のバランスを見直します。
写真の位置・メインコピーのサイズを調整して下記のようにしました。
背景画像を入れる
背景が真っ白のためか、少し間延びして見えてしまっていますね。
メイン要素を邪魔しない、さりげない背景を加えましょう。
adobe stockで探したところファイル番号：338389344の画像が良さそうでした。
adobe stockで「338389344」と検索をかけるか、こちらを開いてファイルをDLして下さい。
DLしたファイルを、作成中のバナーのsozaiフォルダに移します。
バナーを作っている画面（ドキュメント）上にドラッグ＆ドロップ。
はみ出し部分を表示させないようにクリッピングマスクを設定。
最背面に移動させた、位置を整えれば完成です！
画像として書き出す
完成したバナーを画像として書き出しましょう。 クライアントからファイル形式（jpg,pngなど）やファイル容量に指定がある場合は、そちらを遵守して下さい。
今回は、特に指定はありませんでした。 ですのでファイル容量を確認しつつ、綺麗に見える形式を探します。
イラストレーターのファイルメニューから、
書き出し > Web用に書き出し を選びます。
ファイル形式を変更して、画質を確認しましょう。 文字のフチが荒れず、可読性が維持出来ていることを確認して下さい。
元画像から激しく劣化せず、ファイル容量が少なく済む形式を選びます。 「保存」ボタンをクリックして、画像ファイルとして書き出してください。
aiデータを納品する場合は、ファイル整理と文字のアウトライン化を！
画像として書き出したものではなく、aiファイルでの納品を求められることもあります。
その場合は、ファイルを整理してお渡ししましょう。
【ファイルの整理】
- 非表示にしている不要なオブジェクトを削除する
- レイヤー分けが途中からグチャグチャになっていないか確認する
- 埋め込んでいる画像等のリンク切れがないか確認する
文字のアウトライン化
入力したテキストが間違いなく読めるよう、文字をアウトライン化したデータをセットでお渡しするようにすると確実です。
デメリット：テキストツールで文字の打ち替えができなくなる
メリット：指定したフォントがインストールされていない環境でも見られる
指定したフォントが無いパソコンで開いてしまうと、そのPC内にある適当なフォントに置き換えられた状態で表示されます。元の形から大きく崩れてしまうのです。
こうならないよう、アウトライン化するわけですが……アウトラインを作成すると、文字が打ち替えられなくなり、修正がしにくくなります。
ですので、アウトライン化したファイルを別に作成しましょう。
別名で保存から、ファイル名の最後に_olと付けて保存します。
文字を選択して、アウトラインを作成します。
文字レイヤーを分けていると、レイヤー一括選択で行えるので便利です。
Win：Ctrl + Y
Mac：Command + Y
を使って、アウトラインが作成できているか確認します。
文字部分が、中抜きのような表示になっていればOK。
上書き保存して、納品しましょう。