「簡単なウェブページ作成(２)-1」の編集履歴（バックアップ）一覧はこちら
簡単なウェブページ作成(２)-1 - (2015/06/12 (金) 21:57:00) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
各プロパティなどに関しての記事がかなり溜まってきたので、少しずつページ全体を作っていくという方向で記事を書いていこうかと思っています。~
各サンプルいくつかのステップに分けて完成に近づけていこうと思っています。~
またとても記事が長くなってしまう事が予想されるのでその場合は適時区切っていこうと思います。
#contents
*ページ作成の手順
webページ作成の手順は人それぞれ様々ですが、大まかに次のような手順で作成されていきます。
0、ウェブページの設計図を作る(完成形のイメージ)
1、レイアウト、基本的な構造をつくる
2、ボックスの中にコンテンツを埋め込んでいく
3、レイアウトの微調整を行う
4、レスポンシブウェブデザインを施す
5、細部のパーツを作り上げ、埋め込んでいく
6、細部の確認とチェック
これはとても大雑把な分類ですが、1の前段階の時点でゴール(完成形の設計図)をつくっておく必要があるでしょう。~
制作途中に様々なトラブルや思い通りにいかない場面、あるいは、思いのほか最初のデザインよりよいアイディアが浮かんだりした場合には臨機応変に対応していきましょう。~
*0、ウェブページの設計図を作る
ウェブページのコンセプトや意義を一通り考え終え(これはまたいずれ別の記事で記述していきたいと思っています)、具体的にページを作っていこうという時に、まずは設計図を作らなければなりません。~
&color(red){ワイヤーフレーム}という言葉をご存じでしょうか？~
ワイヤーフレームとは一言で説明すると、「ホームページの骨組み」です。~
例えば、次のリンクから次のようなファイルを入手できます。~
http://www.webcreatorbox.com/tech/basic-wireframe/
手書きのワイヤーフレーム~
各プロパティなどに関しての記事がかなり溜まってきたので、少しずつページ全体を作っていくという方向で記事を書いていこうかと思っています。~
各サンプルいくつかのステップに分けて完成に近づけていこうと思っています。~
またとても記事が長くなってしまう事が予想されるのでその場合は適時区切っていこうと思います。
#contents
*ページ作成の手順
webページ作成の手順は人それぞれ様々ですが、大まかに次のような手順で作成されていきます。
0、ウェブページの設計図を作る(完成形のイメージ)
1、レイアウト、基本的な構造をつくる
2、ボックスの中にコンテンツを埋め込んでいく
3、レイアウトの微調整を行う
4、レスポンシブウェブデザインを施す
5、細部のパーツを作り上げ、埋め込んでいく
6、細部の確認とチェック
これはとても大雑把な分類ですが、1の前段階の時点でゴール(完成形の設計図)をつくっておく必要があるでしょう。~
制作途中に様々なトラブルや思い通りにいかない場面、あるいは、思いのほか最初のデザインよりよいアイディアが浮かんだりした場合には臨機応変に対応していきましょう。~
*0、ウェブページの設計図を作る
ウェブページのコンセプトや意義を一通り考え終え(これはまたいずれ別の記事で記述していきたいと思っています)、具体的にページを作っていこうという時に、まずは設計図を作らなければなりません。~
&color(red){ワイヤーフレーム}という言葉をご存じでしょうか？~
**ワイヤーフレーム
ワイヤーフレームとは一言で説明すると、「ホームページの骨組み」です。~
例えば、次のリンクからファイルを入手できます。~
http://www.webcreatorbox.com/tech/basic-wireframe/
このページにもアップロードしておきましたのでご覧ください。~
この手書きワイヤーフレームは32px×32pxで１マスとなっています。~
様々な同業種のウェブページを調査してイメージを掴んでから、このワイヤーフレームに自分が作りたいページを書いていきましょう。~
また、次の画像をレイアウトを決める際の参考に使ってみてください。~
**レイアウトの概要
様々なレイアウト、アーキテクチャには特徴やメリット、デメリットが存在します。~
それはまた別ページで解説していこうと思います。~
~
***シングルページ
#image(width=300,シングルページ.png)
参考ページ：http://www.coprosystem.co.jp/tipsblog/2014/03/06.html
***フルスクリーン
#image(width=300,フルスクリーン.png)
参考ページ：http://www.m-hand.com/blog/2424/
***タイル
#image(width=300,タイル.png)
参考ページ：http://design-gallery.biz/tag/%E3%82%BF%E3%82%A4%E3%83%AB/
***マルチカラム
カラムとは列(縦の行)のことです。マルチカラムは複数のカラムから構成されているページをさします。~
ちなみに列に対して行(横の行)をローといいます。
2カラム
#image(width=300,2カラム.png)
参考ページ：http://www.design-links.net/site/list/mm/3/sm/4/od/1
3カラム
#image(width=300,3カラム.png)
参考ページ：http://www.art-noc.com/category/layout/3columns
このページは業種別、色別など様々な角度からいろいろなデザインのウェブページを閲覧できるので、是非ご覧ください。~
http://design-gallery.biz/tag/%E3%82%BF%E3%82%A4%E3%83%AB/
