HCYDS：個人ポートフォリオサイト用デザインシステム

🌐

本文章はAIによる自動翻訳に基づいて作成されています。

コンテンツの充実に伴い、2022年に設計された初代のデザインシステムでは、現在の多様なニーズに十分対応することが困難になってきました。また、当時の自身のデザインおよび開発スキルの経験不足もあり、カラーパレットの設計、機能の拡張性、およびアクセシビリティといった面で、一定の制約や課題が存在していました。

そのため、本プロジェクトでは、現行の機能要件と既存のデザインシステムの制限を包括的に洗い出し、それを踏まえて次世代のデザインシステムを再構築することを目的としています。

初代デザインシステムの課題

カラー設計

初代のデザインシステムでは、ターキッシュブルー（Turkish Blue）をメインカラーとして定義し、モリグリーン（Mori Green）およびサンドオレンジ（Sand Orange）をサブカラーとして位置付けていました。

しかし、当時はメインカラーに対して「ライト・ミディアム・ダーク」の3段階しか用意されておらず、さらに明確なセマンティックトークン（semantic token）構造が存在していなかったため、実際の運用においては以下のような課題が発生していました：

各色の用途が識別しづらく、使用に一貫性がない
状態変化（例：Hover、Active）など多様なUIコンポーネントの文脈に対応できない
色の使い分けにおける混乱

一方、モリグリーンやサンドオレンジといったサブカラーについては、装飾的な用途のライトトーンや、ランダムかつ不規則なバリエーションしか設計されておらず、本来期待される役割を果たすことができない状態となっていました。結果として、色の意味や用途が曖昧になり、拡張性の低さが顕在化しました。

また、本文やUI内のテキストに使用されるグレースケールのカラーパレットにもいくつかの問題が存在します。まず、13段階で設計されたこのグレースケールは、正確な輝度管理がなされておらず、前述のサブカラーとの対応が困難でした。

この欠点は、特にダークモードにおけるカラー変換設計に深刻な影響を及ぼしています。さらに、当時はWCAGのコントラスト比基準やセマンティックトークン構造が考慮されていなかったため、類似したグレーが同じ意図の文脈で誤って使用されたり、アクセシビリティ基準を満たさないという問題も見受けられました。

第一代謝承邑個人網站設計系統 HCYDS 色盤 — 元の設計では、グレースケールの明度管理が不十分で、他の補助カラーについても十分なカラースケールが用意されていなかったため、さまざまなUI状況における柔軟な活用が難しく、汎用性が制限されていました。

タイポグラフィ（Typography）

本ウェブサイトで使用されているフォントサイズは、4の倍数に基づいたスケール設計に準拠しています。しかし、現在のルールの中には一部、一般的な倍数に該当しないサイズ（例：100、120）も含まれており、設計の一貫性を損なっています。

また、現行の36pxと40pxのサイズは、どちらも見出し（ヘッダーレベル）に該当するサイズでありながら、サイズ感が非常に近く、実際の使用において明確な区別が難しいため、意味のない設計になっているという課題があります。

第一代謝承邑個人網站設計系統 HCYDS 文字大小 — 旧バージョンのタイポグラフィ設計には、一般的な設計慣例に沿わないフォントサイズの定義がいくつか存在していました。

その他

初代デザインシステムでは、マージン・パディング、角丸（ボーダー半径）、線の太さ、シャドウ（影）といった要素が設計段階で考慮されておらず、これにより、これらのデザインプロパティに関する共通ルールが欠如しており、UI全体の整合性に影響を与えています。

トークン構造

初代デザインシステムでは、--gray-50 や --mori-green などのCSSカスタムプロパティ（変数）は存在していたものの、それらは主に色に関する定義に限られており、マージン、角丸、線幅などのWebデザインにおける他の重要要素には対応していませんでした。

さらに、現在定義されている変数はベーストークン（base token）として機能しているだけで、セマンティックトークン（semantic token）の概念が導入されておらず、これにより、使用意図が不明確で拡張性に乏しい設計となるリスクが内在しています。

第2世代デザインシステムの設計方針

コンセプト

既存のデザイン言語とスタイルを継承し、視覚的変化を最小限に抑えつつ、論理的で明確かつ使いやすいデザインシステムを構築することで、既存体験の改善とデザイン・開発両面の負担軽減を図る。
現在使用されているカラー、タイポグラフィ、スペーシング、ボーダー半径などのユースケースを整理・棚卸しし、不整合のあるデザインに対してルールを再定義・調整を行う。
将来的な多様なニーズに対応できる高い拡張性を備えたデザインシステムを目指す。
アクセシビリティ（可用性）を重視し、より親しみやすい閲覧体験を提供する。

ベース設計

第2世代デザインシステムでは、業界で広く使用されている「Tailwind CSS」の仕様をベースとし、そこにカスタムデザイン要素を追加する形で構築を行っています。このアプローチには、デザイン・開発の双方において以下のような利点があります：

開発面では、柔軟性が担保され、開発効率と再利用性の向上が期待できる。

デザイン面では、すべてを一から設計する必要がなくなり、負担を大幅に軽減できる。また、カスタム定義外のケースでも、Tailwindの既存の設計指針に準拠することで、一定の一貫性を確保できる。

新しいデザインシステムでは、Tailwind CSSをベースに採用しました。これにより、柔軟なカスタマイズ性を確保しつつ、想定外のユースケースにおいても信頼性のある設計基準を参照できる構造となっています。

第2世代デザインシステムの構成一覧

カラー設計

「カラースケールの不足」は、初代デザインシステムにおける主な課題の一つでした。そのため、第2世代のデザインシステムでは、既存のターキッシュブルー（Turkish Blue）、サンドオレンジ（Sand Orange）、モリグリーン（Mori Green）をすべて11段階のスケールに拡張し、さらにレッド、イエロー、パープルの3つの色相を追加。これにより、エラーステート、警告、特殊な用途などの明確なルールを整備しています。

第二代謝承邑個人網站設計系統 HCYDS 色盤一覽 — 第2世代では、すべてのカラースケールを11段階に拡張し、さらにOKLCHカラーモデルをベースにした正確な明度コントロールを導入することで、色の置き換えが容易に行える柔軟な配色設計を実現しました。

異なる色相間でも同じ色階（スケール）における輝度を統一するため、そして最終的にアクセシビリティに配慮した配色設計を実現するために、本システムではOKLCHカラー空間を採用しています。OKLCHは、HSLとは異なり「知覚的明度（perceptual lightness）」に基づいて色を表現するため、色相が異なっても同じスケールの色であれば視覚的な明るさとコントラストが近くなり、結果として色を置き換えてもアクセシビリティを損なう心配が少ないという大きな利点があります。

色の明度が適切に制御されることで、UIコンポーネントのホバー（Hover）、アクティブ（Active）、無効状態（Disabled）などの状態を設計することが非常に簡単になります。たとえば、セマンティックトークン surface 系の中でよく使用される surface-brand は、ターキッシュブルーの600番（主色）を基準にしています。この状態のバリエーションとして、ホバーやアクティブ状態はそれぞれ surface-brand-hover、surface-brand-active のように簡潔に定義できます。

また、OKLCHの知覚的明度特性により、従来実現が難しかった「ダイナミックカラー設計」も可能になりました。本ウェブサイトにおける「プロモーションコンテンツ」ブロックでは、このダイナミックカラーを活用しています。各コンテンツに対して主色を指定するだけで、プログラム側が自動的に適切なカラースケールを算出し、より没入感のあるパーソナライズドな体験を提供します。

※Figmaでの利用を考慮し、すべてのカラールールはHEX値で定義されています。使用されている色はsRGBカラー空間内に収まっているため、最終的なビジュアル表現に影響はありません。

第二代謝承邑個人網站設計系統 HCYDS 動態推廣內容色彩設計 — 前述の明度コントロール設計により、異なるメインカラーに応じた領域カラーをプログラムで自動的に算出できるようになり、アクセシビリティを損なうことなく柔軟な配色展開が可能になりました。

タイポグラフィ（Typography）

ベーストークンとしては、Tailwind CSSで定義されているフォントサイズのスケールを採用しています。その上で、第2世代デザインシステムでは、独自に設計された「動的タイポグラフィ（Dynamic Typography）」のセマンティックトークンを導入しました。

この仕組みにより、ウィンドウサイズが1024px未満になった場合、すべての文字サイズは最大で48pxまでの範囲にリマッピングされます。これらの動的な文字サイズは、本サイトにおける14種類のテキストスタイルにそれぞれ対応するセマンティックCSSクラスとして実装されており、以下のような利点があります：

開発時に「どのクラスを使えばよいか分からない」という混乱を回避できる
自動的にレスポンシブデザイン（RWD）に対応したタイポグラフィが実現できる

このように、Tailwindのスケールを活かしつつ、カスタマイズ性と可読性を両立した柔軟なタイポグラフィ設計を可能にしています。

スペーシング（Spacing）

第2世代のスペーシング設計は、タイポグラフィと同様の論理構造を採用しています。まず、Tailwind CSSで定義されたスペーシングスケールをベーストークンとして使用し、そこからカスタムの「動的スペーシング（Dynamic Spacing）」セマンティックトークンを開発しました。

この仕組みにより、すべてのスペーシングがウィンドウサイズに応じて自動的に調整され、レスポンシブに対応できます。また、自動調整の結果が特定のUI状況に合わない場合には、ベーストークンを直接指定してカスタマイズすることも可能です。

その他

Spaciiingでデザインシステム開発を加速

第2世代デザインシステムの開発・改善を進める中で、私は自作のFigmaプラグイン Spaciiing を活用し、設計効率を大きく向上させました。

従来のフローでは、「スタイルガイドの作成」は最も手間のかかる工程でした。デザインとドキュメントの整合性を常に手動で確認し、説明文の更新も煩雑で、Figmaの変数機能導入後はその複雑さがさらに増していました。

この課題に対処するために開発したのが Spaciiing です。このプラグインを使うことで、現在のスタイルや変数を動的に読み取り、視認性の高いドキュメントを即座に生成できます。下図のように、Spaciiingはカラー、数値、テキストスタイルなど幅広い形式に対応し、変数が参照するルート変数名まで自動で表示されるため、手作業の繰り返しから解放され、設計・開発の両面で作業スピードと精度が大幅に向上しました。

もしご興味があれば、Figmaコミュニティよりぜひお試しください。