3日間フルアクセスを試す
オーディオ再生などの機能を解放！
重要ポイント
1. レイアウトではなく機能から始める
新しいデザインに取り組む際に「アプリ全体をデザインしよう」と考えると、挫折しやすく行き詰まる。まずは機能に注目することが肝要だ。アプリの全体レイアウトや「枠組み」ではなく、特定の機能や操作部分の設計から始める。この方法により、実際のコンテンツやユーザーのニーズに基づいたナビゲーションや構造の判断が可能になる。例えば、航空券予約サービスを設計する場合、出発地・目的地の入力欄、日付選択、検索ボタンといった基本要素から着手するのが望ましい。
早まった決定を避けるためにも、機能を優先することでナビゲーションやレイアウトなどの構造的要素について未熟な判断を防げる。この手法は、アプリの核となる機能から自然に発展するユーザー中心のデザイン構築に役立つ。
2. 色を加える前にグレースケールで設計する
グレースケールでデザインすることで、スペーシングやコントラスト、サイズがデザインの要となる。色に頼らず、構造と階層を重視することが求められる。
まずはグレースケールでレイアウトや間隔、コントラストに集中し、デザインの基盤を固める。色は複雑さを増すため、基礎がしっかりしてから戦略的に導入するのが効果的だ。
- 基本的なワイヤーフレームやスケッチから始める
- グレースケールでレイアウトと間隔を調整する
- コントラストとサイズで明確な視覚的階層を確立する
- コアデザインが固まってから色を加える
3. サイズ・ウェイト・コントラストで視覚的階層を作る
視覚的階層とは、インターフェース内の要素が互いにどれほど重要に見えるかを示すものであり、デザインらしさを生み出す最も効果的な手段だ。
複数の手法を組み合わせて階層を作る。フォントサイズだけに頼らず、太さや色の違いも活用する。例えば、重要な要素は太字や濃い色で強調しつつ、サイズは適度に保つ。
文脈に応じて階層を調整することも重要だ。
- 見出し：大きめのサイズ、太字
- 本文：中程度のサイズ、標準の太さ
- 補助テキスト：小さめのサイズ、薄い色
- コールトゥアクションボタン：対照的な色、太字テキスト
階層は目立たせるだけでなく、重要度の低い要素を控えめにしてユーザーの視線を誘導する役割も担う。
4. 影とレイヤーで奥行きを演出する
影は単なる派手な効果ではなく、仮想的なZ軸上に要素を配置し、意味のある奥行きを生み出すために用いることができる。
影は意図的に使うべきだ。影の大きさや濃さの体系を作り、デザイン全体で一貫して異なる高さや重要度を表現する。
- 小さな影：わずかに浮いた要素（例：ボタン）
- 中くらいの影：浮遊感のある要素（例：ドロップダウンメニュー）
- 大きな影：モーダルダイアログや目立つ要素
また、要素を重ねてレイヤー感を出すことで視覚的な興味を引き、情報の階層化にも役立つ。
- カードを背景に少しずらして重ねる
- 要素をコンテナの外にはみ出させる
- 重なり合う画像を「見えない境界線」で区切る
5. 一貫した間隔とサイズのシステムを使う
シンプルな方法として、基準となる値を決め、それを元に倍数や係数でスケールを作る。
スケールを確立することで視覚的な調和が生まれ、選択肢が絞られてデザイン作業が効率化される。例えば、基準値を16pxとし、その倍数や分数でサイズや間隔を設定する。
このスケールは以下に適用する。
- マージンやパディング
- 要素のサイズ（ボタンや入力欄など）
- グリッドの間隔
- タイポグラフィ（行間や段落間）
一貫したシステムを守ることで、まとまりのあるデザインが生まれ、意思決定の負担も軽減される。柔軟性を持たせつつも過剰にならないバランスが重要だ。
6. 適切な書体を選び、タイプスケールを設定する
UIデザインでは、比較的中立的なサンセリフ体が無難だ。Helveticaのような書体を想像するとよい。
読みやすく、様々なサイズで使える書体を選ぶことが大切だ。考慮すべき点は以下の通り。
- 小さいサイズでも判読性が高いか
- ウェイトやスタイルのバリエーションがあるか
- 文字セットが充実しているか
- ライセンスや使用権の問題がないか
タイプスケールを作成し、デザイン全体で一貫したフォントサイズを使う。これにより視覚的な調和が保たれ、作業効率も向上する。
- 基準サイズ（例：本文16px）から始める
- 見出しやキャプション用に5〜8段階のサイズを用意する
- 非線形スケール（例：12, 14, 16, 20, 24, 32, 48px）で柔軟性を持たせる
7. 包括的なカラーパレットを作る
良いカラーパレットは大きく三つのカテゴリーに分けられる。
多用途なカラーパレットを構築し、以下を含める。
- グレー系：テキスト、背景、UI要素用に8〜10段階
- プライマリーカラー：ブランドカラーやアクション用に5〜10段階
- アクセントカラー：ハイライト、警告、データ可視化用の追加色
色彩心理も考慮し、ブランドの個性や適切な感情を喚起する色を選ぶ。
- 青：信頼感、プロフェッショナル
- 緑：成長、前向きさ
- 赤：緊急性、重要性
アクセシビリティを確保し、テキストと背景のコントラストが十分であるか必ずテストすること。
8. 画像は判読性とインパクトを最適化する
画像上にテキストを置く場合、テキストと背景のコントラストを安定させるために画像のダイナミクスを抑える必要がある。
画像とテキストのコントラストを高めるために、以下の方法を用いる。
- 画像のコントラストを下げる
- 半透明のオーバーレイを追加する
- カラーフィルターで画像をデザインに馴染ませる
- 微妙なテキストシャドウやグローを使う
ユーザー生成コンテンツを扱う場合は、
- アスペクト比やサイズを統一する
- 画像と背景を分けるために控えめな境界線や影を使う
- 画像がない場合や問題がある場合のフォールバックスタイルを用意する
これらの手法により、可変するコンテンツにも対応しつつデザインの一貫性を保てる。
9. 細部にこだわり、洗練された印象を与える
新しい要素を追加しなくても、既存のものを「強化」することでページを活気づける方法は多い。
標準的なUI要素を工夫して視覚的な魅力を高める。
- デフォルトの箇条書きをカスタムアイコンに置き換える
- テストモニアルの引用符をスタイリングする
- チェックボックスやラジオボタンをカスタムデザインにする
- カードやセクションにアクセントボーダーを加える
また、背景にさりげない装飾を施して単調さを打破する。
- 微妙なグラデーションやパターンを背景に使う
- セクションごとに異なる背景色を用いる
- 軽いテクスチャや控えめなイラストを加える
これらの小さな工夫が、レイアウトを大きく変えずにデザイン全体の洗練度とプロフェッショナリズムを大幅に向上させる。
レビューまとめ
『Refactoring UI』は、その実践的で簡潔なUIデザイン手法が高く評価されている。特にデザインスキルを向上させたい開発者にとって有益であると多くの読者が感じている。本書は明快な例示や役立つヒントを豊富に盛り込み、複雑な概念をわかりやすく解説している点が称賛されている。読者は、一貫性のある機能的なデザインの構築や効果的なデザインシステムの構築に焦点を当てている点を評価している。経験豊富なデザイナーの中には基本的すぎると感じる者もいるが、多くはデザインの背景に関わらず、ウェブやアプリ開発に携わるすべての人にとって必携のリソースとみなしている。
他の人が読んだ本
100 Things Every Designer Needs to Know About People
Lean UX
Applying Lean Principles to Improve User Experience
Don't Make Me Think, Revisited
A Common Sense Approach to Web Usability
Disciplined Entrepreneurship
24 Steps to a Successful Startup
Articulating Design Decisions
Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience
SPRINT 最速仕事術――あらゆる仕事がうまくいく最も合理的な方法
Design Is Storytelling
Atomic Design
User Friendly
How the Hidden Rules of Design Are Changing the Way We Live, Work, and Play
Code
The Hidden Language of Computer Hardware and Software
よくある質問
What's "Refactoring UI" about?
- Design principles for developers: "Refactoring UI" by Adam Wathan provides practical design advice specifically tailored for developers who may not have formal design training.
- Focus on UI improvement: The book emphasizes improving user interfaces by focusing on hierarchy, layout, color, and typography.
- Actionable tips and techniques: It offers actionable tips and techniques to make interfaces more visually appealing and user-friendly.
- Systematic approach: The book encourages a systematic approach to design, helping readers create consistent and efficient UI designs.
Why should I read "Refactoring UI"?
- Enhance design skills: If you're a developer looking to improve your design skills, this book provides clear, practical guidance.
- Bridge the gap: It helps bridge the gap between development and design, making it easier to create aesthetically pleasing and functional interfaces.
- Time-saving techniques: The book offers time-saving techniques and systems that streamline the design process.
- Real-world examples: It includes real-world examples and case studies that illustrate the application of design principles.
What are the key takeaways of "Refactoring UI"?
- Start with features: Begin designing with a focus on features rather than the overall layout to avoid frustration and inefficiency.
- Hierarchy is crucial: Establish a clear visual hierarchy to make interfaces more intuitive and user-friendly.
- Limit choices: Define systems for colors, fonts, and spacing to reduce decision fatigue and maintain consistency.
- Emphasize simplicity: Avoid over-designing and focus on creating the simplest useful version of a feature.
How does "Refactoring UI" suggest starting a design?
- Feature-first approach: Start with a specific feature rather than the entire layout to gather necessary information for design decisions.
- Example of flight booking: For a flight booking service, begin with the search functionality, including fields for departure and destination cities.
- Avoid shell design: Avoid starting with the app's shell, such as navigation bars, until features are defined.
- Iterative process: Use an iterative process to refine features and layout as more information becomes available.
What does "Refactoring UI" say about visual hierarchy?
- Not all elements are equal: Recognize that not all elements in an interface hold the same importance and should be styled accordingly.
- Use size wisely: Avoid relying solely on size to establish hierarchy; use font weight and color to emphasize important elements.
- De-emphasize to emphasize: Sometimes, de-emphasizing less important elements can make the main elements stand out more.
- Separate visual and document hierarchy: Ensure that visual hierarchy is distinct from document hierarchy to maintain clarity.
How does "Refactoring UI" recommend using color?
- Ditch hex for HSL: Use HSL color values for more intuitive adjustments based on hue, saturation, and lightness.
- More colors than expected: Prepare a comprehensive palette with multiple shades for greys, primary, and accent colors.
- Define shades upfront: Establish a fixed set of shades to avoid inconsistencies and maintain a cohesive color scheme.
- Accessible design: Ensure color choices meet accessibility standards without compromising aesthetics.
What does "Refactoring UI" suggest about layout and spacing?
- Start with too much space: Begin with excessive white space and reduce it to achieve a clean and balanced design.
- Establish a spacing system: Use a non-linear scale for spacing and sizing to simplify decisions and maintain consistency.
- Don't fill the screen: Avoid using the entire screen width unnecessarily; give elements the space they need.
- Grids are overrated: Use fixed widths for elements when appropriate, rather than relying solely on fluid grid systems.
How does "Refactoring UI" address typography?
- Establish a type scale: Define a type scale with a range of font sizes to ensure consistency and speed up decision-making.
- Avoid em units: Use px or rem units for font sizes to maintain consistency across different contexts.
- Good font selection: Choose fonts with multiple weights and optimize for legibility, especially for UI text.
- Line length and alignment: Keep line lengths between 45-75 characters and align text for readability.
What are some design systems recommended in "Refactoring UI"?
- Color systems: Define a comprehensive color palette with multiple shades for each color to maintain consistency.
- Typography systems: Establish a type scale with specific font sizes and weights to streamline text styling.
- Spacing systems: Use a non-linear scale for spacing and sizing to simplify layout decisions.
- Shadow systems: Define a set of shadows to convey elevation and depth consistently across the UI.
How does "Refactoring UI" suggest creating depth in design?
- Emulate a light source: Use light and shadow to create the illusion of depth, making elements appear raised or inset.
- Shadows for elevation: Use shadows to position elements on a virtual z-axis, enhancing the sense of depth.
- Flat design depth: Even in flat designs, use color and solid shadows to convey depth without relying on gradients or textures.
- Overlap elements: Create layers by overlapping elements, adding a sense of depth and complexity to the design.
What does "Refactoring UI" say about working with images?
- Use high-quality photos: Choose professional or high-quality stock photos to enhance the design.
- Consistent text contrast: Ensure text on images maintains consistent contrast for readability.
- Intended size for images: Use images at their intended size to avoid quality loss and maintain clarity.
- User-uploaded content: Control the shape and size of user-uploaded images to maintain layout integrity.
What are the best quotes from "Refactoring UI" and what do they mean?
- "Start with a feature, not a layout": Focus on designing specific features first to gather necessary information for layout decisions.
- "Hierarchy is everything": Establishing a clear visual hierarchy is crucial for making interfaces intuitive and user-friendly.
- "Limit your choices": Define systems for design elements to reduce decision fatigue and maintain consistency.
- "Accessible doesn’t have to mean ugly": Ensure designs meet accessibility standards without compromising aesthetics.
