こんにちは。ドワンゴ教育事業デザイナーのnanaです。
この度、ドワンゴ教育サービス開発者ブログのデザインをリニューアルいたしました！
今回の記事では、デザインのコンセプトや制作時の工夫など、リニューアルのポイントをデザイナー視点でご紹介したいと思います。
どんなふうに変わったのか
まずは、今回のリニューアルで大きく変わったデザインのポイントについてお話しします。
Before / After
以前はテキスト情報を主体とした、シンプルなデザインでした。今回のリニューアルでは、文字情報だけでなく、色やイラストなどの視覚的な要素を大きく取り入れたデザインに変更しました。
デザインのコンセプト
全体のトーンは、『ZEN Study』など、私たちが開発しているプロダクトのデザインに合わせ、ロゴアイコンの明るいブルーをベースにまとめました。プロダクトと地続きの空気感を作ることで、記事を読む前から「ドワンゴの教育サービス」らしい雰囲気を感じ取ってもらうことを目指しています。
また、文字情報が中心となる技術ブログは、どうしても無機質な印象になりがちです。イラストや丸みのあるデザイン要素で全体を柔らかく明るい雰囲気にすることで、視覚的な親しみやすさを持たせることを意識しました。
制作時の工夫
見た目の刷新に加え、記事の探しやすさなどの使い勝手の面でも、いくつか工夫を取り入れました。
直感的に記事を探せるレイアウト
一番のポイントは、情報の配置と見せ方の見直しです。
今回のリニューアルでは、カテゴリー表示をより視認性の高いボタンデザインに変更し、目立つようにしました。ブログを訪れた方が興味を持っている分野（フロントエンド、バックエンドなど）の記事かどうかが、直感的に伝わるような見せ方を意識しています。
さらに、記事一覧のレイアウトをカード型に変更し、サムネイル画像を大きく配置しました。
サイドバーの「注目記事」「最新記事」にもサムネイルを表示するようにしました。以前よりも視覚的に記事を探しやすくなったことで、ブログ内の回遊性向上につながることを期待しています。
関連情報へのスムーズな導線
ブログを通じてドワンゴ教育事業に興味を持ってくださった方が、関連情報へスムーズにアクセスできるような導線の見直しも行いました。
ヘッダーやサイドバーに採用サイトなどの関連リンクを配置することで、「教育事業についてもっと知りたい」と思ったタイミングで、迷わず関連ページへ移動できるようにしています。
制作の裏側 〜プラットフォームの制約と工夫
最後に、今回のリニューアル制作の裏側についても少し触れたいと思います。
今回は、ゼロからWebサイトを構築するのではなく、既存のブログプラットフォーム（はてなブログ）を利用したリニューアルです。カスタマイズできる範囲にはどうしても制約があります。
そのため、本格的なデザイン作業に着手する前に「このデザインははてなブログ上で実現できるか？」を調査する必要がありました。
こうした調査やデザイン後の実装をスムーズに進めるために用意したのが、テスト用のブログとローカルでの開発環境です。
開発環境は、はてなブログ公式がカスタマイズ用に配布しているBoilerplateテーマを参考にViteベースで用意しました。ローカルでファイルを編集すると即座にテストブログに変更が反映されるため、効率的に検証や実装を進めることができました。
また、ヘッダーなどのカスタムHTMLは、はてなブログの管理画面に直接コードを記述する必要があります。
万が一の操作ミスによる消失や、意図しない上書きのリスクを抑えるため、今回はアセットやカスタマイズ用のHTMLデータも同じリポジトリに含めて管理することにしました。
このように、プラットフォーム特有の制約はありましたが、開発環境や管理方法を工夫することで、コードを安全に管理しつつ、理想のデザインを最大限追求できたと感じています。
おわりに
開発者ブログのリニューアルについて、デザインのコンセプトや制作時の工夫を中心にご紹介しました。今回のリニューアルが、より多くの方に記事を届けるきっかけになれば嬉しいです。
ドワンゴ教育サービス開発者ブログでは、今後も様々な知見や取り組みを発信していきます。
今後とも、ドワンゴ教育サービス開発者ブログをよろしくお願いいたします！
