[リニューアル]レイアウト2パターンの比較

うかブログ »

ウェブデザイン »

[リニューアル]レイアウト2パターンの比較 »

デザインの勉強のために購入したノンデザイナーズ・デザインブック。ホントは何回か熟読してひとつひとつ知識を習得していった方がいいんでしょうけど、なんとなく分かったら実践してみたくなる私。早速、この本に書かれていたことを念頭に置きつつ、サイトのレイアウトを2パターンほど作ってみました。

実物は第一案がコレ、第二案がコレ。（もしかしてそのうち削除しちゃうかも）

これ。先に画像化したパターンで言うところの左が第一案で右が第二案。画像とか載せちゃうとレイアウトそのものが分からなくなりそうなので、とりあえず見出しだけ色をつけてテキストをべた打ちしておきました。また、右サイドバーは背景色を入れてあるとおり、ベツモノなのははっきりしてるので何も入れてません。

で、中身です。第一案の方は案の定と言いますか、作る前からなんとなく感じてたんですけど、このカタチにすると相変わらずハラキリスタイルです。どうも大きなくくりの間でズバッと横棒引っ張られているような気がして、全体的な流れが切れちゃってるというか、見ててつまんないというか。

一方第二案。レビュー記事と非レビュー記事を左右に分けたおかげで、パッと見整理されつつも縦に動く目線の中で一応の流れは確保できているのではないかと。どちらも「近接」「整列」「反復」といったところを意識して作ってはいるんですが、「流れ」というのを考えると断然第二案かなーと個人的には思います。

そして気になっていたスクロールなしで最初に見れる部分がこちら。第一案がレビュー一色になるのに対し、第二案ではレビューに加え基礎知識、HDD検索のメニューも入ってます。ま、実際のところ見出しを画像で作ったり装飾したりする関係で、見えるのは基礎知識部分くらいかな？とは思いますが、パッと見の盛りだくさん感も第二案の方が上かな？と。

っつーことで、レイアウトの基本線、第二案でいこうと思います。（が、もしお手すきであればコメント欄からちょいと感想なんぞを書き込んでいただけると嬉しいですm(_ _)m）

...と、記事を投稿している間にストリバさんからコメントが。第二案でいこうと半分決めちゃってたんですけど、超迷う。よーく考えてみます＾＾；

「ウェブデザイン奮闘記」関連記事

• [リニューアル]HDDサイトのレイアウト再考
• [リニューアル]デザインの基礎知識を学ぶ
• [リニューアル]サイトの内容を整理する
• [リニューアル]レイアウト案を作る
• [リニューアル]レイアウト2パターンの比較
• [リニューアル]レイアウト決定
• [リニューアル]Photoshopで画像作成
• [リニューアル]見出し画像の作成
• [リニューアル]見出し画像のフォント
• [リニューアル]小見出し用のバナーを作る
• [リニューアル]記事タイトルを画像にしてみる
• [リニューアル]全体のコントラストを見る
• [MT]HTMLからMTテンプレートへ（ヘッダー編）
• [MT]HTMLからMTテンプレートへ（記事リスト編）
• [MT]HTMLからMTテンプレートへ（まとめ）
• [リニューアル]リニューアル完了

△ページトップに戻る