Design - 空繰再繰

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

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

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

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

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

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

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

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

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

例えば404 Blog Not Foundだったら

みたいな感じ。

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

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

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

例としてはこんな感じ。

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

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

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

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

このBlogの場合だと

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

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

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

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

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

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

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

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

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

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

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