a-blog cms Ver.3.2をきっかけに、管理画面のスタイルガイドを整理した話
NEW
この記事は「a-blog cms Advent Calendar 2025」の17日目の記事です。
こんにちは！有限会社アップルップルでデザイナーをしている新井慎之介です。
今年も a-blog cms Advent Calendar に参加しています。普段はWeb・UI領域のデザインを担当しております。
この記事の概要
今年9月にリリースされた a-blog cms Ver.3.2 では、エントリー編集画面にブロックエディターユニットやグループユニットといった新たなユニットが導入されました。あわせてエントリー一覧画面にもさまざまな改修が行われ、管理画面のデザインは大きく進化しています。
本記事では、デザインが変わりつつある a-blog cms の管理画面について、現状をあらためて整理し、今後の開発をよりスムーズに進めるために、このタイミングでスタイルガイドの整備に取り組みました。個人的に進めた取り組みではありますが、実施して見えてきた成果や感じたことをまとめてご紹介します。
対象読者
- a-blog cmsの開発・デザインに関わる方
- CMSやプロダクト開発におけるUI整理に興味のある方
- スタイルガイド／デザインシステムに関心のある方
実施したこと
a-blog cms Ver.3.2 のUI制作がひと段落したタイミングで、Figma上にある管理画面向けのスタイルガイドを整理しました。これまでのUI制作の中で蓄積されてきたデザイン要素をあらためて見直し、今後の開発でも迷わず使える状態をつくることを目的としています。
まずは、既存の管理画面UIやデザインパーツを棚卸しし、どのようなスタイルが使われているのかを整理しました。その上で、Ver.3.2 の新しいUIで使用した要素も含め、ばらつきや重複がないかを確認しています。
最終的には、今後のUI開発を見据え、カラーや余白の使い方、タイポグラフィの考え方などを共通ルールとして再整理しました。新しい画面や機能が追加されても、デザインの方向性がぶれにくい状態を目指しています。
成果物について
今回の成果物は、Figma上で整備した管理画面向けのスタイルガイドです。UI制作に必要な基本要素をひとつにまとめ、すぐに参照・利用できる形で整理しました。
スタイルガイドには、カラー、スペーシング（余白）、タイポグラフィ、アイコンやUIパーツといった、管理画面を構成する要素を網羅的にまとめています。それぞれの項目について、役割や使いどころが分かるよう整理し、UI設計時の判断に迷いが生じにくい構成にしました。
また、「今すぐ使える」ことを意識し、スタイルガイドに含めた各項目は Figma のバリアブル機能にも登録しています。デザイン作成時にはスタイルを選択するだけで適用できるため、UI制作をスムーズに進められる状態になっています。
カラー（Color）
- 管理画面で使用している色の棚卸し
- 役割ごとの整理（ベース、アクセント、状態色 など）
- UI内での使用意図が分かる構成に整理
タイポグラフィ（Typography）
- フォントファミリー、サイズ、ウェイトの整理
- 見出し・本文・ラベルなど用途別の定義
スペーシング（Spacing）
- 既存UIとVer.3.2の新しいUIで使用した余白の整理
- 今後のUI設計で使用する余白の基準を定義
ボーダー・角丸・エレベーション
- Border width / Border radius の整理
- メニューやドロワーなどで使用するエレベーションの階層構造を整理
アイコン（Icon）
- 管理画面で使用しているアイコンの整理
- a-blog cms icon と Material Icons の使用状況の整理
実施してよかったこと・得られた成果
デザインパーツの整理 ― 現状を正しく把握できた
今回スタイルガイドを整備してまず感じたのは、「現状を正しく把握できたこと」そのものが大きな成果だったという点です。
これまでUI制作を進める中で自然と増えていったカラーや余白、文字サイズなどのスタイルをあらためて棚卸ししたことで、「何が」「どれくらい」存在しているのかを具体的に把握できるようになりました。
整理を進める中で見えてきたのは、スタイルの細かな違いや重複です。
似たような色や余白、用途が曖昧なスタイルが複数存在しており、スタイルレベルでのばらつきが可視化されました。
これまでは「なんとなく違和感がある」と感じていた部分も、実際に一覧として並べてみることで、どこに整理の余地があるのか、どこを基準にすべきかを冷静に判断できるようになりました。
スタイルガイドの整備は、単にルールを作る作業ではなく、これまで積み重ねてきたUIの状態を正しく理解するための作業でもあると実感しています。
効率性が生まれた ― すぐにUIを作れる状態に
スタイルガイドを整備して特に実感したのが、UI制作にかかる迷いが大きく減ったことです。
これまでは、新しい画面や機能を設計する際に、「この色でよいか」「余白はどれくらいが適切か」といった細かな判断を、その都度考えながら進める場面が多くありました。こうした小さな判断の積み重ねが、UI制作全体のスピードに影響していたと感じています。
スタイルガイドを整備したことで、カラーやタイポグラフィ、スペーシングといった基本要素について、あらかじめ選択肢が用意された状態になりました。Figma上でスタイルを選ぶだけでUIを組み立てられるため、「考える前に手を動かせる」状態に近づいたと感じています。
結果として、UI制作のスピードが向上しただけでなく、設計の初期段階から画面全体のバランスを意識しやすくなりました。スタイルガイドは、単なるルール集ではなく、UI制作を前に進めるための土台として機能していると実感しています。
一貫性を保てるようになった ― デザインの方向性が明確に
スタイルガイドを整備したことで、a-blog cms の管理画面におけるデザインの方向性を、明確に示せるようになったと感じています。
これまでは、新しいUIを追加する際に「既存の画面と比べて違和感はないか」「これまでのUIと揃っているか」といった点を、感覚的に判断する場面が少なくありませんでした。
スタイルガイドを通して、カラーや余白、タイポグラフィの考え方を整理したことで、「a-blog cms の管理画面として、どうあるべきか」を言語化できるようになりました。これにより、デザインの判断を個人の感覚に頼らず、共通の基準に基づいて行えるようになっています。
新しいUIを追加する際も、「このスタイルはガイドラインに沿っているか」「既存のルールの延長として成立しているか」といった観点で判断できるため、設計時の迷いが減りました。
結果として、画面や機能が増えても、管理画面全体としての統一感を保ちやすくなり、長期的にUIを育てていくための基盤ができたと感じています。
属人化の防止 ― UIを支える共通の指針ができた
a-blog cms Ver.3.2 以降、管理画面のUIは少しずつ変化しています。新しいユニットの追加や画面構成の見直しが進む中で、「これからどんな方向にUIを育てていくのか」という指針が、より重要になってきました。
今回スタイルガイドを整備したことで、Ver.3.2 以降のUIにおける共通の判断基準を持てるようになったと感じています。これにより、特定の人の感覚や記憶に頼らず、誰がUIを設計しても同じ方向を向いて判断できる状態に近づきました。
また、スタイルガイドとして整理した内容は、今後UIを追加・改善していく際の土台として機能します。ルールが明文化されていることで、「なぜこのデザインなのか」を後から振り返ることもでき、UIの統一感を保ちやすくなります。
スタイルガイドの整備は、目に見える変化こそ少ないものの、長期的にプロダクトを育てていく上で欠かせない取り組みだと改めて実感しました。
参考にした書籍・デザインシステム
今回のスタイルガイド整備を進めるにあたり、デザインシステムの考え方や実務への落とし込み方を学ぶため、いくつかの書籍やデザインシステムを参考にしました。
書籍『Figma for デザインシステム』
https://amzn.asia/d/0A7Ubu2
デジタル庁 デザインシステム
Material Design
さいごに
今回、a-blog cms Ver.3.2 のUI制作をきっかけにスタイルガイドの整備に取り組み、あらためて 「スタイルを整理すること自体が、プロダクトを理解することにつながる」 と感じました。
カラーや余白、タイポグラフィといった基本要素を整理する中で、これまで感覚的に使っていたスタイルを言語化でき、現在の a-blog cms が持つデザインの特徴や方向性を、自分自身でもはっきりと捉えられるようになりました。
また、スタイルガイドを Figma のバリアブル機能とあわせて整備したことで、「ルールを決めて終わり」ではなく、日々のUI制作の中で自然と使われ続ける仕組みをつくれた点も大きな学びです。
今後は、今回整理したスタイルガイドを土台として、コンポーネント単位での整理やルールの拡張にも取り組んでいきたいと考えています。UIの変化にあわせてスタイルガイドも更新し続け、a-blog cms の管理画面を、より使いやすく、育てていける状態を目指していきます。
スタイルガイドの整備は地味な作業ではありますが、長期的にプロダクトを成長させていくためには欠かせない取り組みだと実感しました。この記事が、同じようにUIやプロダクトを育てている方にとって、少しでも参考になれば嬉しいです。
明日の Advent Calendar
明日の「a-blog cms Advent Calendar 2025」18日目は、桐田さんです！
