Designer’s Nest Web（DNW）の記事も少しずつ増えてきたので、そろそろデフォルトのデザインから卒業し、サイト全体をもう一段階アップデートしたいと思うようになりました。
これまでのデザインでも記事を書くうえで特に困ることはありませんでしたが、リニューアルするなら、記事の読みやすさや探しやすさを整え、見た目も細かな部分まで気を配って、もう少し洗練されたものにしたいと考えました。
そこで、DNWのデザインを見直すことにしました。今回は、参考にしたサイトや実際に変更した部分、AIと試行錯誤した過程などを振り返ってみます。
読みやすさと探しやすさを考え、見た目も整えたい
DNWでは、仕事や暮らしのなかで実際に使ったもの、試したこと、考え直したことを記事にしています。
ガジェットやデジタル環境、生成AIなど、扱うテーマはさまざまですが、どの記事でも私が何を考えて選び、実際に使ってどうだったのかを残すことを大切にしています。
使いやすさの面では、初めて訪れた人にもどんな記事があるのか分かりやすく、興味のある内容を自然に見つけられるようにしたいと思いました。
記事を開いたあとは、余計な装飾に気を取られず、本文を集中して読めることも大事です。そのうえで、デザイン面では統一感のある落ち着いた雰囲気に整えたいと思いました。
そのようなことも踏まえながら、トップページの構成や記事一覧、本文のレイアウトも見直すことにしました。
参考にした3つのWebサイト
最初に取り組んだのは、どんなデザインを目指すのか、方向性を整理することでした。
そのために、monograph、Goodpatch Blog、&Premiumの3つを参考に、それぞれのどこに魅力を感じているのかを整理しました。
monograph：個人メディアとしての雰囲気
monographで魅力を感じたのは、個人が運営するメディアとしての雰囲気です。
運営者の視点や好みが感じられながらも、記事を読むことが中心になっている。DNWも個人の実体験を蓄積する場所なので、こうした雰囲気は取り入れたいと思いました。
個性を強く打ち出しすぎると記事そのものよりデザインが目立ってしまうため、そのバランスは意識しておきたいと思いました。
Goodpatch Blog：情報の整理された見せ方
Goodpatch Blogでは、情報の整理の仕方が参考になりました。
記事やナビゲーションが分かりやすく、情報量があっても全体が整って見えるところが印象的です。
DNWもこれから記事が増えていくことを考えると、情報を探しやすい構成にしておく必要があります。
企業サイトのように整いすぎると個人ブログとしての雰囲気が薄れるため、整理された見せ方は取り入れつつ、堅くなりすぎないデザインを目指しました。
&Premium：落ち着いた質感
&Premiumで参考にしたのは、サイト全体の落ち着いた質感です。
余白や文字、写真の見せ方によって、必要以上に主張しなくても雰囲気が生まれる。そうしたデザインに魅力を感じました。
DNWでも装飾を増やして個性を出すのではなく、文字や余白、レイアウトのバランスによって、落ち着いて記事を読める場所にしたいと考えました。
monographの個人メディアらしさ、Goodpatch Blogの情報整理、&Premiumの落ち着いた質感。
どれか一つを再現するのではなく、それぞれの良いと感じた部分を取り入れながら、DNWに合うバランスを探すことにしました。
ChatGPTのSitesで、実際の画面を見ながらデザインを考えた
今回のデザイン改善は、ChatGPTに相談しながら進めました。
まずは参考サイトや目指したい方向性を伝え、デザイン案を作ってもらいましたが、最初に出てきたものは思っていたイメージとは少し違いました。
カラスのモチーフが大きく目立ちすぎていたり、レイアウトが平凡に感じられたり。完成したWebサイトというより、ワイヤーフレームに近い印象の案もありました。
そこで活用したのが、ChatGPTの「Sites」という機能です。
実際にブラウザで表示できるWebサイトを作ってもらい、トップページや記事ページ、記事一覧などを確認しながら、ロゴの大きさや余白、文字の見え方などを修正していきました。
特によかったのは、スクロールしたときのヘッダーの切り替わり方や、スマートフォンでのレイアウトなど、静止画では分かりにくい部分も試せたことです。
最終的な公開はWordPressなので、Sitesで作ったものをそのまま反映できるわけではありませんが、画像でデザインを確認するだけでなく、実際の動作イメージまで確かめながらデザインを詰められたのは便利でした。
実際に見直した部分
ロゴとヘッダー
ロゴは、以前からDNWで使用していたカラスとハンガーのモチーフを活かすことにしました。
カラスとハンガーのモチーフについては、以前制作した「生成AIで作ったXのヘッダー」の記事でも紹介しています。
新しいものを一から作るのではなく、これまで使ってきたモチーフを残しながら、サイト全体のデザインになじむ形に整えていく方針です。
ロゴの存在感が強すぎると全体のバランスが崩れてしまうため、文字との組み合わせや線の太さ、輪郭の表現などを調整しました。
白抜きのデザインも検討しましたが、最終的には採用せず、文字の太さや輪郭を調整した案を選んでいます。
ヘッダーも、今回大きく見直した部分の一つです。
ページ上部ではフルロゴを表示し、スクロールするとコンパクトなロゴへ切り替わる構成にしました。
サイトを開いたときにはメディアの名前が分かり、記事を読んでいるときにはヘッダーが必要以上に目立たないようにするためです。
ロゴの切り替わり方やナビゲーションの表示も、実際にスクロールさせながら確認し、見た目と使いやすさのバランスを調整しました。
トップページと記事一覧
トップページでは、初めて訪れた人にもDNWがどんなサイトなのか伝わり、興味のある記事を探しやすい構成を目指しました。
記事を新しい順に並べるだけでなく、サイトで扱っているテーマや記事の内容が自然に伝わるようにしたいと考えました。
その一つが、トップページの冒頭に掲載する文章です。
仕事や暮らしの中で、使ってみたもの、試したこと、見直したこと。実際に分かったことや、迷いながら選んだ理由を記録しています。
ガジェットや生成AIといった特定のテーマに限定せず、DNWがどんな視点で記事を書いている場所なのかを伝える文章にしました。
記事一覧やカテゴリの見せ方も、全体のバランスを見ながら調整しています。
例えば、カテゴリの記事数は見出しの横ではなく下に配置し、記事一覧のカードや見出し周辺の余白も見直しました。
一つひとつは小さな変更ですが、こうした部分を調整していくことで、サイト全体の印象も少しずつ整っていきました。
記事本文と関連記事
記事ページでは、装飾を加えることよりも、読みやすさを優先しました。
その一つが、章ごとの区切り線です。
区切り線があると情報のまとまりは分かりやすくなりますが、長い文章では何度も線が現れることで、かえって読む流れが途切れるように感じました。
そこで記事本文では区切り線を削除し、見出しや余白で章の区切りを表現するように変更しました。
一方、トップページなどでは情報のまとまりを示すために区切り線を残しています。同じ装飾でも、場所によって必要な役割は異なるため、すべてを統一することにはこだわりませんでした。
関連記事についても、画像付きのカードや表示サイズ、周囲の余白などを見直しています。
記事を読み終えた人が、興味を持った内容についてもう少し読みたいと思ったときに、自然に別の記事へ進めることが理想です。
そのため、関連記事は目立たせることだけを考えるのではなく、本文を読み終えたあとに無理なく目に入る見せ方を目指しました。
AIに任せたことと、私が判断したこと
今回のリニューアルでは、デザインの方向性を考えるところから、Sitesでの試作や修正まで、さまざまな場面でAIの力を借りました。
気になる部分を修正していく作業をAIに任せられたことで、私自身は画面を見ながら判断することに集中できました。
もちろん、デザイン案をそのまま採用したわけではありません。例えば、ロゴは白抜きのデザインも検討しましたが採用せず、記事本文の区切り線は削除する一方で、トップページには残しました。実際の画面を見ながら、必要なものとそうでないものを一つずつ判断しています。
今回は、AIにデザインを任せきりにするのではなく、提案や修正を手伝ってもらいながら、納得できる形に整えていく進め方になりました。
WordPressへの反映と、残している調整
Sitesで確認したデザインは、最終的にWordPressへ反映しました。
これまで使用していたCocoonを別のテーマに乗り換えるのではなく、DNW用の子テーマを作成して、デザインを変更しています。
切り替え後はPC・スマートフォンでの表示や主なリンクを確認しましたが、日本語フォントなど、もう少し手を入れたい部分は残っています。
また、デザインを変更したことで記事の読まれ方に変化があったかどうかは、まだ判断できません。今後の閲覧状況も確認しながら、必要な部分を少しずつ調整していくつもりです。
ブログのデザインを見直して考えたこと
実際に手を入れてみると、使いやすさを考えることは、文字や余白、記事の並べ方といった細かな部分を見直すことにもつながり、見た目も以前よりすっきりしたものにできたと思います。
デフォルトのデザインから一歩進め、今のDNWに必要だと思う部分を少しずつ整えられたのは、今回のリニューアルでよかった点です。
