本記事のサマリ
個人開発している「ハードシング」というTodoアプリのデザインが微妙だったので、Figma MakeにAtlassianのデザインシステムのガイドラインを読み込ませてデザイン修正を依頼してみました。結果は正直、期待したほどの改善は得られませんでした。余白の規則性という点では良くなりましたが、文字が小さくなり、コントラスト比が悪化するなど、エンタープライズ向けのデザインシステムをtoCアプリに適用することの難しさを痛感した実験記録です。
はじめに - デザインに悩む個人開発者
私は現在、「ハードシング」という個人開発のアプリを作っています。これは心理的にハードなこと、つまり「スカイダイビングをやってみる」「好きな人に告白する」といった、普通なら避けてしまいがちな挑戦を管理するTodoアプリです。
機能的には一通り完成していて、目標設定から進捗管理、候補タスクの管理まで一通り動くようになりました。でも、どうしても気になるのがデザインです。
エンジニアあるあるだと思うのですが、ロジックは書けるしAPIも設計できるけど、UIデザインがなんとなく「それっぽい」レベルで止まってしまう。グレーとホワイトでまとめて、青のアクセントカラーを使って、なんとなくモダンっぽく見せてはいるものの、どこか物足りない。
個人開発だからデザイナーを雇うほどでもないし、デザインの勉強をゼロから始めるのも時間がかかる。そんな時に思いついたのが、「優れたデザインシステムを借りてみる」という発想でした。
実験：Atlassianのデザインシステムを試してみた
デザインシステムといえば、Material Design、Apple Human Interface Guidelines、そしてAtlassian Design Systemあたりが有名です。その中でもAtlassianを選んだのは、こちらのXのポストを見たのがきっかけだったためです。
「ハードシング」も情報量が多めのアプリなので、Atlassianのアプローチが参考になるんじゃないかと考えました。
ただし、Figma Makeで活用するには、デザインシステムのガイドラインをテキスト形式で用意する必要があります。そこでClaudeとPlaywright MCPでクローリングです！
ClaudeでPlaywright MCPを使って、Atlassianの公式デザインシステムサイトをクローリングしました。色、タイポグラフィ、スペーシング、アクセシビリティまで、いい感じにテキスト化できました！
結果は以下のGistに保存しています：
デザイントークンの考え方から、具体的な色の値、8pxベースのスペーシングシステムまで、1つのファイルにまとまっています。
やったことはシンプル：コピペだけ
次に、このガイドラインをFigma Makeに設定します。手順は公式ドキュメントに書いてある通りです：
実際にやったことは本当にシンプルです。
- Figma Makeのコードタブを開く
- Guideline.mdファイルを作成
- 先ほどクローリングしたAtlassianのデザインシステムをコピペ
- 「このガイドラインに従ってデザインを改善して」と指示
これだけです！
ビフォーアフター：正直な感想
実際に生成された結果を見て、正直に言うと「劇的に変わった！」という感じではありませんでした。でも、よく見ると、確かに違いはあります。
各画面を改善前後で比較してみましょう。
概要・ダッシュボード画面
改善前
改善後
この画面では、「オンボーディング」「ダッシュボード」「進捗可視化」という3つのセクション構造になっています。
全体的に色がグラデーションから、プレーンなブルーに。
文字は小さく、余白は少し広くなったように感じます。マットなデザインになりましたね。
ハードシング登録・一覧画面
改善前
改善後
この画面では、「新しいハードシング」の設定エリアと「ハードシング一覧」が左右に配置されています。進行中のタスク「スカイダイビングをやってみる」が33%の進捗とともに表示され、候補タスクも並んでいます。
改善後は、全体的に文字が小さくなり、マットな印象に変わりました。確かに余白には規則性が生まれたものの、全体的な見た目としては、コントラスト比が悪くなった気がします。
全体を通しての感想
2つの画面を見比べてみると、正直なところ、思ったほどの改善は得られませんでした。
確かに余白の規則性という点では良くなった部分もあります。ただ、全体的に文字が小さくなり、マットな印象に修正された結果、かえってコントラスト比が悪くなってしまいました。
AtlassianはtoBのデザインシステムだからか、toCサービスのイメージとは少し違う感じがします。Atlassianのシステムは業務ツールやプロダクティビティアプリに最適化されているので、個人向けのモチベーション管理アプリには、そのまま適用するのは難しかったようです。
今回の実験では、あまりマッチしなかったというのが正直な所感です。ガイドラインの内容を見直して、もうちょっと修正をかけていきたいところです。
学んだこと：部分的な適用から始めるべきかも
この実験を通じて、デザインシステムの活用方法について重要なことを学びました。
全部を適用する必要はない
デザインシステムを「全部まるごと適用する」のではなく、自分のアプリに合う部分だけを選んで使うというアプローチの方が現実的です。
今回の場合、スペーシングシステムは明らかに効果がありました。一方で、カラーパレットは自分のアプリの雰囲気に合わなかった。だったら、余白だけAtlassianのシステムを採用して、色は自分で調整すればいいんです。
次回やるとしたら、こんな感じで進めると思います：
- まずはスペーシングだけ適用：8pxベースの余白システムだけをガイドラインに含める
- 結果を確認して、次の要素を検討：タイポグラフィ、エレベーション、ボーダーなど、1つずつ追加してみる
- 色は慎重に：カラーパレットは、アプリの性格に合わせて部分的に参考にする程度にとどめる
デザインシステムは「借りる」もの
デザインシステムは大企業だけのものではありません。ガイドラインをテキスト化すれば、Figma Makeのような AI ツールで活用できます。実際、私がやったのはクローリングとコピペだけです。
ただし、そのまま全部を適用するのではなく、自分のプロダクトに合う部分を「借りる」という感覚が大事だと思います。特に余白やタイポグラフィといった、プロダクトの個性に左右されにくい要素から始めるのが良さそうです。
個人開発では時間が限られているので、「この余白は適切か」といった迷いを減らせるだけでも大きな価値があります。デザインに悩む時間を機能開発に回せるのは、本当にありがたいことです。
まとめ
デザインに自信がない個人開発者が、優れたデザインシステムを参考にするのは確かに価値があります。
ただし、今回の実験で分かったのは、デザインシステムの選択とアプリの性格のマッチングが重要だということです。エンタープライズ向けのシステムをtoCアプリにそのまま適用しても、期待したような結果は得られませんでした。
Figma Make と AI ツールの組み合わせは確かに強力ですが、生成されたデザインをそのまま使うのではなく、「スペーシングだけ」といった形で、本当に効果のある部分だけを慎重に取り入れていくのが現実的です。
今回は正直、あまり満足のいく結果にはなりませんでした。でも、この失敗から学べたことも多いです。次はガイドラインの内容を自分のアプリに合わせて調整して、もう少し修正をかけていきたいと思います。
デザインシステムは万能ではないし、すべてのアプリに合うわけでもない。でも、部分的に借りるという考え方は間違っていなかったと思います。
個人開発でデザインに悩んでいる方は、こんな失敗もあるということを知った上で、試してみてください👍
参考リンク：
- Atlassian Design System: https://atlassian.design/
- 今回使用したガイドライン: https://gist.github.com/toto-inu/04d9dbfd3a7fd4f9539bcc761eea5589
- Figma Make ガイドライン設定方法: https://help.figma.com/hc/ja/articles/33665861260823
株式会社StellarCreate（stellar-create.co.jp）のエンジニアブログです。 プロダクト指向のフルスタックエンジニアを目指す方募集中です！ カジュアル面談で気軽に雑談しましょう！→ recruit.stellar-create.co.jp/
Discussion