配置を表現する流れ

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

ワイヤーフレームで大枠配置を決めて、そして大枠にはめ込むコンテンツのラフデザインを行い、その後にウェブページのプロトタイプを作成しています。

下記の1.~2.が一般的にデザイナーさんが行う様です。3.もIllastratorなどで仕上げてしまうデザイナーさんも居ますが、リキッドデザインのプロトタイプはHTMLとCSSで記述しないと、そんなはずじゃなかったみたいな事になる場合もあります。DTP感覚でウェブページのデザインを起こしてくるデザイナーさんとの調整は大変だったりします。

1.ワイヤーフレームで大枠配置をラフデザインを書く

ワイヤーフレームの表現方法は千差万別です。これは開発者のメモなので落書き人は手書きしています。提出物として求められる場合のみ、適当なソフトで清書することもあります。
なお、コンテンツ要素の詳細なラフデザインは、この段階では書きません。

  • その大枠配置のワイヤーフレームを書く。
  • その枠要素部品*1も書き込む。
  • レスポンシブデザインの場合は、それも記述します。
  • ダイナミックな動きもメモ書きでしておきます。

2.コンテンツ要素のラフデザインを書く

コンテンツの詳細デザインはワイヤーフレームには書き込まずに、別出し*2で、コンテンツ毎に個々に書いています。

  • コンテンツの詳細のラフデザイン書く。
  • コンテンツ要素部品*3も指定する。
  • この段階ではコンテンツ内容は気にしない。

3.ウェブページのプロトタイプ作成

ワイヤーフレームとコンテンツ詳細のラフデザインが決まったら、HTMLとCSS及びJavaScriptでウェブページのプロトタイプを作成します。

  • ワイヤーフレームの大枠配置をHTMLとCSSを記述する。
  • コンテンツ詳細のラフデザインをHTMLとCSSに加筆する。
  • CSSだけでは表現できないダイナミックな要素をJavaScriptで記述する。

プロトタイプで出来たら、依頼者に大まかなウェブページのイメージ確認を行ってもらっています。
あとは、コンテンツの内容を書き込んで完成させるだけです。