※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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

ページ作成の手順

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

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

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

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

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

ワイヤーフレーム

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

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

レイアウトの概要

様々なレイアウト、アーキテクチャには特徴やメリット、デメリットが存在します。
それはまた別ページで解説していこうと思います。

シングルページ

参考ページ:http://www.coprosystem.co.jp/tipsblog/2014/03/06.html

フルスクリーン

参考ページ:http://www.m-hand.com/blog/2424/

タイル

参考ページ:http://design-gallery.biz/tag/%E3%82%BF%E3%82%A4%E3%83%AB/

マルチカラム

カラムとは列(縦の行)のことです。マルチカラムは複数のカラムから構成されているページをさします。
ちなみに列に対して行(横の行)をローといいます。

2カラム

参考ページ:http://www.design-links.net/site/list/mm/3/sm/4/od/1

3カラム

参考ページ:http://www.art-noc.com/category/layout/3columns

このページは業種別、色別など様々な角度からいろいろなデザインのウェブページを閲覧できるので、是非ご覧ください。

http://design-gallery.biz/tag/%E3%82%BF%E3%82%A4%E3%83%AB/