AtelierKanae トップページに戻るbit-edge - WEBクリエイターのためのサイト -What's New? - 新着情報・お知らせ等 -for Beginner - 初心者の方はまずこちらへ -Works - アトリエ鼎の制作物 -Garage - ガレージ -
for Beginner - 初心者のためのエリア -
仕切り線

コンテンツリスト
Webサイトリフォーム入門

ch.01準備はOK?

ch.02コンテンツは質が命

ch.03デザインCheck

ch.04タグはどうなってる?

ch.05最後はおさらい

初心者向け厳選リンク集
リスト終了
大見出し:ch.03デザインCheck Chk: I 1 2 3 II 4 5 まとめ
前のページに戻るpage14/25次のページに進む
仕切り線

Check4 トップページのリフォーム

Check4 トップページのリフォーム

Pre.トップページのリフォームでは何をするのか

1.何を提供しているサイトか分かりますか?
2.主なコンテンツへのリンクはありますか?
3.更新や最新情報を載せるスペースはありますか?
4.歓迎の表現がありますか?

Ext.パターン別のヒント

サイトの玄関であるトップページをリフォームしていきましょう。


Pre.トップページのリフォームでは何をするのか

トップページのリフォームでは何をするのか

  1. 以前のページのチェック
  2. ラフイメージ作成
  3. レイアウトの確定
  4. プロトタイプデザイン
  5. HTML作成 (これは別の作業と定義します)

実際の作業は以上のように行います。


以前のページのチェック

ページのチェック解説図
ページのチェック

以前のトップページを見ながら、基礎チェックとこのパートのチェックをします。ここで問題点を洗い出し、コンセプトを参照しながら新たなサイトの完成をイメージしていきましょう。

ラフイメージ作成

ラフイメージ作成解説図
ラフイメージ作成

具体的にならなくてもかまわない程度に、ページのイメージを決めていきます。いろいろイメージしたままを書き留めておくといいでしょう。

レイアウトの確定

レイアウトの確定解説図
レイアウトの確定

イメージを参考にしつつ、機能としての面も重視して要素の配置を確定していきます。ある程度HTMLを意識することも重要です。

ラフイメージとレイアウトはどちらが先にしてもかまいません。歌にたとえれば「詩と曲がどっちが先か」のようなものと同じで、特に問題は無いので思いついたほうから先にはじめるといいでしょう。

プロトタイプデザイン

プロトタイプデザイン解説図
プロトタイプデザイン

ほぼ完成した状態を作成します。プロトタイプなので、デジタルで製作しましょう。画像ファイルでもHTMLでもかまいません。画像ファイルならイメージの編集が容易で、HTMLでつくれば後のHTML作成が容易になります。

ここでチェックを再度行い、クリアすれば後は作るだけです。チェックは念入りに行いましょう。

HTML作成

HTML作成解説図
HTML作成

ここからは実際にサイトに載せるためのコーディングです。この時点でJavaScriptの付加や部品用画像の分割および配置、CGIとの接続、表示チェックや動作テストなどを行います。具体的な注意点はCh4で触れる予定です。

チェック開始!

流れが明確になったところで早速チェックをはじめましょう。


次は1.何を提供しているサイトか分かりますか?です>>

仕切り線
前のページに戻るpage14/25次のページに進むCopyright 1999-2002 Ateiler Kanae. All rights reserved.