概要: 素人というか自分がやってる Web レイアウトの方法
素人でもできる Web レイアウトの仕方ーどんどんぱふぱふーと始めると dnbk されるのがオチなのでやりませんが、 デザインとかの素人である自分がやってる Web サイトでのレイアウトの仕方を解説してみるよ！
このエントリを見れば Web サイトのレイアウトがバッチリになるかもね ☆
……っていうか俺のキャラじゃねぇ。とりあえずはじめます。
一、配置される要素をすべて書き出す
まず一番初めにレイアウトとか考えずに配置したい要素を考える。
どういうことかというと、例えば Blog なら載せたい要素は、
- Blog のタイトル
- Blog の概要
- グローバルナビゲーション
- ローカルナビゲーション
- 広告
- ...etc
みたいに書き出していく。あと Blog パーツを載せたいとか思うんだったら、
- はてなスター
- feed meter
- track feed
という感じでこれも書き出していく。
大体ある程度まで書くと、配置したい要素が思いつかなくなるので、 今度は既存の Blog にある要素を書き出していく。
例えば 404 Blog Not Found だったら
Blog のタイトル
Blog の概要
広告
検索
ブックマークボタン はてな
livedoor Clip
Blog の記事
みたいな感じ。
一つや二つの Blog じゃあんまり参考にはならないので、幾つか Blog を見てまわって、 その Blog がどういう要素で構成されているか調べてみる。
ちなみに今現在のこの Blog だとこんな感じ。
Blog のタイトル
Blog の概要
グローバルナビゲーション
ローカルナビゲーション
一行広告スペース
コンテンツマッチ広告
Blog のエントリ 固有リンク
カテゴリ
日付け
コメント/トラックバックの個数
はてなスター
プロフィール
カテゴリ一覧
過去ログへのリンク
バナ－一覧 feedburner の購読者数のカウント
livedoor Reader の購読ボタン
はてなブックマークのブックマークカウント
Web スカウター
feed meter
track feed
powered by
コピーライト
あと自分はこの後に要素がどこに配置されやすい要素かって分類をしてる。 まあレイアウトが全然分からないって人はやらないほうがいいかも知れない。
例としてはこんな感じ。
ヘッダ系 Blog のタイトル
Blog の概要
グローバルナビゲーション
ローカルナビゲーション
エントリ系 エントリ タイトル
本文
概要
メタデータ カテゴリ
タグ
作成日時
固有リンク
投稿者
サイドバー/フッタ系 プロフィール
カテゴリ一覧
過去ログ
バナ－一覧 feedburner の購読者数のカウント
livedoor Reader の購読ボタン
はてなブックマークのブックマークカウント
Web スカウター
feed meter
track feed
powered by
コピーライト
二、画面を大まかに分割する
第二に画面を大まかに分割します。
要するに シングルカラムレイアウト とか ツーカラムレイアウト とか スリーカラムレイアウト とか そう言ったことを決める。
シングルカラムとかツーカラムとか言われてもわかんないよって人は要するに、
- 縦にいくつ分割するか
- 横にいくつ分割するか
ということを決めるわけです。
この Blog の場合だと
- 縦に三分割
- 横に二分割
で、実際のレイアウトはこんな感じ。
一番上 (ヘッダ)
真ん中 (コンテンツ) 右 (記事とか一覧とか)
左 (サイドバー)
一番下 (フッタ)
このとき配置する要素とかのことは考えない。単純にどう分割するかだけを考える。
三、配置したい要素を画面に割り当てていく
最後に分割した画面にしたがって、配置する要素を決めていく。 要するに具体的にどの要素をどこに配置するかっていうのを考えていく。
まあ画面はすでに分割されてるし、配置したい要素は書き出してあるので、それなりにすんなりできると思う。 思うんだけど、どこにどう配置するか全然決まらないって場合は、既存の Web サイトを参考にするとなんとかなるかも知れない。
ちなみに今現在のこの Blog のレイアウトと配置はこんな感じ
ヘッダ Blog のタイトル
Blog の概要
グローバルナビゲーション
ローカルナビゲーション or 一行広告スペース
検索ボックス
コンテンツ 記事一覧 記事 タイトル
メタデータ 固有リンク
記事のカテゴリ
作成日時
コメント/トラックバックの個数
はてなスター
コンテンツマッチ広告
記事
...続く
サイドバー プロファイル
広告
カテゴリ一覧
過去ログ一覧
バナー一覧 feedburner の購読者数
livedoor Reader の購読ボタン
はてなブックマークの総ブックマーク数
Web スカウター
feed meter
track feed
powered by
フッタ コピーライト
まあここは普通のレイアウト作業なので、具体的なアドバイスとかあんまりできない、 というかなんとなくできてるので説明のしようがないんだけど、大体こんな感じ。
まとめ
大体こんな感じです。一番重要なのは配置要素の書き出しかな。
レイアウトが決まらないってのは、どの要素を使えばいいのか分からないとか、 どこにどの要素を配置すればいいのか分からないとかそういったことだと思うので、 一番初めに要素を書き出して、次に画面を分割すれば、 あとは大体できると思う。
というかこれは自分のやってる方法なので、万人がこの方法でできるかって言われると疑問なんだけど、 レイアウトできねーよウワーンな人の参考にはなるんじゃないかと思う。 まあ我流なので参考にするまでにとどめておいたほうがいいんじゃないかな。
まあ Web デザインの素人の自分がやってるレイアウトの方法はこんな感じです。何かの参考になれば。
……書き始めの謎のテンションはなんだったんだろう。
#FIXME
