by @nyarla

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

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


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

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

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

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

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

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

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

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

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

例えば 404 Blog Not Found だったら

みたいな感じ。

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

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

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

例としてはこんな感じ。

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

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

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

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

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

この Blog の場合だと

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

#FIXME