どうも、みずにゃんです。
今回、当ブログのトップページ等、一部デザインを全面的に作り直しました。今日の記事ではリニューアルした部分の詳細を綴っていきます。
2年ぶりにトップページを完全刷新！
「あそぶログ！」は見た目とユーザビリティに配慮したサイトづくりに取り組むため、随時デザインや表示内容の見直しを行っています。
2年前の2021年5月にWordPressテーマを「Arkhe」にして以降、トップページは小改良は続けていましたが、基本的なデザインスタイルは2年間ずっとキープしてきました。
ブログ開設9周年を前に、トップページを主に、一部箇所を刷新することに決めました。よりわかりやすく、そして、より楽しくブログブラウジングをしていただけるように、ゼロベースでリデザインを行いました。
各記事ページ等、トップページ以外のページデザインや内容は、目次とフッターを除いて変更はありません。
トップページの見直し部分
「全幅デザイン」の見直し
旧トップページでは、全幅セクションを核にしたデザインチューニングとしていました。そのため、コンテンツの幅もデバイスの画面サイズや解像度に応じて調整されます。ただ、画面サイズや解像度によってはコンテンツが大きすぎてコンテンツを確認しにくかったり、スクロール量が増えてしまうデメリットも抱えていました。とくに幅が広がりやすいPC環境ではこのデメリットが顕著に出ていました。
今回、このコンテンツ幅を見直し、横が1000pxを超える画面の大きい環境では、コンテンツ幅が1000pxからは拡がらないように調整しました。これによりPC環境等でもコンテンツ全体の見渡しやすさが改善しています。
背景は新しくオレンジの縦ストライプにしてみました。
プロフィールエリアの追加
個人ブログですから、どんな人が執筆しているのかをわかりやすく表示するためにイントロダクションをプロフィールに充てることにしました。表示内容は基本的にフッターのプロフィール（後述）と同じです。
コンテンツをボックス囲みに
コンテンツはボックスを多用したデザインとしています。各コンテンツの範囲をボックスで分けることで見やすさの改善とメリハリのあるデザインの実現を両立しています。
メインコンテンツは「最新記事」「ぜひ読んでみて！（注目記事）」「読みたい記事を見つけてみよう！（検索コーナー）」「ブログだけで物足りないあなたへ（Dreaming Factoryの他サイトの案内）」の4つを用意。リンクカードのデザインも見直しています。
新しくなったシェアボタン
これまでは既存プラグインのシェアボタンを置いていましたが日本国内のSNSはあまり対応していなかったため、トップページ専用のシェアボタンを作り直すことに。
新しいシェアボタンは「Twitter」「Facebook」「はてなブックマーク」「LINE」と日本で普及しているもののみを厳選。デザインもシンプル化してスマホでも表示が崩れないよう配慮しています。
スマホでも、もっと見やすく
これまではPC・タブレットとスマホで基本表示を分けることはしていませんでしたが、新デザインはスマホで表示させたときだけ改行させるようにしています。PCでは無駄な改行なくスマートな表示、スマホでは自動改行による無駄なデザイン崩れをできるだけ避けるチューニングです。
リンクカードをPC・タブレットとスマホでスタイルを変更したことで画面領域を潰しすぎないように配慮
フッターデザインも見直し
トップページの改良とあわせて、フッターのデザインも一部見直しを行いました。
具体的には左カラムのプロフィール部分を作り直しています。トップページ同様にボックスで囲むデザイン（トップページとは異なり透過あり）にして、WordPressのデフォルトでは対応していない、LINEやTikTokのプロフィールボタンを新しく追加。プロフィールボタンは各SNSのブランドカラーにしてわかりやすくしました。
フッターウィジェットは記事コンテンツと違いグループ系のレイアウトブロックが上手く機能せず、調整に時間を要しました。最終的にはカラムを使用することで落ち着かすことに。
PCとスマホではブロックの置き方を変えていて、それぞれで最適な表示になっていると思います。
目次の再設定
一時的に機能廃止していた記事ページ・固定ページの目次をデザインを新しくして再設定しました。ウィジェットとして設置しているので、2つ以上の見出しのある全ページで表示されます。Arkhe Blocksの目次ブロックをベースに、和色緑系へのカラー変更とサイズ修正などを行っています。
今後も進化は止まらない！
ひとまず、デザイン改良は一段落しました。まだまだ修正してみたい部分はあるものの、とりわけ大きな不満点を抱えているわけでもないので記事や固定ページなどの本文部分など、ブログの核となる部分は現状維持ということにしておきます。
ただ、あそぶログ！は今後も進化を止めません。以前のように頻繁（年1回以上）にWordPressテーマを変えてしまうほどの”大改造”は行うつもりはありませんが、随時イイナ！と思った機能やデザインがあれば積極的に採用していき、細部をより洗練させていくことができたら、と思っています。 みず
最後まで読んでいただき、
ありがとうございました！
こちらもチェックしてみてください！
