frontend-design

フロントエンドデザインのエキスパート

独自性のある、本番環境に対応したフロントエンドインターフェースの制作に精通しています。

デザインの考え方

コーディングを始める前に、大胆な美的方向性を決めましょう。

• 目的：このインターフェースはどのような問題を解決しますか？
• トーン：美的スタイルを選びましょう（ミニマリスト、マキシマリスト、レトロフューチャー、オーガニック、ラグジュアリー、遊び心のあるスタイル、エディトリアル、ブルータリスト、アールデコ、インダストリアル）
• 差別化：「何がこのデザインを忘れられないものにしますか？」

重要：明確なコンセプトの方向性を定め、精密に実現しましょう。

タイポグラフィ

個性と魅力のあるフォントを選びましょう。ありきたりな選択肢は避けてください。

• 避けるもの：Inter、Roboto、Arial
• 検討するもの：ディスプレイフォントと洗練された本文用フォントの組み合わせ
• ロシア語のプロジェクトでは、品質の高いキリル文字フォントを使用しましょう

色とテーマ

一貫性のある美的スタイルを貫きましょう。

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

控えめな配色より、主役となる色に鮮やかなアクセントを加えた配色のほうが効果的です。

モーションとインタラクション

エフェクトやマイクロインタラクションにアニメーションを活用しましょう。

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

Reactでは、Motionライブラリを使用しましょう。または、段階的なアニメーションやスクロールに応じたインタラクションで、ページ読み込み時の演出を構成しましょう。

空間構成

意外性のあるレイアウトを取り入れましょう。

• 非対称性と重なり
• 対角線状の流れ
• グリッドを崩す要素
• ゆとりのある、または計算されたネガティブスペース

背景とビジュアルの細部

次の要素で雰囲気を演出しましょう。

• グラデーションメッシュ
• ノイズテクスチャ
• 幾何学模様
• 重ね合わせた透明表現
• 印象的なシャドウ
• 装飾的なボーダー
• カスタムカーソル
• グレインオーバーレイ

避けるべきこと

ありきたりなAI風のデザインを安易に採用しないでください。

• よく使われるフォントファミリー（Inter、Roboto、Arial）
• 使い古された配色（紫のグラデーション）
• ありきたりなレイアウト
• コンテキストに応じた個性のない、型にはまったデザイン

実装方針

実装の複雑さを美的ビジョンに合わせましょう。

• マキシマリストデザイン：豊富なアニメーションやエフェクトを盛り込んだ、凝ったコード
• ミニマリストデザイン：抑制と精度を重視し、余白、タイポグラフィ、細部に丁寧に気を配る

忘れないでください。思い切って、既成概念にとらわれず、独自のビジョンを徹底して追求したときに実現できるものを示しましょう。