2016年10月6日木曜日

トップページを考え直す ~Blogger テンプレートを作るよ! (17)~

こんにちはー!

どうも、私です。前回は、ブログとウェブサイトの違いを明確にして、ブログとしての用途とウェブサイトとしての用途を併せ持つサイトを作るために何が必要かを考えました。

(前回:『ブログとウェブサイトの違いを考える ~Blogger テンプレートを作るよ! (16)~』)

今回は、それを一つの画面にまとめるレイアウトを考えてみます。




トップページのレイアウト

材料(一人前)

ブログのタイトルや説明文(ヘッダー)
ラベルリストを使ったメニュー
ページリストを使ったメニュー
サイトマップ
最近の投稿一覧

絵で考える

前々回書いた絵を参考に、必死でそれっぽいレイアウトを描いてみました!細かいデザインは別途考えます。絵を描くことに慣れていないので、途中から集中力が切れて遊び始めてます。


自己紹介の絵はクマのつもりです

(左)メニュー兼簡易サイトマップ

この左側のメニューは、操作のショートカットと、サイトの構造を分かりやすくする目的で付けました。ページリスト、ラベルリストを両方まとめて配置します。本当のサイトマップは別ページに作ります。

モバイルなど幅が狭いものでは非表示をデフォルトにしたいので、ここにある内容はメニューを使わなくても行けるように工夫します。 「無くてもなんとかなるけど、あると便利」 という感じが理想です。

(右上部)タイトルと目立つ画像

先頭はタイトルで、特に目立たせたい画像を表示します。画像をクリックするとその関連ページに飛ぶようにリンクを張れます。トップページ以外ではタイトルを少し控えめにして、画像は消します。

(右下部)メインカラムとサイドカラム

メイン部分では、最近の投稿をいくつか並べようと思ったのですが、大分類ラベルリストと兼ねる目的で、大分類ラベルごとの最新の投稿を載せたほうが利用しやすいのではないかと思いました。「一覧はこちら >」 をクリックするとそのラベルの検索結果に飛びます。

絵では投稿のタイトルしか載せていませんが、実際には投稿日時やラベルなども載せようと思います。そうそう、小分類込みの全てのラベルはこのメインカラムの下に設置したいです。

(画面外)フッター

フッターにはページリストを付けます。フッターのページリストからは、トップページから見た直下の階層にあたるページを載せます。そこからさらにリンクをたどる形で全てのページにアクセスできるようにします。ただ、そのうち作成するであろうサイトマップにすべての仕事を奪われます。

だいぶ変わる予定

今のブログデザインも気に入っているだけに、この変更は大きすぎてちょっともったいない気がしてしまいます。ブログのデザインに愛着湧きすぎたかな。いつでも元に戻せるように、とりあえずバックアップはしっかりとっておきましょう。

さて、じゃあ次回から実作業にかかりますか!

0 件のコメント :

コメントを投稿