スタイルファンデーション
デザインシステムの始まり、UIデザインの中核
多くの企業がデザインシステムを導入し、より良い製品を作っています。
製品はますます複雑になり、チームメンバーはさまざまな役割とツールを使用しています。
この過程で一貫性と効率性を維持することが大きな課題になります。
デザインシステムは、この問題を解決するための強力なツールです。
その中でも鍵はまさにスタイルファンデーションです。
スタイルファンデーションは、色、ギャップ、フォントなど、最も基本的なビジュアル言語を整理して統一します。
私たちが毎日経験するコラボレーションの非効率性、デザインの不一致、メンテナンスの混乱を減らす
より良い結果をすばやく作成できます。
この講義では、スタイルファンデーションがなぜ重要なのか、
これをどのように活用できるかを簡単に説明します。
スタイルファンデーションがなければ？
スタイルファンデーションがあれば？
このような悩みがある場合は、聞いてみてください。
「なぜ2倍数、3倍数のイメージを使うのか分からない」
高いDPR環境で画像を鮮明に表現する方法とその理由を講義で詳しく学ぶことができます。
「基準解像度を決めるのはやっぱりです。どこを基準につかむべきでしょうか？」
さまざまなデバイスに対応するには、データに基づいて基準解像度を設定する必要があります。
その過程を実務中心にお知らせします。
”グリッド？どこから始めるべきか感がありません。」
グリッドの基本概念から、8の倍数を活用したグリッド計算法をお知らせします。
「文字サイズと行間をどのように設定すれば、読みやすさが良くなるのでしょうか？」
フォントが小さいか密に見えると、読みやすさが落ちるか心配になりましたか？
コンテンツの種類に合わせて文字サイズと適切な行間を設定する方法を学びます。
「なぜ4の倍数や8の倍数で間隔を設定するのか分からない」
ハーフピクセルの問題を解決し、完成度の高いデザインを作成する方法を学びましょう。
「デザイントークンが何で、なぜ必要なのかわからない」
デザイントークンが理解するのは難しいですか？
このレッスンでは、デザイントークンの概念と必要性を簡単に説明します。
デザインシステム、簡単に始めましょう。
デザイン悩み解決の糸口を提供します
なぜギャップを4の倍数に設定するのかと同じデザインをし、起こる悩みをはっきり解きます。学んだ内容をすぐに実務に適用でき、時間の無駄なく問題を解決できます。
デザインシステムを気軽に学ぶことをお勧めします
デザインシステムという巨大な概念を「スタイルファンデーション」という中核部分から学ぶので、初めて接する人も気軽に始めることができます。
初心者でも理解できる簡単な説明と例です。
複雑に感じられるデザイントークン、グリッドシステム、解像度設定などを簡単かつ明確に説明し、誰でも理解できます。デザイナーだけでなく、企画者や開発者もデザインシステムに対する理解度を高めるのに役立ちます。
詳細に設計システムについて説明します。
教材を提供します。
このような内容を学べます。
1.1 デザインシステムとは？
設計システムのわかりやすい例と説明により、設計システムの概念を理解することができます。
1.2 設計システムの構造
デザイン原則、スタイルファンデーション、コンポーネントとパターンライブラリ、コンテンツガイドライン、アクセシビリティガイドライン、デザイントークンの役割と活用方法を学びます。
2.1 スタイルファンデーションとは？
スタイルファンデーションの概念と必要性、そして長所と短所と継続的な管理の重要性を理解することができます。
2.2 デザイントークンとは？
デザイントークンの概念とスキームを理解し、デザイントークンを使用する理由を例に示します。
2.3解像度
解像度の概念、論理解像度と物理解像度の違い、DPRの役割を理解することができます。基準解像度の設定方法を学び、さまざまなデバイスに対応できます。
2.4 グリッド
グリッドの基本概念を学び、グリッドの計算方法とさまざまなデバイスでの活用方法を習得できます。
2.5 間隔
ハーフピクセルの問題を回避し、一貫したデザインを実装するための間隔を設定する方法を学ぶことができます。
2.6色
色の意味と役割を理解し、カラーパレットとセマンティックカラーの構成方法を学びます。
2.7 タイポグラフィ
タイポグラフィの重要性を理解し、タイポグラフィ要素とレタリングスタイルのコンポーネントを学ぶことができます。
2.8 高さ
高さ（Z軸）を活用して要素の重要度を表現し、さまざまな高さ区分表現法と使用事例を理解できます。
2.9 アイコン
一貫性を維持するためのアイコンデザインの原則を学ぶことができます。
2.10 イメージ
画像の割合とサイズを統一して、さまざまなデバイス環境で品質を損なうことなく表示する方法を学びます。
2.11 コーナー半径、ボーダー、シャドウ
エッジの半径、罫線、影の基準を設定することで、一貫性を維持する方法を学ぶことができます。
予想される質問 Q&A
Q. 非専攻者も聞くと役に立ちますか？
A.専攻とは無関係に、デザインの実務を知らないすべての人に役立ちます。
Q. 講義を聞く前に準備すべきことはありますか？
A. 別途ありません。
Q. ツールはどの程度扱うべきですか？
A. ツールを使用しません。実習講義ではありません。
受講前の注意事項
学習資料：教材PDF提供
![データアナリストなしでデータドリブンデザインを行う [データリアンセミナー見逃し配信 | 2025年11月]講義サムネイル](https://cdn.inflearn.com/public/files/courses/339608/cover/01kbpcbn9gv7ysm630hkz313gd?w=420)
