最近、今後作る自作アプリのUIを整理したくて、Design Systemを作り始めました。
同時に、このブログにも適用できる形にして、見た目の統一感を出したいと思っています。
この記事は「Design Systemをしっかり理解してから作った話」ではなく、
正直よくわかっていない状態から、とにかく作ってみた記録です。
背景：なぜ作ろうと思ったか
1. 自作アプリのUIを整理したかった
アプリを作るたびに、色や余白、ボタンの見た目が微妙にズレていくのが気になっていました。
「毎回その場で決める」状態だと、後から直すコストが大きくなります。
そこで、以下のような共通ルールをまとめるためにDesign Systemを作ることにしました。
- カラートークン
- タイポグラフィ
- 余白・サイズの基準
- ボタンやカードなどの基本コンポーネント
2. ブログの見た目もスッキリさせたかった
このブログ自体も、細かい装飾や不要な要素が増えて、少し散らかった印象になっていました。
Design Systemをブログにも適用すれば、次のような効果があると考えています。
- 必要な要素だけを残す
- 見た目を整理する
- アプリとブログのトーンを揃える
3. 仕事にも少し活かせるかもしれない
業務では、実装に対してデザインを専門で見られるメンバーが不足している場面もありました。
だからこそ、まずはプライベートで実践しながらデザイン設計の感覚を掴み、うまくいけば仕事にも転用できたらと考えています。
たとえば、デザインの統一をしやすくしたり、プロジェクトごとにバリエーションを作りやすくしたり。
さらに、AIに意図を伝えるときにも、人が実装するときにも、流用しやすい形にできれば開発効率の向上につながるかもしれません。
まだかなりふわっとした段階ですが、個人で試したことが仕事にも活きるなら面白いなと思っています。
今回やったこと（ざっくり）
今回は「完璧に設計する」よりも、最小限の土台を作ることを優先しました。
- デザインの基礎となるトークンを定義
- UIの基本パーツを再利用しやすい形で整理
- ブログ側にも適用できるようにスタイルを見直し
- 不要な装飾を減らして、シンプルな方向へ調整
まだ途中ですが、「何を共通化できるか」が見えるだけでも前進した感覚があります。
正直なところ：まだよくわかっていない
ここは正直に書いておきたいです。
今の時点で、Design Systemの運用イメージを完璧に持てているわけではありません。
むしろ今回は、
まず作ってみる
↓
使いながら理解する
↓
必要に応じて育てる
という順番で進めています。
最初から正解を狙うより、実際に触って改善した方が自分には合っていると感じました。
Design Systemの利点をどう捉えるか（現時点）
使い始めて見えてきた利点は、今のところ次の3つです。
-
判断コストが減る
「このボタン何色にする？」のような迷いが減る。 -
見た目の一貫性が出る
アプリやブログをまたいでも、同じプロダクトとして見える。 -
後から直しやすい
ルールがまとまっていれば、全体調整がしやすい。
今後の展望（まだ仮）
正直、明確なロードマップはまだありません。
ただ、次の方向性は考えています。
- 実際に使いながら、必要なコンポーネントを追加する
- ブログデザインをさらにミニマルに寄せる
- トークンやコンポーネントの命名ルールを整備する
- 「なんとなく決める」を減らして再利用性を高める
つまり「大きな理想を先に決める」より、
運用しながら育てるDesign Systemにしていきたいです。
まとめ
Design Systemは、今の自分にとって「完成された設計思想」ではなく、
UIを整理し続けるための土台として作り始めたものです。
まだ手探りですが、
- 自作アプリのUIを整える
- ブログの見た目をスッキリさせる
- 全体の統一感を出す
という目的に対しては、すでに手応えがあります。
これからも使いながら更新して、
「自分の制作に合ったDesign System」に育てていくつもりです。