読者です 読者をやめる 読者になる 読者になる

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

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

f:id:shika16:20170120035424j:plain

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

 

f:id:shika16:20170120035547j:plain

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

 

f:id:shika16:20170120035726j:plain

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

 

f:id:shika16:20170120035907j:plain

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

 

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

 

参考