簡単なウェブページ作成(２)-1 - nicepaper @ ウィキ

各プロパティなどに関しての記事がかなり溜まってきたので、少しずつページ全体を作っていくという方向で記事を書いていこうかと思っています。
各サンプルいくつかのステップに分けて完成に近づけていこうと思っています。
またとても記事が長くなってしまう事が予想されるのでその場合は適時区切っていこうと思います。

ページ作成の手順
0、ウェブページの設計図を作る
- ワイヤーフレーム
- レイアウトの概要

ページ作成の手順

webページ作成の手順は人それぞれ様々ですが、大まかに次のような手順で作成されていきます。

0、ウェブページの設計図を作る(完成形のイメージ)
1、レイアウト、基本的な構造をつくる
2、ボックスの中にコンテンツを埋め込んでいく
3、レイアウトの微調整を行う
4、レスポンシブウェブデザインを施す
5、細部のパーツを作り上げ、埋め込んでいく
6、細部の確認とチェック

これはとても大雑把な分類ですが、1の前段階の時点でゴール(完成形の設計図)をつくっておく必要があるでしょう。
制作途中に様々なトラブルや思い通りにいかない場面、あるいは、思いのほか最初のデザインよりよいアイディアが浮かんだりした場合には臨機応変に対応していきましょう。

0、ウェブページの設計図を作る

ウェブページのコンセプトや意義を一通り考え終え(これはまたいずれ別の記事で記述していきたいと思っています)、具体的にページを作っていこうという時に、まずは設計図を作らなければなりません。
ワイヤーフレームという言葉をご存じでしょうか？

ワイヤーフレーム

ワイヤーフレームとは一言で説明すると、「ホームページの骨組み」です。
例えば、次のリンクからファイルを入手できます。
http://www.webcreatorbox.com/tech/basic-wireframe/

このページにもアップロードしておきましたのでご覧ください。
この手書きワイヤーフレームは32px×32pxで１マスとなっています。
様々な同業種のウェブページを調査してイメージを掴んでから、このワイヤーフレームに自分が作りたいページを書いていきましょう。
また、次の画像をレイアウトを決める際の参考に使ってみてください。