frontend-design-philosophy

フロントエンドデザインの理念

独自性のある、ありきたりではないインターフェースを作成するための基本原則です。

まずデザインについて考える

コードを書く前に、次の点を検討してください。

1. 目的：このインターフェースは何を実現しようとしていますか？
2. 対象ユーザー：誰が使い、どのようなことを期待していますか？
3. トーン：どのような印象を与えるべきですか？
4. 差別化：何がこのデザインを独自のものにしていますか？

極端な方向性を選ぶ

無難でありきたりなデザインに流されるのではなく、明確な美的方向性を貫きましょう。

方向性	特徴
ブルータリスト	飾らず、誠実で、実用的
マキシマリスト	大胆で、重層的で、表現豊か
ミニマリスト	控えめで、精緻で、本質的
レトロフューチャー	懐かしいテクノロジー、ネオン、グラデーション
ラグジュアリー	洗練され、ゆとりがあり、高級感がある
遊び心のあるデザイン	アニメーション、カラフルで、楽しい

「AI っぽい粗悪なデザイン」を避ける

AI が生成したありきたりなデザインはすぐに見分けられます。次の要素は避けましょう。

カテゴリー	避けるもの
フォント	Inter、Roboto、Arial、主要フォントとしてのシステムフォント
色	紫のグラデーション、青から紫へのグラデーション
レイアウト	中央揃えのヒーロー、3 列の機能紹介
選択	どこにでもある角丸、控えめな影

アンチパターン

カテゴリー	避けるもの
タイポグラフィ	すべてに同じフォントを使う、デフォルトのシステムフォント
色	グレーにグレーを重ねた配色、工夫のないカラーパレット
レイアウト	対称的なグリッド、すべてを中央揃えにすること
モーション	あらゆる場所でのホバー効果、弾むようなアニメーション

検証チェックリスト

• タイポグラフィに独自性がある（デフォルトのフォントではない）
• カラーパレットに意図があり、色数が絞られている
• レイアウトが予測可能なパターンから外れている
• モーションに目的があり、洗練されている
• デザインの方向性が明確で、一貫している
• レスポンシブな動作でも品質が保たれている
• 見た目を優先してアクセシビリティを犠牲にしていない

リソース

• Fontshare - 無料で高品質なフォント
• Coolors - カラーパレット生成ツール

---

覚えておきましょう： デフォルトの設定もすべて選択のひとつです。デフォルトを使えば、ありきたりなものになります。