新しいサイトデザイン(最終案)の方針と見た目

最終的にこのような形に落ち着きました。

自作WordPressテーマ07

いまは細部を調整しながら、形を整えています。

見て分かる通り、前回までと比べてブログらしい構成に戻してしまいました。Media Queries などを見て、サイトの目的と必要な機能を再検証していったら、こうするのがいちばん合理的で、機能的だと判断しました。

やめることにしたのは、まず記事をハコ型にしてブロックを積み上げるように並べること。よくよく考えてみたら「ただやってみたかったから」という理由くらいしか思いつかなかったので、ひとまず却下しました。一覧性はあっても、雑然として記事を見つけにくいというのも理由です。

次にカテゴリー別で最新記事を3件ずつ表示するというのも、これまたPHPの記述が長くなっただけで、これといって成果が期待できないことも判明。もちろん、これもやめることに。

本で読んでいて「jQueryで動きの多いサイトを作ったらおもしろそう」という考えも、「そんなことして何か意味あるの?」と訊かれたら「……わからん」としか答えようがないから、却下。

 

根本的に考えてみると当ブログの特徴は、

  • 記事はブログスタイル
  • メインカテゴリーが「本」「京都」「WordPress」の3つ
  • コンテンツが整理されていない
  • ウィジェットやフッター、ヘッダー部分を活かせてない

ということです。ブロックを積み上げるように記事を一覧表示するとか、カテゴリー別で最新記事を表示とか、動きを付けるとかは「特に意味のないこと」にすぎません。

そこで最終案としては、

  • カテゴリー分類を明確化(色で判別)
  • サイドバーを左に設置(個人的に使いやすい)
  • 動線を意識した作りにする(左上から右下へ)
  • 丸と四角を使ったシンプルなマーク(大・中・小)
  • 余白をできるだけ入れる(padding:48px 以上)
  • フラットデザインっぽい雰囲気で装飾過多をやめる
  • 画像を減らしCSSとアイコンフォントを利用
  • 本当に必要な機能だけを使ってサイトを軽くする

という感じですね。

なんとか今週中にベータ版を完成させて、新しいテーマに変更し、運営しながら微調整していきたい、という予定です。

ではでは、また。

関連記事

Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…