[リニューアル]レイアウト案を作る
ダメ出しするにも叩き台は必要...ということで、HDDレビューサイトのレイアウトパターンを2つほど作ってみました。もっとよく考えればもっと作れそうではあるんですけど、あんまり考えすぎると逆に使いづらいレイアウトになりそうなので、パッと思いついたパターンをとりあえず画像化することに。

これが作ってみたレイアウト案で左は現在のもの。他のページとの関連もあるので原則2段組というのは崩さず、メインスペースの中であれこれしてみました。(コレ、反復の原則に従ってます。)
第一案は冒頭のところで3つのレビュー群を横並びにさせて、その下に追加のコンテンツを置くというもの。第二案はメインスペース内でさらに段を組み、レビュー群を縦に並べて左サイドバーにあたる部分に新しいコンテンツを配置しました。で、スクロールなしで見れる部分はどうなるのかというとこんな感じ。

うーむ。。。
とりあえず、テーマをブロックごとに分けて配置することで、とりあえず近接の原則には従っているんだと思う。(思う、とか自信なさげなあたり、ノンデザイナーズ・デザインブックを読み込んでない証拠。)また、実際にどう表示させるかは別として、テーマ別のブロックの幅を合わせ、縦に引いたベースラインに沿って配置するところから考えるに、とりあえず整列の原則は満たされそう。(そう、とか自信なさ....以下、略)
とりあえず、どう配置してもそれっぽく仕上がりそうではあるんですが、問題はパッと見たときにどういう情報が訪問者に入るかということ。今のところ、新規訪問者の割合が9割を超えちゃってるこのサイト、検索エンジンから来てパッと見たときに心をつかめるかどうかというのは重要な問題です。

そこでスクロールなしで見れる最初の画面に話が戻るんですが、一番目に付くメインスペースの部分、現在のものと第一案では、レビューしかないように見えるんですね。(ま、右サイドバーには何かありますけど。)
せっかくコンテンツを追加してボリュームを持たせようとしてるのに、パッと目に付くところがレビューだけでは基本的にあまり変わってないような気がするんですヨ。その点、第二案では新たに左サイドバーを設けることでレビューを中心としつつ「こんなんもありまっせ」とアピールできるようなできないような。
しかし一方で、第二案だと3つあるHDDレビューの1つ目しか表示されないんですよね....。と悩みかけたんですが、これは冒頭のサイト説明部分でナビゲートしてあげれば解決できそうな気がします。
ということで、案ずるより生むがヤスキヨ。こんな感じで実際のHTMLを組んでみてもう一回考えてみようかと思います。
ウェブデザイン奮闘記 関連記事
ウェブデザイン奮闘記関連
- [リニューアル]HDDサイトのレイアウト再考
- [リニューアル]デザインの基礎知識を学ぶ
- [リニューアル]サイトの内容を整理する
- [リニューアル]レイアウト案を作る
- [リニューアル]レイアウト2パターンの比較
- [リニューアル]レイアウト決定
- [リニューアル]Photoshopで画像作成
- [リニューアル]見出し画像の作成
- [リニューアル]見出し画像のフォント
- [リニューアル]小見出し用のバナーを作る
- [リニューアル]記事タイトルを画像にしてみる
- [リニューアル]全体のコントラストを見る
- [MT]HTMLからMTテンプレートへ(ヘッダー編)
- [MT]HTMLからMTテンプレートへ(記事リスト編)
- [MT]HTMLからMTテンプレートへ(まとめ)
- [リニューアル]リニューアル完了
