前回ざっくりと配置したバナーに入れる文字部分について、フォントタイプや文字サイズ・位置を固めていきましょう。
フォント選定
どんなフォントを使用するかで、バナーの雰囲気は大きく変わります。
限られた要素で作るからこそ、バナー制作でフォント選定は重要です。
ターゲット層やデザインを考慮すると、今回のバナーではゴシック体が違和感なく馴染みますね。
フォントを追加する
いざフォントを決めようと思って、フォントの太さを変えてみたり。
別のフォントに変更してみたりしても「しっくり来ない！」という事もあります。
特にWindowsは初期フォントが少ないので、デザインの練習をはじめてすぐの頃はフォント探しで困ることが多いです。
そんなときに使用するのが、フォントの配布・販売サービス。
画像素材と同じ様に、フォントも無料から有料まで様々な種類がリリースされ、使用できるようになっているのです。
フォント販売サービスはいくつもありますが、まずはAdobe Fontsがおすすめ。
Adobe Fontsは18,000以上のフォントを取り揃えており、日本語フォントも豊富。しかも、Creative Cloudの何らかのプランを契約していれば、追加料金無しで使用することが出来ます。無料で高品質なフォントがDLし放題なわけです。
ですので、Adobe Fontsの使い方確認も兼ねて、フォントを追加してみましょう。
Adobe FontsはAdobe Creative Cloud Desktopからサイトを開く、もしくはhttps://fonts.adobe.com/fontsにアクセスすると追加できます（※要ログイン）。
■Adobe Fontsの利用方法
Adobe Fontsから「すべてのフォント」タブを開きます。
良さそうなフォントはないかな、と探す場合は、ページ左側にあるフィルターに条件をいれて絞り込んでいきます。
今回のバナーでは「凸版文久見出しゴシック」を使用します。
フォント名が分かっている場合は、右側の検索窓にフォント名を入力して下さい。
Enterで検索実行。
表示されたフォントの中から、凸版文久見出しゴシック StdN EBのところの「ファミリーを表示をクリック。
フォントの詳細ページが開きます。
フォントをアクティベートと書かれているスイッチをクリック。
ブラウザの下縁あたりに「アクティベートしました」という通知が出たら完了です。
※アクティベートしても、Illustratorのフォント選択欄に出てこない場合は、作業中のドキュメントを保存して一旦閉じる→再び開くと使用できるようになります。
■バナーのフォントを変更する
バナーのテキスト部分を、アクティベートした「凸版文久見出しゴシック StdN EB」に変更しましょう。
全てのテキストオブジェクトのフォントを変更する際は、1つずつshiftキーを押して選択するより、ドラッグで選択すると早いです。
フォント選定に関して
１つのバナー内で、フォントの種類を変えたい場面もあります。
一部だけフォント変えるのはアクセントとして効果的ですが、色々な種類のフォントを使いすぎるとユーザーは内容を認識しづらくなっていまいます。全体のテイストも崩れがちなので、使いすぎないようにしましょう。
レッスンでは図の右側、習える内容（プログラミング～）の部分を“せのびゴシック（Bold)"に変更した状態で進めます。こちらもAbobeFontsにあります。 凸版文久見出しゴシックのまま進めても構いません。
カーニングを行う
文字同士の間隔（アキ）を調整する技法のことをカーニングと言います。
IllustratorやPhotoshopでは自動的にカーニングを整えてくれる設定があります。
文字パネルの下の方にある「V/A」と書かれている部分です。
メニュー上部３つが自動カーニングです。 特にメトリクスとオプティカルの２つがよく使われています。
- メトリクス：フォントに埋め込まれた情報に基づき、自動でカーニングする
- オプティカル：Illustratorが判定して自動でカーニングする
フォントによってどちらが綺麗に仕上がるかは違います。
切り替えてみて、収まりの良い方を探してみましょう。
最初よりもだいぶ見やすくなりましたね。
ただ、「Web」と「企業」の間の空きが大きく、ちょっと不自然です。
こういう部分は、個別に手動で調整しましょう。
間隔を調整したい文字と文字の間に、テキストカーソルを置きます。
そのまま、ショートカットキーで操作しましょう。
[Alt（macはoption）] ＋[ ◀ ] もしくは [ ▶ ]です。
アルファベットと漢字が分断されている印象が薄れました。
最下部、Web企業が～以降の部分も同じように調整します。
ついでに、２行を右端に揃えておきましょう。
中央の習える項目部分は、一行だけ長い「プログラミング」をトラッキングを使って少しコンパクトに設定します。トラッキングは選択箇所を一気に調整できます。
Webデザイン以降は字間を空けると、まとまりが出ます。
フォントを設定しただけの状態と比べてみましょう。
地味な調節ですが、文字部分の違和感がなくなっているのではないでしょうか？
文字の装飾に関して
ベースとなる文字の設定が出来たら、必要に応じて装飾していきます。
装飾は“あるとより良い”オプションのようなイメージ。
オシャレさにこだわって、可読性を下げないように注意しましょう。
- 強調したいワードを大きくする
- 角度やカーブを付ける
- 文字をバラバラに配置する
上記のような方法もありますが、こうしたレイアウトは難易度が高く、時間もかかります。
成功するとカッコいいですが、失敗すると時間がかかる・ダサい・文字の可読性が下がるの三重苦。デザインに慣れていて、遷移先のLPテイストとあっていてターゲット層が好みそうな場合くらいしか行いません。
今回の場合は、遷移先がスクールの企業コースとカッチリしたページです。
なので、文字はそのままシンプルに使いましょう。
チェックボックスを作る
とはいえ、文字だけ羅列されている状態だと分かりにくいですね。
習える項目のところにチェックボックスを作って、“ぜんぶ”を強調してみましょう。
１.チェックを作る
文字ツールを使って、チェックと入力。
変換するとチェックマークが表示されます。
上手く表示されない方は、フォントの種類を変えてみましょう。
テキストを選択して右クリック > アウトラインを作成します。
アウトライン化すると、テキストがオブジェクト(図形)に変換されます。
2.枠を作って合体
長方形ツールを使って、白い枠線（塗り色なし）で正方形を作ります。
チェックマークを重ねて、少しはみ出るくらいにサイズを変更。
チェックマーク、正方形、２つを選択した状態でグループ化します。
これでチェックボックスは完成。
3.サイズを合わせて配置する
プログラミングの左横に、作ったチェックボックスを移動させます。
文字と釣り合うようにサイズを調整して、下3つ分を複製すれば完成です。
「ぜんぶ」の文字と揃うように、位置を調整します。
※ぜんぶ、の上の●は円ツール、もしくはテキストで「●」と入力すればOK。
図形として使う予定のテキストは、製作途中の段階でアウトライン化しておきましょう。
これでテキスト部分は完成です。
次回は色を付けたり、細かな調整をして、バナーを完成させましょう！