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 まとめ
前のページに戻るpage4/25次のページに進む
仕切り線

Check2 レイアウト

Check2 レイアウト

1.画面の使い方を把握していますか?
2.要素の存在を把握していますか?
3.要素に優先順位をつけていますか?
4.配置やサイズが変化する可能性を想定していますか?

画面の中で要素をうまく構成できているかチェックしていきましょう。


1.画面の使い方を把握していますか?

画面の特性と制限を理解しておきましょう

  • 画面の大きさは見る側で変更できる
  • スクロールする方向は一定に
  • サイズを固定するメリットとデメリットを理解しておく

画面の特性と制限を理解した上で、画面をどう使うかを把握し使いこなしましょう。


画面の大きさは見る側で変更できる

まずは、舞台となる画面についての認識をチェックします。

Webページは、絵や本のように決まった大きさを持つことができません。 見る側の環境によって強制的にサイズが変更されるとこともよくあります。

ウィンドウサイズによる変化の例解説図
極端な例ですが図のような画面やウィンドウサイズになることもありえます。

デザインする上で可変させるかさせないかという判断をするにも、まずこの画面というものをはっきりと認識しておかなくてはなりません。

スクロールする方向は一定に

このページを例にチェックしてみましょう

このページでは、横はウィンドウサイズに依存、縦方向はコンテンツの量に応じて可変するようになっていますね。スクロール方向を縦のみにすることで、操作の簡便化および視線やコンテンツの流れを縦に限定できます。

サイズの例解説図
サイズの例

点線で示す大きさで作ると縦と横にスクロールさせないと全体を見渡す事ができない場合があります。オレンジの線は縦スクロールだけで済みます。このように、大きく作りすぎると閲覧しにくい場合があります。そして全ての人がウィンドウを最大表示で使っているわけではないことを覚えておきましょう。

サイズを固定するメリットとデメリットを理解しておく

基本的には、横サイズ依存、縦自由が定石ですが、これといって決まっているわけではありません。たとえば横を固定することで、横の文字数が限定し文章が読みやすくなる効果を出すことができます。このようにメリットとデメリットなど多々あります。ここではまず画面をどう使っているのか明確に認識しているのかが重要なのです。

注、ここで縦横何ピクセルなどの要素については説明していませんが、横方向については600ピクセル程度(最近は800程度でもOK)がどんなパソコンでも安定して閲覧できると思います。縦に関しては特に制限はありません。もちろんあまりにも長すぎるのは問題です。


次は2.要素の存在を把握していますか?です>>

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