モチベーション

個人開発における悩みと発見

個人開発を始めた当初は、技術のキャッチアップを目的としてさまざまなアプリケーションを作ってきました。しかし、フロントエンドの場合、ロジックや機能開発だけではなく、デザイン部分への配慮も必要になります。たとえば、どんなアプリでもほぼ確実に使われる フッター のようなパーツ一つをとっても、形やデザイン、配置のバランスなど検討事項は多岐にわたります。結果として、本来の目的である技術習得の時間が、デザインやUI調整へと割かれてしまうことが往々にしてありました。

例：技術キャッチアップの妨げ

小さなページごとにデザインを考え直す

後で統一感を取ろうとして再調整が発生

結局デザイン作業が増えてしまう

このデザインシステムで解決したいこと

こうした経験を経て、「最小限のUI構築で技術キャッチアップに集中できる環境」を作る必要性を強く感じました。色やタイポグラフィをあらかじめ標準化し、フッターやヘッダー、カードなど汎用的なUIをあらかじめ用意しておけば、最初からある程度形が整ったデザインを使うことができます。

時間の節約

フロントエンドのUIをゼロから作る手間を省き、本質的なロジックや機能の開発へ注力できる。

デザイン崩れの防止

基本となる色・タイポグラフィ・レイアウトを標準化することで、最小限の調整で一貫性あるUIが保てる。

アクセシビリティとデザインの基礎を学ぶ機会

さらに、単にデザインを“省力化”するだけでなく、アクセシビリティや色のコントラスト、タイポグラフィといったUIの基礎知識を実際に学ぶ機会も得られます。必要最低限のコンポーネントを洗練させる過程で、こうした概念を自然と意識する仕組みを目指しています。

アクセシビリティ ユーザー全員が使いやすいUIを目指すため、色のコントラストやキーボード操作への配慮など、基本的なガイドラインを踏襲。
タイポグラフィ・カラー 一貫したフォントサイズと行間、配色を標準で用意。どんなコンポーネントでも整った文字組みと配色が得られる。

Lit と React の両方をサポートする意義

また、標準Webコンポーネントを支えるLitと、多くのプロジェクトで利用されるReactの2つを採用する理由には、以下の思いがあります。

どちらの技術にも対応可能: プロジェクトや学習したい技術に合わせて柔軟に選択できる。
コンポーネントの再利用性向上: プラットフォームやフレームワークの制約を極力減らし、最大限の再利用を目指す。
多角的なキャッチアップ: ReactのエコシステムとWeb Components標準の両方を学びながら、UIデザインの基盤を共通化。

今後に向けて

個人開発を続けるなかで、より多くのコンポーネントを作成すると同時に、柔軟かつ統一性のあるUIを保っていくことを目指しています。また、利用できるコンポーネントのレパートリーが増えれば、個人開発でも「デザインシステム」を意識しながら開発できる文化が根付くと考えています。

ゴール：個人開発の自由度と効率性を両立

「もうデザインで悩まない」状況を作り出し、技術キャッチアップをスムーズに。

コンポーネントを活用して、プロジェクト全体の一貫性も担保。

より具体的なコンポーネント内容や使い方については、次のページをチェックしてください。あなたの開発に役立つUI要素がきっと見つかるはずです。