［サイトリニューアル］デザインの見直し その８

当サイトではアフィリエイト広告を利用しています。

デザイン編 最終章は、アーカイブのデザインです。アーカイブは月別、カテゴリー別と意外と見ている人も多いので、ちゃんと整理してあげないと次の記事を見てもらえないので意外と重要だったりします。

とはいってもアーカイブのデザインは今まで使った要素の組み合わせで作れるので、案外簡単に作れてしまいした。

なんのアーカイブかわかるようにする

当然のことからも知れませんが、アーカイブはまとめページなので、「何についてまとめている」のかしっかりとわかるようにページのトップに出すようにします。

ただし、この「何について」はデザインで落とし込むことはできず、MTのタグで表示させるので実際に気を使うのはMTの構築のときなので、ここではフォントサイズのバランス感覚だけになると思います。

見出しはこんな感じ

記事タイトル、データはトップページと同じ

アーカイブは記事のまとめという意味ではトップページの「最近のエントリー」と同じなので、デザインはそこと同じようにします。

今回のリニューアルではユーザーの導線やユーザービリティを意識している部分も多いため、同じ意味をもつ所ではできるだけ同じデザインを使うようにしているつもりです。

記事のキャプションと「続きを読む」を追加

デザインの統一も重要な要素だと思っていますが、トップと違ってアーカイブを見た場合は、記事が古い場合もあるので、その内容が少しはわかったほうが親切だという考えから、リード文（書き出し）が２行表示されるようにします。

で、その下にはこれもトップページの「最新エントリー」に使っている「続きを読む」を追加してより記事ページへの誘導を強くしています。

アーカイブに表示される１エントリー分

ページ分割を使って１ページを軽く

アーカイブページは場所によって記事数が多くなってしまい、１ページで表示しようとすると読み込みに時間がかかってしまうことが想定されます。

それを回避するために、プラグインを使ってページを分割することを考えています。この辺はプラグインでできるので、ちゃんとできるようにしたいと思っています。

こんなところでアーカイブページができました、完成したのがこのイメージ。

実はあと、お問い合わせページも作るのですが、これは現状のものを踏襲するだけでリニューアルする程でもないので割愛して、次はコーディングに入ります。

あと、デザイン編が終わったので最初の化粧をしているちょっと怪しい人の写真もここまでになります（笑

［サイトリニューアル］関連記事

［サイトリニューアル］導線の見直し その１
［サイトリニューアル］導線の見直し その２
［サイトリニューアル］導線の見直し その３

［サイトリニューアル］デザインの見直し その１
［サイトリニューアル］デザインの見直し その２
［サイトリニューアル］デザインの見直し その３
［サイトリニューアル］デザインの見直し その４
［サイトリニューアル］デザインの見直し その５
［サイトリニューアル］デザインの見直し その６
［サイトリニューアル］デザインの見直し その７
［サイトリニューアル］デザインの見直し その８

［サイトリニューアル］コーディング その１
［サイトリニューアル］コーディング その２
［サイトリニューアル］コーディング その３
［サイトリニューアル］コーディング その４
［サイトリニューアル］コーディング その５