generic-static-ux-designer

静的サイトのUXデザイナー

ミニマルな静的サイトのための、プロフェッショナルなUXの専門知識です。

拡張元： 汎用UXデザイナー - デザイン思考のプロセス、ユーザー心理、ヒューリスティック評価、調査手法については、基本スキルをお読みください。

ミニマリストデザインの哲学

少ないほど豊か

すべての要素には、存在する価値が必要です。

• ユーザーに価値をもたらしますか？
• これを取り除いても、伝えたいことは伝わりますか？
• これは装飾ですか、それとも機能ですか？

コンテンツとインターフェースの比率

コンテンツを最大化し、インターフェースを最小化します。

BAD:  10% content, 90% navigation/chrome
GOOD: 80% content, 20% essential navigation

限定的なカラーパレット＝高い効果

• 色は最大2～3色
• アクションにはアクセントカラーを1色
• 控えめなグラデーションより、はっきりとしたコントラスト

パフォーマンスに制約のあるUX

すべてのKBが重要

要素	影響
Webフォント	+50-100KB
ヒーロー画像	+200-500KB
アニメーションライブラリ	+30-50KB
JavaScriptフレームワーク	+30-100KB

問いかけてください。このUXの改善は、データ量に見合う価値がありますか？

速度はUXの一部

• 読み込み時間1秒未満が期待されます
• インタラクションへの応答は100ms未満
• ユーザーは3秒待つと離脱します

静的ページのフローパターン

シンプルなナビゲーション

Home → About → Contact → Back to Home

無限スクロールやSPAのパターンは使いません。ページの境界を明確にします。

アンカーナビゲーション

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<section id="section1">...</section>
<section id="section2">...</section>

CSSのみのインタラクションパターン

アクセシブルな開閉表示

<details>
  <summary>More info</summary>
  <p>Additional content here.</p>
</details>

ホバー状態

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

JavaScriptがない場合のフォールバック

常にJavaScriptなしで動作するようにします。

• ナビゲーションは<a>タグで動作します
• フォームは通常どおり送信されます
• スクリプトがなくてもコンテンツにアクセスできます

ミニマリズムにおけるアクセシビリティ

ミニマリズムで実現できること

要件	ミニマリストな解決策
フォーカスインジケーター	シンプルなアウトライン
スキップリンク	すっきりとしたテキストリンク
代替テキスト	簡潔な説明
コントラスト	デフォルトで高コントラスト

タッチターゲット

• 最小44x44px
• ターゲット間に8pxの間隔
• モバイルでは大きいほど使いやすくなります

静的サイトのデザインレビュー

確認すべき質問

1. パフォーマンスへの影響は？

   • 何KB追加されますか？
   • 読み込み時間に見合う価値がありますか？

2. JavaScriptなしで動作しますか？

   • 中核となる機能にアクセスできますか？
   • プログレッシブエンハンスメントになっていますか？

3. 明瞭さを加えていますか、それともノイズになっていますか？

   • ユーザーの役に立ちますか？
   • もっとシンプルにできますか？

4. 美しさを保っていますか？

   • カラーパレットに収まっていますか？
   • 既存のデザインと一貫していますか？

注意すべき兆候

• 強い理由もなくWebフォントを追加する
• 単純な効果のためにアニメーションライブラリを使う
• ページ数が少ないのに複雑なナビゲーションを使う
• CSSで十分なのにJavaScriptを使う

静的サイトのUXチェックリスト

• スクロールせずに中核となるコンテンツが見える
• ナビゲーションが直感的（5項目未満）
• JavaScriptなしで動作する
• タッチターゲットが最低44px
• 色のコントラストが4.5:1以上
• ページのデータ量が50KB未満（画像を除く）

関連項目

• 汎用UXデザイナー - デザイン思考、心理学
• UXの原則 - 調査手法、ヒューリスティック
• デザインパターン - ビジュアルパターン