初心者でもできるイラストレーター使い方講座 Webデザインカンプを作る
こんにちは、koheiです。
今回は、イラストレーターでWebサイトのデザインカンプを作りたいと思います。
※デザインカンプは、Webサイトの完成図、設計図のようなものです。実際にオリジナルのWebサイトを作るときは、まずはデザインカンプを作って、HTML&CSSで実装していきます。
動画解説
【更新情報】2019年6月22日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください!
- 2.ガイドの作成・・・・動画:0分31秒ぐらいから
- 3.ヘッダー部の作成・・・・動画:3分49秒ぐらいから
- 4-1.イメージ画像の作成・・・・動画:8分02秒ぐらいから
- 4-2.コンセプトの作成・・・・動画:9分23秒ぐらいから
- 4-3.メニューの作成・・・・動画:13分40秒ぐらいから
- 4-4.アクセスの作成・・・・動画:17分38秒ぐらいから
- 5.フッター部の作成・・・・動画:19分12秒ぐらいから
- 6.スマホ用レイアウトの作成・・・・動画:20分30秒ぐらいから
- 7.素材をエクスポート・・・・動画:21分53秒ぐらいから
完成図
以前イタリアンレストランのチラシを作成(※記事はこちら)したので、同じテーマで以下のようなイタリアンレストランのWebデザインカンプを制作したいと思います。
制作するにあたり、素材データを用意していますので、以下からダウンロードしてください。
イラストレーター講座 デザインカンプ素材
1 file(s) 1.59 MB1.【事前準備】ラフを描く
余談ですが、実際にイラストレーターを使ってデザインカンプを作成する前に、軽く手書きでレイアウトのラフを描くことをおすすめします。
オリジナルのWebサイトを作るときは、ある程度レイアウトをイメージしてから、イラストレーターでデザインカンプを作っていきましょう。
絵が下手でもラフを描いたほうがよい3つの理由
以下は、今回描いたラフです。
2.ガイドの作成
具体的に作成する前に、レイアウトのガイド線を作成します。
Webデザインレイアウトは、基本的にヘッダー部、メインコンテンツ部、フッター部で構成されています。したがって今回は3つの領域(ヘッダー、メインコンテンツ、フッター)のガイドを作成します。
イラストレーターを起動し、メニューの「ファイル」→「新規」をクリックします。
新規ドキュメントの画面が開きますので、詳細設定ボタンをクリックします。
ファイル名は、「イタリアンWebデザインカンプ」(※好きな名前でOKです)
アートボードサイズは、PC用のレイアウトをまずは作成しますので、幅:1280px、高さ:2000pxに設定します。
カラーモードは、「RGB」、ラスタライズ効果「スクリーン(72ppi)」に設定し、ドキュメント作成をクリックします。
まずは、ヘッダー部のエリアを作ります。
長方形ツールを選択し、アートボード上の適当な位置で、option[Windowsならalt]キーを押しながら、クリックし、幅:1280px、高さ:140pxでOKをクリックしてください。
長方形ボックスをヘッダー部として配置します。長方形ボックスを選択した状態で、整列パネルの「水平方向中央に整列」、「垂直方向上に整列」をクリックします。
先ほど作成したヘッダー部を選択し、altキーを押しながら下へドラッグしコピーしましょう。アートボード上の最下部へ配置し、これをフッター部とします。
Webサイトは、左右にマージン(余白)を設定し、中央にコンテンツ(文字、画像)などを配置するのが一般的です。
したがって、左右のマージン(余白)のガイド線を作ります。
長方形ボックスを選択し、アートボード上の適当な位置で、option[Windowsならalt]キーを押しながら、クリックし、幅:1000px、高さ:2000pxでOKをクリックしてください。
長方形ボックスを選択した状態で、整列パネル「水平方向中央に整列」、「垂直方向中央に整列」をクリックします。
最後に、これまで配置した3つの長方形ボックスをすべて選択し、「表示」メニュー→「ガイド」→「ガイド作成」をクリックします。
これで、ガイドの完成です。
3.ヘッダー部の作成
この章では、以下のようなヘッダー部のデザインを作成します。
メニューの「ファイル」→「開く」をクリックし、サイトのロゴを開きます。
今回は素材として提供している店ロゴ.epsを選択し、開くをクリックします。
ロゴが開いたら、全体を選択し、Ctrl+Cでコピーします。
作成中のファイルに戻り、Ctrl+Vで貼り付けます。
ヘッダーエリアの左側にロゴを配置します。
ロゴの下にフレーズを追加します。文字ツールを選択し、アートボード上の任意の場所をクリックし、”本格イタリアンからパスタ、ワインが楽しめるレストラン”を入力します。フォント、文字色は以下を設定します。
・フォント:小塚ゴシックPr6N [R]
・フォントサイズ:10pt
・文字色:黒
※フォントは、文字パネル、カラーはカラーパネルにて設定。
注意:PC環境によっては、指定したフォントが入っていない場合があります。その場合は似たフォントで代用してください。
作成した文字を選択ツールでロゴの下に配置します。
ヘッダーエリアに問い合わせ先を配置します。
文字ツールを選択し”ご予約はこちらから”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝 ProN
・フォントサイズ:15pt
・文字色:黒
”TEL:000-000-0000”を入力します。フォント、文字色は以下を設定します。ヘッダーエリアの右端に配置します。
・フォント:ヒラギノ明朝 ProN[W6]
・フォントサイズ:28pt
・文字色:#C20D23
ヘッダーにメニューバーを追加します。
長方形ツールを選択し、アートボード上の適当な位置で、option[Windowsならalt]キーを押しながら、クリックし、幅:1280px、高さ:40pxでOKをクリックしてください。
作成した長方形ボックスの塗りを#C20D23に設定し、ガイド線に合わせて配置しましょう。
メニュー項目を追加します。
文字ツールを選択し”トップ”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝 ProN[W6]
・フォントサイズ:19pt
・文字色:黒
同じように文字ツールで”コンセプト”、”メニュー”、”アクセス”を入力します。
作成した各メニュー項目をきれいに整列させましょう。
作成したすべてのメニュー項目を選択した後、”トップ”を選択しキーオブジェクトとします。
キーオブジェクトを基準に、整列パネルで「水平方向上に整列」、間隔値を150pxに設定して、「水平方向等間隔に分布」を選択します。
Illustrator キーオブジェクトに整列させる方法
メニュー項目をすべて選択した状態で、メニューバー内に配置し、色を白に変更します。
これで、ヘッダー部分が完成しました。
次章から、いよいよメインコンテンツを作成していきます。
がんばっていきましょう!!
スポンサーリンク