ブランドをつなぐ。
使いやすさを広げる。

Webの共通基盤 → 選んだ用途の完成画面と規約 → 必要な部品の順に使います。LPの会社ナビを業務画面へ重ねず、Webアプリでは製品内の移動を優先します。

余白は4pxを最小単位に8・16・24・32・48pxを中心に構成。Webの標準操作は48px、主要CTAは56px。数値はブラウザのCSS pxです。

主操作は1つに絞り、補助操作は枠線やリンクで区別します。Tabキーで移動すると、ボタンやリンクには黄色と黒、入力欄にはブランド青のフォーカスが表示されます。

この比較列のDefault・Hover・Active・Focusは状態表示です。実際の操作は上のボタンで確認できます。無効状態は操作できない理由を近くの文脈でも示します。

情報を読む、別の画面へ進む、選ぶ、複数の操作をする。外観が似ていても、押せる範囲と操作方法を揃えます。

ボタンの優先度と状態を比較する · 役割・寸法・操作方法の規約を読む

空欄で「見本として保存」を押すと、エラー一覧へフォーカスします。各エラーから項目へ移動できます。すべて有効になると、このページ内に確認結果を表示します。

静的な通知をすべて読み上げ通知にしません。保存完了の動的通知は status を使用し、項目エラーはラベル・説明との関連付けとフォーカス移動で伝えます。

旧Canvas・Glass・グラデーションCTAなどの記録は従来版にあります。ここでは識別のための配色を示しています。旧グラデーション上の白文字などは、新規の適合例として扱いません。

自社HPのロゴ、主要ナビ、濃紺フッターを共通部品にしました。狭い画面では「メニュー」ボタンから開閉でき、キーボードでも操作できます。

LP・ホームページの完成画面を開く

64pxを基準とするトップバーと256pxの左ナビ。左ナビは72pxへ縮小し、960px未満ではドロワーへ切り替わります。完成画面で一覧・詳細・編集、検索、状態を操作できます。

Webアプリの完成画面を開く

以下は検索・絞り込みだけを試す部品見本です。画面全体の構成は専用カタログを参照してください。

3件のプロジェクト

34の大見出しと17の本文、グループ化したリスト、アイコン付きタブ。iOSの画面構造から、編集・確認・失敗への対処までを揃えました。

Apple HIGを参考にした独自のHTML参照キットです。文字・寸法・素材はブラウザ近似であり、Apple純正UIではありません。独自SVGを使用。操作はこのページ内に反映され、外部送信・永続保存は行いません。

スマホ規約 · Appleの文字・色・素材 · 部品と画面の規約