Illustrator③ HPワイヤーフレーム作成

今月は、Illustratorを用いてHPのワイヤーフレームを作成した。架空のカフェのホームページ制作を予定している。

まず初めに、Illustratorを開いてグリッド表示の設定を行う。

目盛の表示設定も終えたところで、グリッドに沿って背景やタイトル画像、メニューボタンといったあらゆる要素の配置を行い、TOPページのワイヤーフレームを作成する。

こちらが、ABOUTページのワイヤーフレーム。架空のカフェを想定しているため、カフェの説明、その下には地図の配置を行いたいと考えている。

こちらが、MENUページのワイヤーフレーム。商品名を羅列したメニュー横にそれに応じた画像を表示したいと考えている。

各要素の配置に関しては目盛を目安に慎重に配置を行った。地道な作業ではあったが、あらかじめ細かな設定を行うことでHP制作もスムーズに行えるのではないかと考えている。今月は、このワイヤーフレームを参考にホームページ制作を行ってゆく。

参考

Webデザイン Illustrator&Photoshop <CS4対応> (「デジハリ」デザインスクール) (デジハリデザインスクール)