Webデザイン基礎知識・Web製作支援サイト|小道具屋|

ウェブデザインサイト・小道具屋
文字サイズ変更  文字サイズ拡大 文字サイズ縮小 元に戻す
Webサイトを構築する全ての人のために。
小道具屋サイト開催1999/09/06 HOMEに戻る Webサイトの顔であるindexを考えてみましょう。 デザインにはコツがあります。コツさせ掴めば結構簡単かも? ユーザーをコンテンツに導くナビゲーションはしくじると使いにくいサイトになります。 デザインとは直接関係ないですが小技を紹介。 ブログ ご連絡・お問い合わせはコチラまで。

ブロックごとに作成・グループ化 ページは見やすく・行揃え、整列 サイトの統一感・繰り返し 計算されたページ・グリッド化 ルール

グループ化第一歩
JavaScriptによるリンク先です:画像拡大拡大[35KB]

グループに分ける
殆どの方が無意識にやっていると思われるグループ化ですが、デザインはページの情報をまず大雑把に3つ4つに分けます。例えば左記のページなら、タイトル画像でまず1つ(グループ1と名前を付けて置きます)、メインコンテンツ(本文が書かれている部分)がグループ2、コピーライト部分がグループ3の3つに分かれています。これを無意識で書くのと、意識して書くのとはでは大違いです。意識して書くことによりページの規則性や統一感が出てきます。


 

グループに区切る
次に大雑把に分けた分けたグループ間を区切ります。区切る方法には色々在りますが、枠で囲む、横罫線(HR)、バナーを置く、などなど方法はあります。


細分化
JavaScriptによるリンク先です:画像拡大拡大[30KB]

細分化
区切ったグループを再度グループ化しましょう。(例でグループ2を使います)
グループ2には、イメージ画像もしくは説明画像、見出し(画像で作ってあるタイトル)、本文の3つに分けることができます。ちなみに大見出しは、このページで言うと『ブロックごとに作成・グループ化』になります。大見出しは他との差別化をはかり大きめな文字で作り、見出しは若干小さくします。


 

近づけ・離す
大見出し(主役)は一つなので他の見出しとは離します。見出しと本文は同グループなので近づけます、他の見出しとは別グループなので離します。近づけたり離したりすることでブロックが出来上がります、文章を読む側にしてみればグループになっていた方が非常に読みやすくなります。