UIの観点

画面まわりで口に出す価値のある言葉です。どれも伝えればそのように作ってもらえるもので、後から入れ直すより最初に言う方が安く済みます。

コンポーネント

ボタンやフォームのような部品を共通化する考え方です。共通化されていれば、1箇所直せば全画面に反映されます。されていなければ、同じ修正を画面の数だけ繰り返します。画面が2つ以上になる製品では最初から指定します。

ボタンやフォームは共通のコンポーネントにして、画面ごとに作らないで

デザイントークン

色、余白、文字サイズに名前を付けて一元管理する仕組みです。「この青」がコードのあちこちへ直接書かれていると、色の変更は全箇所の書き換えになります。トークンになっていれば定義を1つ変えるだけで済み、ダークモードやブランド変更にも一括で対応できます。

色やサイズは直接書かず、デザイントークンとして定義して使って

レスポンシブ

画面の幅に応じて表示を変えることです。公開する製品ではスマホからの閲覧が過半を占めることが多く、割合は製品の性質で変わります。弊社では、スマホ幅とPC幅の両方で確認することを標準にしています。

スマホ幅とPC幅の両方で確認して、崩れているところを直して

アクセシビリティ

視覚や操作の条件が違う人でも使える状態にすることです。文字と背景のコントラスト、キーボードだけでの操作、画像の代替テキストが基本で、Claudeに指定すれば基本的な実装は入ります。ただし満たせているかは自動では判定しきれないため、キーボードだけで操作してみるといった実際の確認と組み合わせます。公共性の高い製品では必須ですが、そうでなくても、読みやすく操作しやすい画面は全員の使いやすさに効きます。

コントラスト、キーボード操作、代替テキストなど、アクセシビリティの基本を満たして

OGPとmeta情報

検索結果やSNSでリンクを共有した時の見え方を決める設定です。LP（1ページ完結の宣伝ページ）は共有されて広がるものであり、未設定だとリンクがタイトルも画像もない裸のURLとして流れます。公開前に一度確認します。

OGP画像、タイトル、説明文を設定して。SNSで共有した時の見え方を確認して

参考資料

• MDN: アクセシビリティ