「Adobe Illutrator」を"Webデザイン"の現場に導入したいけれど「肝心の使い方がわからない!」とお困りの方に向けて、Webデザインに特化した基本的な使い方をお伝えする本連載。

最終回となる今回は、これまでの総括として過去に作成した素材を利用しページデザインまでIllustrator上で行ってみましょう。そして、Webサイトを作る上で欠かせない「コーディング」(※1)作業を行うに当たって、大変便利なHTMLファイルを含めた書き出し方法を紹介します。

Web制作の第1段階が「デザイン」であるなら、「コーディング」はデザインを実現化するための第2段階といえます。Illustratorを用いたWebサイトデザインでは、前回のように素材をピクセル単位の整数値で作成するなど、極力この「コーディング」を意識した準備を進めると良いでしょう。

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

※1「コーディング」とは？
「コーディング」とは、Webサイトの根幹となるソースコードを書いていく作業のことです。「デザイン」作業とは異なり、プログラミング言語を用いた作業になります。「Adobe DreamWeaver」や「WordPress」など、制作中のサイトのビジュアルを確認しながら作業できるソフトもあります。

それでは、これまで本連載中で作成した素材を、Illustratorでレイアウトしていきましょう。「地図(第2回で作成)」、「ヘッダー(第3回で作成)」、「ボタン(第4回で作成)」を用いて、レイアウト作業について解説していきます。

ボタンを複製する

まず、「ボタン」を複製しましょう。ボタンを選択した状態で、altキーを押しながら複製を作成する位置にドラッグすると、全く同じ物を複製することができます。また、altキーと合わせてShiftキーも同時に押しておくと、平行、垂直方向に複製できます。ボタンの中の文字を変えたい場合は、コピーしたものの文字部分を変更します。こちらは後で使用するので、Illustrator(ai)ファイル形式で保存するか、そのまま開いておきましょう。

「効果」、「線」をオブジェクトに変更

作成したボタンには、塗りの「線」と「効果」が含まれています。これらは、見た目ではイメージを実現化している様に見えますが、いわばまだ"仮の姿"なのです(選択した時に、形状を示す青いパスが表示されていない状態)。この状態から、パスで構成されたオブジェクトに変換し、ピクセル単位でサイズを計測できるようにします。

(1)アピアランスを分割:「効果」をパスで構成されたオブジェクトに
「ボタン(オブジェクト)」を選択した状態で、メニューバーの「オブジェクト」から「アピアランスを分割」をクリックします。これで、前回与えた「ドロップシャドウ」の効果がパスになりました。

「分割・拡張」ウィンドウ

パスの変化

(2)分割・拡張：「線」をパスで構成されたオブジェクトに
「ボタン(オブジェクト)」を選択した状態で、メニューバーの「オブジェクト」から「分割・拡張」をクリックします。すると、「分割・拡張」ウィンドウが開きます。

ここで「塗り」と「線」にチェックが入っています。今回は塗りのグラデーションを分割する必要はないので、「塗り」のチェックを外し、「線」のみ「分割・拡張」を適用します。「ボタン」以外の「地図」、「ヘッダー」で「効果」、「線」を利用している場合は、同様の作業を行ってください。