デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

初心者でもできるイラストレーター使い方講座 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デザインカンプを制作したいと思います。
制作するにあたり、素材データを用意していますので、以下からダウンロードしてください。

Webデザインカンプ(PC用)

1.【事前準備】ラフを描く

余談ですが、実際にイラストレーターを使ってデザインカンプを作成する前に、軽く手書きでレイアウトのラフを描くことをおすすめします。
オリジナルの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 キーオブジェクトに整列させる方法

メニュー項目をすべて選択した状態で、メニューバー内に配置し、色を白に変更します。
これで、ヘッダー部分が完成しました。

次章から、いよいよメインコンテンツを作成していきます。
がんばっていきましょう!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン