こんにちは。エキサイトでデザイナーをしている齋藤です。
先日、弊社エンジニアの山縣がTECH Street主催のイベントにて、エキサイトブログのトップページを段階的にリプレイスした取り組みについて発表しました。
リプレイスの背景や段階的リリースに関する技術的な取り組みが紹介されています。
発表内容はこちらの記事からご覧いただけます。
本稿では、エキサイトブログトップページのリプレイスでデザイナーが担ったことをご紹介します。
2025年時点で20年以上続くサービスであり、歴史の積み重ねと向き合いながらのリニューアルとなりました。新規とは違った知見となったため共有をさせていただきます。
UI面で抱えていた課題
リプレイス前のアプリケーションはUI面で以下の課題を抱えていました。
- UIの一貫性
- デザイン原則のルール化がされておらず担当デザイナーの経験則に依存する状態
- コンポーネント指向なUI設計がされておらず、汎用的な要素（ボタンなど）でも微妙に意匠が異なる状態
- デバイスで異なるUI
- デスクトップ・モバイルで異なる情報量とデザイン
- レスポンシブデザインになっておらずソースもデバイスごと存在しているため拡張に労力がかかる状態
- アクセシビリティ
- フロントエンド
- 手製ユーティリティクラスを用いたスタイリングになっており運用コスト・新規メンバーのオンボーディングコストが高い状態
課題への取り組み
このプロジェクトはエンジニア2名、デザイナー1名（私）の体制で推進されました。
小さなチームで大きな仕事ですので、「あったら嬉しいもの」ではなく、まずは目の前のペインを解消することを重視して取り組みました。
UIの一貫性
デザイン原則のルール化がされておらず担当デザイナーの経験則に依存する状態となっていたため、デザインシステムの構築を行いました。
具体的には、カラーやタイポグラフィなどの基本のデザイン原則を定義したスタイルガイドと、汎用的な要素を中心としたコンポーネントライブラリを作成しました。
特にカラーに関しては、ブランディングとアクセシビリティ（WCAG 1.4.3など）のバランスを取りながら進める必要が合った点は、既存サービスならではの難しさでした。
また、デザインシステムがデザイナーだけで閉じることなく、フロントエンド実装を見据えたコミニュケーションツールとなるように、デザイントークンの概念も取り入れました。
デザイントークンについては以下の記事も合わせてご覧ください。
デバイスで異なるUI
デスクトップ・モバイルでソースが分かれており、異なる情報量とデザインとなっていました。
1つの要素を追加するにもデバイスごとに実装の必要があり、労力がかかる拡張性に乏しい状態を是正するため、レスポンシブデザインに移行しました。
情報に差がある状態であったため、取捨選択をビジネス側と相談しながら、30を超えるページとそれぞれが持つ状態の画面を1つづつUIの再定義を行いました。
一見大変そうな作業ではありますが、デザインシステムによりデザイントークン・コンポーネントを組み合わせたパズルのように設計ができるようになったため、効率良く正確に進められました。
アクセシビリティ
従来のアプリケーションでは、セマンティックなマークアップとなっていない部分が多く、またキーボード操作が不能だったりとアクセシビリティが担保されていない状態でした。
ハンディキャップを抱えるユーザーにもブログを楽しんでいただきたい思いもあり、Lighthouse reportのアクセシビリティスコアを100にすることを前提としたマークアップを行いました。
結果、これまで未対応だったキーボード操作が可能になったりと、より多くの方に届くサービスに一歩前進しました。
副次的な効果ですが、マークアップの見直しによりSEOのスコアも向上したりと、ビジネス的にもインパクトのある結果となりました。
フロントエンド
フロントエンドの技術選定やアーキテクチャ設計にも積極的に関与しました。
サービスの性質上基本的にはSSRであること、バックエンドエンジニアが中心でデザイナーがマークアップ・スタイリングをする体制であったことを踏まえて、バックエンドフレームワークに付随するテンプレートエンジンを中心とした構成を採用しました。
- テンプレートエンジン
- Thymeleaf
- CSSフレームワーク
- Tailwind CSS
- JavaScriptライブラリ
- Alpine.js
- htmx
既存のアプリケーションでは手製ユーティリティクラスを用いてスタイリングしており、運用コスト・新規メンバーのオンボーディングコストが高い状態が課題となっていたため、同じようにユーティリティベースでスタイリングできる上でドキュメントも充実していることから、Tailwind CSSの導入を決めました。
また、JavaScriptライブラリも、マークアップの延長線で扱える点を重視しました。
フロントエンド戦略については以下の記事で詳しく説明しておりますので、合わせてご覧ください。
さいごに
今回はエキサイトブログトップページのリプレイスでデザイナーが担ったことをご紹介しました。
特にリプレイスを期に行ったデザインシステム構築は、個に依存しがちだったUIのあり方を形式知へ昇華し、機能開発や変更に対応しやすい土台となりました。
システムリプレイスに取り組まれるデザイナーの方の一助となれば幸いです。ご精読ありがとうございました。
