IllustratorでつくるWebデザイン・入門編 (4)オリジナルのボタンを作る

「Adobe Illutrator」を"Webデザイン"の現場に導入したいけれど「肝心の使い方がわからない!」とお困りの方に向けて、Webデザインに特化した基本的な使い方をお伝えする本連載。第4回目となる今回は、Illustratorの「効果」を用いて、Webサイトには必須の「ボタン」の作成方法を紹介します。

Webサイト上に配置された「ボタン」は、その先にある情報に閲覧者を導くという非常に重要な役割を持っています。閲覧者が「ボタン」として認識することができるのは最低条件として、感覚的に「押してみたい」と思わせるものにしましょう。

■これまでの記事
【レポート】IllustratorでつくるWebデザイン・入門編 (1)ワークスペースの最適化
【レポート】IllustratorでつくるWebデザイン・入門編 (2)ペンツールの基礎知識
【レポート】IllustratorでつくるWebデザイン・入門編 (3)Webサイトのヘッダ作成

アートボードの設定

まず最初に、「新規ドキュメント」ウィンドウを開きましょう。今回は素材の制作ですので、「アートボード」の大きさはボタンが収まる程度で大丈夫なのですが、サイズ感が把握できるように、第3回で作成したヘッダーと同じ、幅980pxにしてみます。

ボタンの形状を決める

「ボタン」の形状を決める際に、注意する点がひとつあります。Webサイトはデザインを決めた後に、素材を配置し機能性を与えるなど、Webサイトとして組み上げる「コーディング」と呼ばれる作業が待っています。「コーディング」は基本的にピクセル単位で行う計算作業が伴うので、サイト上の素材はあらかじめ整数の値で作成しておきましょう。

ツールバーの「長方形ツール」を選択し、「アートボード」上をクリックします。すると「長方形」ウィンドウが開くので、ここに幅と高さを数値で入力します。あとでサイズを変更させる場合は「変形」パネルで幅(W)と高さ(H)を数値入力し、やはり整数値を維持するようにしましょう。

今回は「幅:200px、高さ:50px」の長方形にしてみます。入力した後にOKボタンをクリックすると、アートボード上に「幅:200px、高さ:50px」の長方形が現れます。数値は「情報」パネルまたは「変形」パネルで確認できます。

メニューバーにある「効果」の中の「スタイライズ」を選択し、「角を丸くする」を選択すると、長方形の角に丸みを加えることができます。せっかくなので、使ってみましょう。ウィンドウが開いたら「半径:10px」としてみます。プレビューにチェックを入れると、決定する前にアートボード上で確認ができます。「ボタン」の角が丸くなりました。表示が見にくい時は、ツールバーの「ズームツール」で自由にズーム、(Altキーを押しながら)ズームアウトができます。

配色を決める

次にボタンの色を決めます。色はツールバー下部の「＜塗り＞ボックス」、「＜線＞ボックス」で設定します。「ボタン」は独立した作品ではないので、Webサイトの全体的なバランスと調和する色を選択しましょう。

今回は立体的で美しい「ボタン」にするため、塗りは「グラデーション」を使ってみましょう。「＜塗り＞ボックス」を手前にした状態で、その下の「カラー」/ 「グラデーション」/ 「なし」の中から「グラデーション」を選択します。

続いて、グラデーションの色を決め、色が変化する方向を設定します。まず色を設定するには、「ウィンドウ」の「グラデーション」パネルを開きます。Photoshop CS6では先ほどの「グラデーション」の行程で自動的に右側の「グラデーション」アイコンから表示されますが、開かなければ同様に「ウィンドウ」から開きましょう。

今回のグラデーションは「種類:線形」を使います。色の変化の方法は別の方法で行うので、ひとまず「角度」も「0度」のままで結構です。数値で入力したい場合には、こちらで入力できるので覚えておきましょう。色はこの段階では「グレースケール」の左側「白(K(黒の値):0％)」から右側「黒(K:100％)」となっています。色数は両端の2色に挟まれた間の、適当な位置をクリックすると追加することができます。削除の際は、ドラッグで遠ざけると削除が可能です。

それではまず、右側の「黒」を変更します。「グラデーション」ウィンドウの中の右側「黒」を示している「グラデーションスライダー」をダブルクリックすると、新たに色を設定するウィンドウが開きます。まずはこちらのウィンドウから右上のリストボタンをクリックし、色調を「グレースケール」から「RGB」に変更します。これでRGB色の選択が可能となったので、色を決めましょう。

続いて、設定したグラデーションの色が変化する方向を決めましょう。前述の様に「グラデーション」パネル上で数値入力することも可能です。今回は、より感覚的に方向を決められる方向をご紹介します。方法は簡単で、ツールバーの「グラデーションツール」を選択します。こちらを使ってボタンの上を適当にドラッグしてみます。先ほど色を設定したグラデーションの方向が変更できました。Shiftキーを押しながら垂直、平行にドラッグすることもできます。

「ボタン」の外枠となる線の色も忘れてはいけません。「＜線＞ボックス」に切り替え、必要があれば線の色も変更してみましょう。「ウィンドウ」の「スウォッチ」パネルや「カラー」パネルを使うと良いでしょう。必要があれば「線」パネルで線の太さも変更してみましょう。CS6から進化した部分として、線の部分にも「グラデーション」が使える様になりました。これまでは線を一度「分割・拡張」してから加工するといった面倒な作業があったのですが、その手間が省けて非常に便利になっています。