PHPとCSSで作ったピンタレスト風のオリジナルデザイン | 愉快なダルメシアン

TOPページはサイトの顔。機能重視で組み立てていたが、見た目が少し物足りない。
今回手を入れたのは、そんなTOPページの印象まわり。PHPとCSSで組み立てながら、現状のデザインは変えず、ピンタレスト風に寄せて、雑誌をめくるような見た目へ整えてみた。

目指したのは、ただ派手な一覧ではなく、記事の中身が伝わりやすく、カテゴリの違いもひと目でわかる構成。読者が次に読みたい記事へ自然に進めること。検索エンジンにも、このページが「人気記事を整理した一覧ページ」だと伝わりやすい形。その両立が今回のテーマだった。

どんなページを目指したか

方向性は明快だった。
一覧ページを、単なるリンク集ではなく、雑誌の目次のように読むページへ変えること。

カードごとにアイキャッチ画像を見せ、カテゴリごとに色を変え、タイトルと抜粋をのせる。そうすると、同じ一覧でも受ける印象がかなり変わる。記事が並んでいるのではなく、読みたい記事が並んでいる状態。そんな見せ方である。

今回のカスタマイズでは、次の点を意識した。

カテゴリごとに色分けして、内容の違いをすぐ伝える
タイトルをしっかり見せて、抜粋は読みやすく控えめに置く
画像の力を生かしつつ、一覧全体のまとまりを保つ
ピンタレストのような、軽く並んでいく楽しさを再現する

見た目の話に見えて、実は回遊の話でもある。読者が止まらず読み進められるページ設計。そこが一番大きい。

PHPとCSSで作った理由

今回の土台は、ショートコードをPHPで組み、見た目をCSSで整える方法。
プラグインだけで完結させるやり方もあるが、細かな見せ方まで詰めようとすると、あと少し届かないことが多い。今回はそこを自分の手で埋めたかった。

PHP側では、記事一覧を必要な件数だけ取り出し、カードのHTMLを出力する役目を持たせた。カテゴリ名やカテゴリ色の指定もここで管理しやすくした。CSS側では、カードの並び方、画像の見せ方、カテゴリラベル、本文帯の色、文字サイズ、余白を調整。役割を分けると、あとから直す時もわかりやすい。

この方法の良さは、見た目を変えても記事データそのものは触らないこと。土台は変えず、見せ方だけを磨ける。固定ページのカスタマイズとしては、かなり扱いやすい部類だと思う。

WordPressの固定ページは、どうしても無機質になりやすい。けれど、少し手を入れるだけで、サイトの顔になれる。今回のカスタマイズは、その感触を改めて教えてくれた。

人気のWordPressを使って、売上・集客につながる構成・デザインのホームページをお作りします。Webサイトを作ってみたいけどどうしたらいいかわからないという方も、「専門用語を使わない丁寧なコミュニケーション」を心がけておりますので、ご安心ください！
格安サイトから大規模なECサイトまで対応いたします。