Girls Talk

Tenko Kisaragi

サイトのボディを考える

2014年03月18日

サイトのbody部分を見てみます。誰もが良く知っているyahooのサイト。ちょっと長くて見にくいかもしれませんが、全体像です。
いつも見ているyahooのサイトを大きく分けると右の図になります。

 ⬇︎

一番上にyahooのロゴや、恐らくyahooが一番使ってほしいサービスのアイコン、それと検索のためのバーが配置されています。
その下は、盾に三つに別れていて、一番下が一つになっています。

見やすくすると、こんな感じ。

一番上がヘッダー。一番下がフッター。真中の部分は三つに分かれているので3カラムです。二つに分かれていれば2カラムと言います。
上の図をそのまま組む事が出来れば、yahooのサイトは出来たも同然!

ただ、その前にもう一つ。

サイトを見ると、左右に白い余白があります。

画面いっぱいではなくて、幅が決められているために、画面の真ん中にコンテンツが集まっています。yahooの場合、この幅が950pxです。サイト制作者が右に習えをするappleの場合は、headerの部分は980pxで作られています。

サイトの幅と配置が分かれば、実際に組んだ方が分かりやすりでしょうね。

—Comments—

コメントは受け付けていません。