イラレ初心者がブログのピックアップバナーを作ってみた

デザイン素人でもイイ感じのブログを作りたい！シリーズ（？）

第２弾となる本記事では
Adobe Illustrator（以下「イラレ」）を使用したピックアップバナー作成風景をお伝えします。

イラレ初心者で日々努力している方にとって
少しでも励みになれば幸いです。

第１弾はこちら

作ったピックアップバナーはこちら

本記事で紹介するのはこちらのピックアップバナーです。

メインビジュアルの下に表示される、各カテゴリの入り口ボタン
（赤枠で囲った部分）がピックアップバナー。

企業サイトやトップブロガーさんのサイトでは
ついクリックしたくなるような秀逸デザインが多く見られますね。

わたしは初心者なのでかなり地味シンプルですが
本記事では自作することの喜びを伝えられたらと思います。

ブログテーマはSWELLを使用しています。

ピックアップバナーの作り方

それではさっそく
上記ピックアップバナーを作る手順を紹介します。

①仕上がりイメージを考える

まずはメインビジュアルと同様、仕上がりイメージを考えます。

形は丸か四角か、どのような装飾にするのかといった
なんとなくのイメージを想像しておくといいです。

わたしはこんな感じで考えました。

②新規ドキュメントを作成する

イラレを開き、「ファイル」→「新規」をクリックします。

新規ドキュメントのダイアログボックスが開くので
次のように設定します。

これで４つのカテゴリを一気に作成できます。

サイズは使用テーマに合わせて各自で設定してください。

③メインの長方形を描画する

長方形ツールをクリックし、以下の設定で描画します。

これだとパキッとし過ぎなので、自然な柔らかい雰囲気にしたいと思います。

「効果」→「ブラシストローク」→「はね」を選択し
ダイアログボックスの設定が以下になっていることを確認して「OK」をクリックします。

さらに「効果」→「ぼかし」→「ぼかし（ガウス）」を選択し
半径30pxで「OK」をクリックします。

ブラシストロークとぼかしにより、境界が目立たなくなり
優しい感じになりました。

④長方形の枠を作成する

次に、長方形の枠を作成します。

長方形ツールをクリックし、以下の設定で描画します。

この枠も、タッチを柔らかくします。

「効果」→「ブラシストローク」→「はね」を選択し
ダイアログボックスの設定が以下になっていることを確認して「OK」をクリックします。

ふわっとした長方形デザインができあがりました。

⑤二つの枠をズラして配置する

このままでもいいのですが、思いつきで
枠を二つ作りズラしてみることにしました。

枠を選択した状態で、「オブジェクト」→「変形」→「回転」を選択。
回転ダイアログボックスが開くので
角度を358度にして「OK」をクリックします。

少し傾きました。
この枠をコピペします。

Controlキー＋Cボタン、Controlキー＋Fボタンで前面にコピーされます。

次に「オブジェクト」→「変形」→「回転」を選択。
回転ダイアログボックスが開くので
角度を4度にして「OK」をクリックします。

それぞれの枠の大きさを変えてみたり、位置をもっとズラしてみたりすると
より個性が出せるのではないかと思います。

⑥テキストを作成する

ボタンとなる枠が仕上がったら、テキストを作成します。

何も選択していない状態でテキストツールをクリックし、以下の設定でカテゴリ名を入力します。

これだとちょっと細いので、アピアランスで太く見えるようにします。

「ウィンドウ」→「アピアランス」を選択。
ダイアログボックスが開くので
オプション（ボックス右上の三本線）から「新規線を追加」をクリックします。

色が変わってしまった場合は再び設定し、太さを5pxまで上げます。

ちょうどよい太さになりました。

ほんとうはテキストも手描き風のタッチにしようと考えていたのですが
いろいろ適用すると読みにくくなってしまうため断念しました。

ピックアップバナーの目的はクリックしてもらうこと。
「カテゴリの入り口ですよ」と一目で分かるようなデザインがふさわしいです。

⑦完成したデザインをコピペする

完成したデザインを、他の３つのアートボードにコピペします。

すべてを選択し、Shiftキー＋Altキーを押しながらドラッグすると
垂直（水平）移動によるコピペができます。

整列パネルやスマートガイドも併用しながら位置を調節してください。

コピペができたら、テキストをそれぞれのカテゴリ名に修正します。

初めにアートボードをカテゴリの数だけ作っておいたので
簡単に複製できました。

⑧書き出す

アートボード１（左上）を選択した状態で
「ファイル」→「書き出し」→「Web用に保存（従来）」をクリックします。

形式はJPEGを選択し、保存をクリック。
保存先フォルダを選択し、名前をつけて保存しましょう。

アートボード２～４も同様の作業を繰り返し、全カテゴリの画像を書き出します。

ブログにピックアップバナーを設定する方法

書き出した画像をブログのピックアップバナーに設定してみましょう。
ここでは【SWELL】での設定方法を紹介します。

①ピックアップバナー用のメニューを作成する

画像の前に、まずは
ブログのトップページにピックアップバナーが配置されるような設定をします。

カテゴリにつながる真っ白な扉を置いてから（①）、その扉をデザインする（②）イメージです。

WordPressダッシュボード画面の「外観」→「メニュー」を選択。
「新しいメニューを作成しましょう」をクリックします。

任意のメニュー名を入力し「ピックアップバナー」にチェックを入れて
「メニューの作成」をクリックします。

次に、プルダウンから上記で作成したメニューを選び「選択」をクリックします。

左側「メニュー項目を追加」の中の「カテゴリ」を開き
カテゴリにチェックを入れて「メニューに追加」をクリックします。

すると、右側「メニュー構造」に
チェックを入れたカテゴリが表示されます。

「メニューを保存」をクリックします。

まずはカテゴリにつながる扉ができました。

ブログのトップページには、カテゴリ名が記載された
簡易的な扉（＝ピックアップバナー）が配置されているはずです。

ここから②の作業をして、画像を設定します。

②ピックアップバナーに画像を設定する

WordPressダッシュボード画面の「メディア」→「新規追加」をクリック。
画像をアップロードしたら、画像URLをコピーします。

そしてもう一度「外観」→「メニュー」に戻り
画面右上の「表示オプション」から「説明」にチェックを入れます。

メニューを選択し、カテゴリを開くと説明欄が表示されるので
先ほどコピーした画像URLを貼り付けます。

「メニューを保存」をクリックします。

ピックアップバナーに画像が適用されました！

他のカテゴリも同様に設定すれば完成です。

レイアウトなどのカスタマイズは
「カスタマイズ」→「トップページ」→「ピックアップバナー」から行います。

まとめ

イラレ初心者であるわたしのピックアップバナー作成風景をお伝えしました。

「こんなショボいのより、もっとおしゃれなの作れるし」

と思ってもらえたのではないでしょうか？

イラレの操作に苦手意識がある方にとって
少しでも行動のきっかけとなれば嬉しいです。

最後までご覧いただきありがとうございました。