カラクリスタ

「輝かしい青春」なんて失かった人のブログ

素人でもできるWebレイアウト

概要: 素人というか自分がやってる Web レイアウトの方法

素人でもできる Web レイアウトの仕方ーどんどんぱふぱふーと始めると dnbk されるのがオチなのでやりませんが、 デザインとかの素人である自分がやってる Web サイトでのレイアウトの仕方を解説してみるよ！

このエントリを見れば Web サイトのレイアウトがバッチリになるかもね ☆

……っていうか俺のキャラじゃねぇ。とりあえずはじめます。

一、配置される要素をすべて書き出す

まず一番初めにレイアウトとか考えずに配置したい要素を考える。

どういうことかというと、例えば Blog なら載せたい要素は、

  • Blog のタイトル
  • Blog の概要
  • グローバルナビゲーション
  • ローカルナビゲーション
  • 広告
  • ...etc

みたいに書き出していく。あと Blog パーツを載せたいとか思うんだったら、

という感じでこれも書き出していく。

大体ある程度まで書くと、配置したい要素が思いつかなくなるので、 今度は既存の Blog にある要素を書き出していく。

例えば 404 Blog Not Found だったら

  • Blog のタイトル
  • Blog の概要
  • 広告
  • 検索
  • ブックマークボタン はてな

  • livedoor Clip

  • Blog の記事

みたいな感じ。

一つや二つの Blog じゃあんまり参考にはならないので、幾つか Blog を見てまわって、 その Blog がどういう要素で構成されているか調べてみる。

ちなみに今現在のこの Blog だとこんな感じ。

あと自分はこの後に要素がどこに配置されやすい要素かって分類をしてる。 まあレイアウトが全然分からないって人はやらないほうがいいかも知れない。

例としてはこんな感じ。

  • ヘッダ系 Blog のタイトル
  • Blog の概要
  • グローバルナビゲーション

  • ローカルナビゲーション

  • エントリ系 エントリ タイトル

  • 本文

  • 概要

  • メタデータ カテゴリ

  • タグ
  • 作成日時
  • 固有リンク

  • 投稿者

  • サイドバー/フッタ系 プロフィール

  • カテゴリ一覧
  • 過去ログ
  • バナ－一覧 feedburner の購読者数のカウント
  • livedoor Reader の購読ボタン
  • はてなブックマークのブックマークカウント
  • Web スカウター
  • feed meter

  • track feed

  • powered by

  • コピーライト

二、画面を大まかに分割する

第二に画面を大まかに分割します。

要するに シングルカラムレイアウト とか ツーカラムレイアウト とか スリーカラムレイアウト とか そう言ったことを決める。

シングルカラムとかツーカラムとか言われてもわかんないよって人は要するに、

  • 縦にいくつ分割するか
  • 横にいくつ分割するか

ということを決めるわけです。

この Blog の場合だと

  • 縦に三分割
  • 横に二分割

で、実際のレイアウトはこんな感じ。

  • 一番上 (ヘッダ)
  • 真ん中 (コンテンツ) 右 (記事とか一覧とか)

  • 左 (サイドバー)

  • 一番下 (フッタ)

このとき配置する要素とかのことは考えない。単純にどう分割するかだけを考える。

三、配置したい要素を画面に割り当てていく

最後に分割した画面にしたがって、配置する要素を決めていく。 要するに具体的にどの要素をどこに配置するかっていうのを考えていく。

まあ画面はすでに分割されてるし、配置したい要素は書き出してあるので、それなりにすんなりできると思う。 思うんだけど、どこにどう配置するか全然決まらないって場合は、既存の Web サイトを参考にするとなんとかなるかも知れない。

ちなみに今現在のこの Blog のレイアウトと配置はこんな感じ

まあここは普通のレイアウト作業なので、具体的なアドバイスとかあんまりできない、 というかなんとなくできてるので説明のしようがないんだけど、大体こんな感じ。

まとめ

大体こんな感じです。一番重要なのは配置要素の書き出しかな。

レイアウトが決まらないってのは、どの要素を使えばいいのか分からないとか、 どこにどの要素を配置すればいいのか分からないとかそういったことだと思うので、 一番初めに要素を書き出して、次に画面を分割すれば、 あとは大体できると思う。

というかこれは自分のやってる方法なので、万人がこの方法でできるかって言われると疑問なんだけど、 レイアウトできねーよウワーンな人の参考にはなるんじゃないかと思う。 まあ我流なので参考にするまでにとどめておいたほうがいいんじゃないかな。

まあ Web デザインの素人の自分がやってるレイアウトの方法はこんな感じです。何かの参考になれば。

……書き始めの謎のテンションはなんだったんだろう。

FIXME