Category: Design

Smashing Magazine は Web デザイン／フロントエンド関連で最も歴史があり影響力のある専門オンラインメディアの1つ です。
UI/UX、HTML/CSS、アクセシビリティ、デザインシステム、フロントエンド実装までカバーした“実務者向け”の知識が揃います。

UX Collective が「読みやすいUXマガジン」なら
Smashing Magazine は “本格的・プロ志向” のデザイン／実装メディア です。

🔷 Smashing Magazine とは？

創刊：2006年

Webデザイナー、UIデザイナー、フロントエンド開発者向け

デザイン × 技術 の交差点を深く掘り下げる

世界中の専門家が寄稿

実務レベルのナレッジが大量にある

🔶 どんな記事が多い？

他のメディアより 技術的・専門的 です。

▼ 主なカテゴリ
UI/UX デザイン
アクセシビリティ（WCAG）
レスポンシブデザイン
デザインシステム
CSS レイアウト（Grid, Flexbox）
フロントエンド（React, Next.js など）
UX リサーチ
モーションデザイン
パフォーマンス最適化

▼ 教科書級の人気記事例
Responsive Web Design Patterns
Color Contrast Best Practices
UI Components: Design + Code Examples
Creating Accessible Interfaces
Design System Essentials
UX Collective より文章量が多く、より体系的・プロフェッショナル寄り。

🔶 デザインを学ぶ上で Smashing Magazine は重要？

結論：実務レベルで UI/UX をやるなら非常に重要（特にフロント寄り）。

▼ なぜ重要か？
UIの見た目だけではなく「実装可能な設計」を学べる
→ デザインとコーディングのギャップを埋める記事が多い。
アクセシビリティやレスポンシブの正しい方法を学べる
→ 開発現場で求められる“本物のUI設計”の知識。
デザインシステム（Figma + コード）の総合的知識が得られる
→ フロント実装＋UI構造＋Figma運用を連携して解説。
NN/g（ニールセンノーマン）より技術寄りで実践的
→ Webプロダクトの実装との相性がよい。

🔶 UX Collective と Smashing Magazine の違い
項目 UX Collective Smashing Magazine
難易度 初級〜中級 中級〜上級
傾向 UX・UIの読み物 デザイン＋実装＋システム
スタイル 読みやすくライト 専門的で体系的
学べる範囲 体験デザインやUI改善 レスポンシブ、実装、デザインシステム
向いている人 まずUXを理解したい人 UIをコードとつなぐ実務者

あなたのように
開発現場でFigmaを扱いつつ、UI/UX を本格的に学びたいエンジニア寄りの方
には Smashing Magazine はかなり相性がよいです。

🔷 どう使うべき？
もし今後こういうレベルを目指すなら確実に役立ちます：
デザインシステムを構築したい
フロントとFigmaの連携をよくしたい
アクセシビリティに強くなりたい
UIの「正しい構造」「正しい余白」「レスポンシブ基礎」を知りたい
コンポーネントをコード側でどう実装するかを理解したい

🔶 学習の進め方（超シンプル版）

Smashing の記事は長いので、次の順序で読むと効率的：

① Layout（グリッド・レスポンシブ）
② Color & Accessibility（コントラスト）
③ UI Components（ボタン・カード・フォーム）
④ Design Systems（構造化）
⑤ Motion / Micro-interactions（動き）

この順番で読むと、デザインの全体像がつながります。

Smashing Magazine
https://www.smashingmagazine.com/

🔷 UX Collectiveとは何か？
UX Collective（ユエックス・コレクティブ）は
Medium（ミディアム）というプラットフォームで運営されている UX/UIデザイン専門のメディア です。

▼ 特徴
世界中のデザイナーが記事を書いている
実務で役立つUI/UXの話が多い
最新デザイントレンドを追える
ケーススタディ（改善例）が豊富

▼ よくある記事テーマ
UI改善のBefore/After
情報設計のコツ
アプリのUX分析
アニメーション/モーションデザイン
AI × UI/UX の最新動向
デザインシステムの作り方
色/タイポグラフィのベストプラクティス

👉 NN/g（ニールセンノーマングループ）より分かりやすく実務寄り
👉 Smashing Magazine よりライトで読みやすい

🔶 デザインで学ぶべきこと（UI/UXの基礎ロードマップ）

デザイン学習はこんな流れで理解していくと最短で上達します。
① UX（体験）を作るための基礎
UX = 「ユーザーが目的を達成するまでの体験」
ここを理解しないと UI をいくら綺麗にしても意味がない。
UXで学ぶべきこと
ユーザーとは誰か？（Persona）
何を達成したいのか？（Jobs To Be Done）
どんなシナリオで使うか？（User Journey）
どの場面でユーザーは困るか？
摩擦（フリクション）を減らす設計

② UI（画面）の基礎
UI = 「見た目・操作のわかりやすさ」
ここは Figma を使って実践で身に付ける部分。
UIで学ぶべきこと
レイアウト（グリッド、余白、視線誘導）
コンポーネント（再利用可能なUI）
テキスト（タイポグラフィ）
アイコン、ボタン、フォーム
配色（色の心理、コントラト）
モーション（ホバー/遷移）

③ デザイン原則（法則）の理解

これらは UX Collective でも頻繁に紹介されます。
UI/UX で超重要な法則
ゲシュタルトの法則（まとまり、近接、整列）
ミニマリズム（不要なものは排除）
ヒッカムの法則（選択肢が多いと迷う）
フィッツの法則（ボタンの距離とサイズ最適化）
ミラーの法則（記憶できるのは7つまで）
Jakobの法則（ユーザーは慣れたUIが好き）
👉 これらを知ると「なぜそのUIが正しいか」を説明できるようになる。

④ アクセシビリティ（誰でも使えるUI）

現場でめちゃ重要。
コントラスト比
フォントサイズ
読み上げ対応（ARIA）
色だけに依存しないデザイン
UX Collective でもよく記事が出ます。

⑤ デザインシステム（プロジェクトで使うUIの辞書）
プロの現場で特に重要。
色スタイル
テキスト（フォント見出し〜本文）
ボタンのバリアント
フォームコンポーネント
アイコンルール
グリッド・レスポンシブ

👉 Figmaのコンポーネントとセットで理解する必要がある。

⑥ プロトタイピング（動くUIの作成）
Figmaで作る “操作可能なUI” のこと。
遷移
ホバー
カーソル変化
ページ遷移アニメーション
フローヒント
UXフェーズとのつながりも理解しやすくなる。

⑦ ユーザビリティテスト
作ったUIは必ずテストする。
やることは簡単：
使ってもらう
観察する
つまずいた場所を改善する
UX Collective ではこの実例が多い。

📘 まとめ：UX Collective と学習の位置付け
UX Collective は
→ 実務で役に立つ UI/UX の知識を短時間で吸収できる無料教材。

あなたが学ぶべき順序
UXの基礎（ユーザー理解）
UIの基礎（レイアウト・色・タイポ・コンポーネント）
デザイン原則の理解
アクセシビリティ
デザインシステム
プロトタイピング
ユーザビリティテスト
UX Collective は ①〜⑦すべての記事が揃っていて、実務者の視点で学べるのがメリットです。

これらは UI/UXデザインを学ぶうえで世界的に有名なメディア・研究機関 です。
プロのデザイナーが情報収集で必ず利用するレベルの定番です。

🌎 1. UX Collective（Medium の UX専門コミュニティ）

何か？

世界最大クラスの UX デザインに関するオンラインマガジン

Medium（ミディアム）というプラットフォーム内で運営されている

世界中のデザイナーが記事を投稿するコミュニティ

特徴

実務寄りの UX/UI ノウハウが多い

ケーススタディ（事例研究）が豊富

ライターが多いため、色んな視点の記事を読める

こんな記事が多い

UI改善のBefore/After

デザインプロセスの解説

ユーザーテストのノウハウ

AI × UX デザインの最新動向

こんな人に向いてる
✔ 実務で使える UX 思考を学びたいデザイナー
✔ 海外の最新トレンドを知りたい人

📘 2. Smashing Magazine（UI/UX・Web制作の専門オンライン雑誌）

何か？

Webデザイン・フロントエンド開発・UI/UXの記事を専門に扱う国際オンラインメディア

“Webデザインの古参メディア”として信頼度が高い

特徴

デザインだけでなく HTML/CSS/JS の実装寄り情報も強い

accessibility (アクセシビリティ) の記事がめちゃくちゃ多く質が良い

無料で読めるけど、質がプロ仕様

こんな記事が多い

UI/UX デザインのベストプラクティス

CSSレイアウトの高度なテクニック

アクセシビリティの実装

デザインシステム運用の深い話

こんな人に向いてる
✔ デザインだけでなく実装も理解したい人
✔ プロレベルの知識をインプットしたい人

🧠 3. Nielsen Norman Group（NN/g：UX研究の世界最高権威）

何か？

世界で最も有名な UX 研究機関

Jakob Nielsen と Don Norman が設立（デザイン界のレジェンド二人）

UX の“基礎理論はほぼ全部ここが作った”

特徴

記事は科学的エビデンスに基づいている（実験・調査データが豊富）

UI/UX の原則や法則の「公式」みたいな存在

UXトレーニングや資格が世界で使われている

こんな記事が多い

ユーザビリティの原則（10 Usability Heuristics）

インタラクションの心理学

UIパターンの研究結果

認知心理学に基づく UX 分析

こんな人に向いてる
✔ UXの理論をしっかり理解したい
✔ プロのUXリサーチを学びたい

🎯 実務デザイナーがよく言う例え
名称 役割 例えるなら
UX Collective 実務で役立つ UX の記事まとめ 現場のデザイナーが集まる知見共有コミュニティ
Smashing Magazine デザインと実装の専門媒体 デザインとフロントの専門雑誌
Nielsen Norman Group（NN/g） UX理論の世界最高権威 UXの教科書、研究論文
📌 もしあなたが学習中なら、こう使うと最速で伸びます
▼ 初級：UX Collective

→ “今すぐ使える UI/UX の知識” を吸収できる

▼ 中級：Smashing Magazine

→ デザインシステム、アクセシビリティ、フロント知識を強化

▼ 上級：Nielsen Norman Group

→ 認知心理学とユーザビリティの深い理解

1. ナビゲーション（Navigation）
■ グローバルナビ（Top Navigation）
サイト全体のメインメニュー。
企業サイト・SaaS プロダクトで一般的。

■ サイドバー（Left Navigation）
情報量の多いサービス（管理画面、ダッシュボード）。
アイコン＋ラベルが定番。

■ ハンバーガーメニュー（Hamburger Menu）
モバイルでメニューを隠すときの定番。
デスクトップでは避ける傾向が強い。

■ タブ（Tabs）
ページ切り替えやカテゴリ分けに利用。
水平タブ・垂直タブがある。

■ パンくずリスト（Breadcrumb）
ユーザーの現在地を示すために使う。

🔍 2. 検索・フィルタリング（Search & Filtering）
■ 検索バー（Search Bar）
オートコンプリート、検索候補などと組み合わせて UI が強化される。

■ 高度なフィルター（Advanced Filters）
EC、求人、管理画面で多用。
項目をアコーディオンで折りたたむのが一般的。

■ ソート（Sort）
並び替え：価格順、更新順など。

■ ファセットナビゲーション（Faceted Navigation）
ECサイトの定番。
複数の属性で絞り込む（価格・ブランド・サイズなど）。

📄 3. コンテンツ表示（Content Display）
■ カード（Card）
画像＋タイトル＋説明＋ボタンの構成が一般的。
SNS・EC・ギャラリーで多用。

■ リスト（List）
テーブルより軽く、モバイルで定番。

■ テーブル（Data Table）
管理画面で最重要のUI。
ソート・フィルタ・ページネーションと組み合わせる。

■ グリッド（Grid）
写真、商品一覧、カテゴリ一覧など。

📝 4. 入力フォーム（Form Patterns）
■ ラベル＋入力欄（Form Row）
横並び・縦並びの2パターン。

■ プレースホルダー入力（Floating Label / Placeholder）
マテリアルデザインに多い（入力時にラベルが浮き上がる）。

■ ステップフォーム（Step Form / Wizard）
入力内容が多いときにステップで分割。

■ バリデーション（Inline Validation）
入力中にリアルタイムでエラー表示。

⚠ 5. アラート・通知（Feedback）
■ トースト（Toast）
右上に一時表示される通知。
成功・エラー・警告など。

■ スナックバー（Snackbar）
画面下部に表示される短めの通知（モバイルによくある）。

■ モーダル（Modal）
重要な操作の確認などに使う。
頻用しすぎると UX が悪化。

■ バナー（Banner / Alert Bar）
ページ全体に関わるお知らせに使用。

💬 6. コミュニケーション（Messaging）
■ チャットUI（Chat Bubbles）
LINE・Messenger のような会話形式。

■ コメント欄（Comments）
SNS・ブログ・ナレッジツールなど。

🗃 7. データ可視化（Analytics / Dashboard）
■ カード型 KPI（Metric Cards）
数字＋アイコン＋前日比など。

■ チャート（Charts）
棒グラフ、折れ線、ドーナツ、ヒートマップなど。

■ テーブル＋アクション（Data Table + Actions）
編集・削除・詳細などの操作がつく。

🎛 8. アクション（Actions）
■ プライマリーボタン（Primary Button）
最も重要なアクション。色で差別化。

■ セカンダリーボタン（Secondary）
補助的なアクション。

■ スピードダイヤル（Speed Dial / Floating Action Button）
モバイルで追加ボタンなどを浮かせて表示。

■ コンテキストメニュー（Context Menu）
右クリックや「…」メニュー。

🎚 9. 状態管理（States）
■ ローディング（Loading / Skeleton）
スケルトンやスピナーで読み込みを見せる。

■ エンプティステート（Empty State）
データがないときの説明＋行動ボタン。

■ エラーステート（Error State）
404、500、フォームエラーなど。

🎨 10. ヒーローセクション（Hero Section）
LPやトップページの第一印象を作る。
タイトル・説明・CTA・ビジュアルの組み合わせ。

デザインの基本原則は、**誰でもデザインが上手に見えるための「土台」**になるルールです。
センスに依存しないので、エンジニアでも非デザイナーでも、これを理解すれば UI の質が一気に上がります。

ここでは「UIデザインで最も重要な5つ」に絞って、例つき・実践的に説明します。

🎨 デザインの基本原則（UIデザイン版）
1️⃣ コントラスト（Contrast）

「違いを強調してメリハリをつける」こと。

✔ 良い例

重要なボタンだけ濃い色

タイトルは太字、大きめ

背景が薄い → テキストは濃い

✘ 悪い例

背景#FFFFFF に #F5F5F5 の薄いグレー文字

ボタンの色が全部同じでクリック先が分からない

テキストの階層がどれも同じ大きさ

使い方（Figma）

文字の「大・中・小」の階層をつける

Primary ボタンはブランドカラーで統一

余白でもコントラストを作れる（→後述）

2️⃣ 整列（Alignment）

「要素の位置を揃える」こと。
UIの「高級感」と「プロっぽさ」は整列で決まると言っても過がありません。

✔ 良い例

テキスト左揃え

アイコンと文字の中央揃え

要素の開始位置が1列のガイドに沿っている

✘ 悪い例

テキストが微妙にズレている

ボタンの幅がバラバラ

カードの余白が整っていない

使い方（Figma）

Option + Click で整列ツール

Layout Grid を ON（8pt/4pt）

Auto Layout を使えばほぼズレない

3️⃣ 反復（Repetition）

「同じルールを繰り返す」こと。

✔ 良い例

ボタンの丸みは全て 8px

同じ色・フォントを繰り返す

カードUIのパターンを統一

✘ 悪い例

あるページだけボタンの角丸が違う

フォントが3種類以上ある

余白ルールがバラバラ

使い方（Figma）

Color Style / Text Style を使う

Auto Layout で間隔を固定（8/12/16 など）

Components と Variants で統一感を出す

4️⃣ 近接（Proximity）

「意味が近いものは近くに、違うものは離す」。

✔ 良い例

タイトルと説明文を近づける

セクションごとにまとまっている

ボタン → 前後の要素と十分な距離

✘ 悪い例

タイトルと関係ないテキストが近くにある

セクションの境目が分からない

使い方（Figma）

Auto Layout の「Padding / Gap」で距離を一定に

セクションごとに余白を大きくつける
→ 例：同じグループ「16px」、違うセクション「32px」

5️⃣ 余白（Whitespace）

「空間はデザインの一部」。
優れたデザインほど余白が広い。

✔ 良い例

ボタンの内側がしっかり余白

セクションの外側に大きな余白

縦の間隔を揃える（例：8/16/24）

✘ 悪い例

全部の要素がぎゅうぎゅう

見出しと本文が近すぎる

カードが狭くて読みにくい

使い方（Figma）

Auto Layout の「Padding」「Gap」を積極的に使う

余白にも階層を作る（例：8 → 小、16 → 中、32 → 大）

📘 これらを使って「良いUI」はこう作る
Before（悪い例）

フォントサイズが全部同じ

ボタンの色がバラバラ

余白が不揃い

テキストがズレている

After（良い例）

タイトル → 24px / Bold

本文 → 16px

ボタン → Primary Color

余白 → 16/32 で統一

整列 → Auto Layout + Grid

🎯 最重要ポイント（覚えるだけで UI が変わる）

1. 大事なものは大きく＆濃く（コントラスト）
2. 全部きっちり揃える（整列）
3. 同じルールを繰り返す（反復）
4. 近い意味のものはくっつける（近接）
5. 迷ったら余白を増やす（Whitespace）

レイアウト・余白：グリッド / 視線誘導 / 整列
1. まずレイアウトは“余白”で決まる
初心者が一番つまずくのは「余白」。
プロは 余白を増やす → 可読性UP → 品質UP が鉄則。

🔹基本ルール
内側の余白（padding）は 8px の倍数 にまとめる
（8, 16, 24, 32… → 8ptグリッド）
要素の間隔も 揃える（例：すべて16px に統一）
違う余白をむやみに使わない
近くにあるものをグルーピングする（近接の原則）

2. グリッド（Grid）の基礎
Figmaでのレイアウトを整える最強の機能がグリッド。
✔ グリッドを設定する方法（Frameを選択して）
右パネル → Layout Grid → +

よく使うグリッド
① カラムグリッド（列）

Web・アプリで最重要
例：12カラム、マージン16〜24、ガター16

用途：
レスポンシブデザイン
テキスト幅の統一
コンポーネントの左右位置を揃える

② スクエアグリッド（8px）
要素の配置 / 余白 / アイコンサイズの基準

③ 行グリッド（row）
リストUI、カード群などで役立つが使用頻度は低め

3. 整列（Alignment）の基礎
整列とは、要素を揃えること。
揃っているだけで プロ感が10倍。

✔ よく使う整列
左揃え（Left align）
中央揃え（Center）
右揃え（Right align）
垂直方向の中央揃え（Vertical center）
端揃え（Top/Bottom align）

Figmaショートカット
左揃え：Shift + A → Auto Layout
整列：右上の整列ボタン群

4. 視線誘導（情報の読みやすさ）
人は画面を 左上→右下 にスキャンします。

心地よい視線誘導の作り方
✔ ① 余白のメリハリをつける
見出しの上には大きな余白
見出し下の本文は小さな余白
→ グループ感が出る
✔ ② 文字幅（行幅）を最大化しない
1行60〜80文字が読みやすい

✔ ③ 情報の階層構造を作る
大見出し（24px）
セクションタイトル（18px）
本文（14–16px）

✔ ④ 視線をブロックごとに整理する
カードUI・セクション区切りが有効

5. Figmaでの実践テクニック
✔ Auto Layout（最重要）
整列＆余白を全自動にする機能。
使い方：
要素を選択 → Shift+A
効果：
余白を “Padding” で統一
子要素間を “Spacing” で統一
ボタンやカードが自動で伸びる
レスポンシブが簡単になる
✔ Constraints（固定位置）

レイアウトが変わっても要素の位置を維持
例：右上に固定したいボタンなど

✔ Frame と Group の使い分け
Frame：レイアウト管理
Group：単なるまとめ（使う頻度は少なめ）

6. よくあるNG例

❌ 余白がバラバラ（8px, 11px, 13px…）
❌ 文字が左右で揃っていない
❌ 要素が“なんとなく”置かれている
❌ 情報の階層がなく全部同じ大きさ
❌ コンポーネントの幅が統一されていない

👆 このどれかが起きると「素人っぽさ」が出ます。

7. これさえ守れば “UIが安定する” ゴールデンルール
🟦 ① 8pxグリッド

余白・サイズは「8の倍数」

🟥 ② カラムグリッドを必ず使う

Webは12カラムが基本

🟩 ③ 整列を厳格にする

左揃え + 上揃え を基本にする

🟨 ④ Auto Layoutで全ての余白を管理

パディング・ギャップを統一するとプロ級になる

1. UIデザインの基本は “3色構成”
UIの配色は、実は 3色で十分。
🔹① ベースカラー（背景）
白・薄いグレー・黒など
→ UIの土台になる色

🔹② メインカラー（ブランドカラー）
ロゴやサービスの印象を作る色
→ ボタン・リンク・アイコンなどで使う
→ 「一番よく使う色」

🔹③ アクセントカラー（補助）
注意喚起や強調したい場所に少量使う
→ 赤・黄色・緑のような “目に入る色” を控えめに
UIはこの 3色 + グレー階調（Gray-scale）で十分！
（5〜6色以上使うと素人っぽくなりがち）

3. 色の心理効果（UI向け）

色には心理的な印象があるため、UIの目的に合わせて使います。

色 心理効果・印象 UIでの用途例
青 信頼・清潔・知性 金融、SaaS、企業系UI
緑 安心・健康・自然 成功メッセージ、チェックマーク
赤 危険・注意・緊急 エラー、削除ボタン
黄 注意・明るさ 警告（Warning）
黒 高級・強さ モダンUI、文字色
グレー 中立・控えめ 背景、境界線、無効状態

4. コントラスト（可読性）の基礎
UIで一番重要なのが 可読性（文字が読みやすいか）。
💡基本ルール
文字色と背景色のコントラストを十分にする
ベースが白なら 文字は黒〜濃いグレー
背景色は薄い色（#F7F7F7 など）
ボタンの文字は「白 × 濃い色」 or 「濃い文字 × 淡いボタン色」
コントラストの指標（WCAG）
4.5:1 以上が推奨（一般文字）
3.0:1 以上（大きい文字）

5. カラーハーモニーの種類（UIでよく使う）
① モノクロマティック（同一色系）
1つの色の明度・彩度違い
→ UIデザインで最も安全
例：青 → 濃い青 → 薄い青 → グレー

② アナログ（類似色）
隣り合う色
→ 優しい・調和しやすい
例：青、青緑、緑

③ コンプリメンタリー（補色）
反対色
→ 注意喚起に最強（エラー・アクセント）
例：青 × オレンジ
例：緑 × 赤

6. Figmaでの配色運用（超基本）
🎨 色を決めたら Style に登録する
何かオブジェクトを選択
右パネル → Fill
四角のアイコン → ＋（Create style）
名前をつけて保存
/Colors
Primary / Blue 500
Primary / Blue 300
Accent / Red 500
Gray / 100〜900

こうすると…
色変更すると全画面に反映される
統一感が出る
開発者へ正しい値を渡せる（ハンドオフ）

7. 最初に決めるべき “UIカラーセット” サンプル
Primary: #0066FF
Primary Light: #E5F0FF
Primary Dark: #004FCC

Accent: #FF4D4D
Success: #22C55E
Warning: #FACC15
Error: #EF4444

Gray 900
Gray 700
Gray 500
Gray 300
Gray 100
White (#FFFFFF)

Fillから「+」でstyleを選択して、登録したいstyle nameを入れる

フリーのアイコンサイト
https://www.flaticon.com/

■SVGのメリット
ベクター形式：拡大・縮小しても画質が劣化しない
編集可能：Figma上で色やサイズを自由に変更できる
軽量：同じ解像度のPNGよりファイルサイズが小さい場合が多い
デザインシステムとの相性：コンポーネント化して再利用しやすい

■PNGを使う場合
ラスタ形式：解像度に依存するので拡大するとぼやける
編集不可：Figma上で色や形を直接変更できない
適した用途：
写真やテクスチャを含むアイコン
細かいグラデーションや影付きアイコン

SVGもコンポーネント化される

なるほど〜　ちょいちょい勉強になるね！

1. Auto Layoutとは？
通常のFrameは固定配置ですが、AutoLayoutを設定すると、要素を自動整列できる
– 横並び(ボタン内のアイコン+テキスト)
– 縦並び(フォームのラベル+入力欄)

2. Auto Layoutの設定方法
要素を2つ選択してShift + A

うーん