フロントエンド美観の向上
指示
ありきたりな「AIの安っぽいデザイン」を避け、驚くほど個性的なフロントエンドを作り上げましょう。
## 5つの主要な側面
**1. タイポグラフィ**
- ❌ 禁止フォント: Inter、Roboto、Arial、システムフォント
- ✅ 選択：ユニークで個性的なフォント
- ✅ 組み合わせ：ショーケースフォント + 本文フォント、高コントラスト
- ✅ ヒント：極端なフォントの太さのコントラスト（100 vs 900）、大きなフォントサイズ範囲（3倍以上）
**2. 色とテーマ**
- ✅ CSS変数を使用して、一貫した美観を維持します。
- ✅ メインカラー + 鮮やかなアクセントカラー
- ❌ 避けるべきもの：紫のグラデーション＋白い背景
- ✅ インスピレーション：IDEテーマ、文化的美意識
**3. 動作**
- ✅ CSSアニメーションがHTMLアニメーションよりも優先されます
- ✅ モーションライブラリ
- ✅ インパクト重視：厳選されたページ読み込み > 散在するマイクロインタラクション
- ✅ スクロールトリガー、ホバーサプライズ
**4. 空間配置**
- ✅ 非対称、重なり合う、斜めの流れ
- ✅ グリッドを崩し、大胆な余白の使い方、または密度のコントロール
**5. 背景情報**
- ✅ 雰囲気と奥行きを演出する
- ✅ グラデーションメッシュ、ノイズ、幾何学模様
- ✅ レイヤー化された透明度、ドラマチックな影、装飾的な境界線
## 主要原則
・重複した収束を避けるため、各デザインは異なるべきである。
複雑さに見合った美的ビジョンを実現する
極めて複雑なデザインには綿密な設計が求められる一方、ミニマリズムには抑制と正確さが求められる。
従来の考え方から抜け出し、真にユニークな選択をしよう
⚡ 一行要約
ユニークなフォント + 大胆な配色 + 緻密なアニメーション + 革新的なレイアウト + 雰囲気のある背景 = 忘れられないフロントエンドデザイン
却下: Inter/Roboto、紫色のグラデーションの白い背景、単調なレイアウト
📋 クイックチェックリスト
寸法および検査項目
フォントはInter/Robotoを避けるべきでしょうか？何か特別な色の組み合わせはありますか？
配色に統一感はありますか？紫のグラデーションは避けるべきでしょうか？
そのアニメーションには、綿密に計算された読み込み効果がありますか？
レイアウトは従来のグリッドから逸脱していますか？
背景は奥行きや雰囲気を作り出しているか？
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
ありきたりな「AIスロップ」デザインにうんざりしていませんか？このスキルは、独自のタイポグラフィ、大胆な色彩、巧みなアニメーション、革新的な空間レイアウト、深みのある背景を通じて、平凡から脱却し、印象的なフロントエンドインターフェースを構築するのに役立ちます。実用的な美学ガイドを提供し、あなたの作品を数多くのウェブサイトの中で際立たせ、真の視覚的ブレークスルーを実現します。
独特なフォントの個性 ダークなサイバーパンク美学 非対称な動的レイアウト 緻密に構成されたローディングアニメーション 没入感あふれる雰囲気作り
関連スキル
すべて表示
ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
ウェブページ柔光デイタイム・浮遊スタイルのWebページ
柔光デイタイムスタイルのウェブデザインシステム：淡いスカイブルーのキャンバス（#ebf5ff）、字重を500に固定した超大ディスプレイテキスト（レスポンシブで最大148px）、32pxの角丸カード＋9999pxのピル、ほぼ黒の#181d27のソリッドCTA、パステルカラーのブロックと浮遊する3Dクレイ風イラスト。深みはキャンバスからカードへの色の段階的なシフトのみで表現し、コンテンツカードにはシャドウなし。「柔光デイタイムスタイル」「3Dイラストのランディングページ」「淡いブルーのキャンバス」「角丸カードスタイル」「SaaS公式サイト」「Linear/Framerスタイル」などのニーズに対応し、アクセシビリティとレスポンシブ対応の制約が組み込まれています。
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
フロントエンド美観の向上
指示
ありきたりな「AIの安っぽいデザイン」を避け、驚くほど個性的なフロントエンドを作り上げましょう。
## 5つの主要な側面
**1. タイポグラフィ**
- ❌ 禁止フォント: Inter、Roboto、Arial、システムフォント
- ✅ 選択：ユニークで個性的なフォント
- ✅ 組み合わせ：ショーケースフォント + 本文フォント、高コントラスト
- ✅ ヒント：極端なフォントの太さのコントラスト（100 vs 900）、大きなフォントサイズ範囲（3倍以上）
**2. 色とテーマ**
- ✅ CSS変数を使用して、一貫した美観を維持します。
- ✅ メインカラー + 鮮やかなアクセントカラー
- ❌ 避けるべきもの：紫のグラデーション＋白い背景
- ✅ インスピレーション：IDEテーマ、文化的美意識
**3. 動作**
- ✅ CSSアニメーションがHTMLアニメーションよりも優先されます
- ✅ モーションライブラリ
- ✅ インパクト重視：厳選されたページ読み込み > 散在するマイクロインタラクション
- ✅ スクロールトリガー、ホバーサプライズ
**4. 空間配置**
- ✅ 非対称、重なり合う、斜めの流れ
- ✅ グリッドを崩し、大胆な余白の使い方、または密度のコントロール
**5. 背景情報**
- ✅ 雰囲気と奥行きを演出する
- ✅ グラデーションメッシュ、ノイズ、幾何学模様
- ✅ レイヤー化された透明度、ドラマチックな影、装飾的な境界線
## 主要原則
・重複した収束を避けるため、各デザインは異なるべきである。
複雑さに見合った美的ビジョンを実現する
極めて複雑なデザインには綿密な設計が求められる一方、ミニマリズムには抑制と正確さが求められる。
従来の考え方から抜け出し、真にユニークな選択をしよう
⚡ 一行要約
ユニークなフォント + 大胆な配色 + 緻密なアニメーション + 革新的なレイアウト + 雰囲気のある背景 = 忘れられないフロントエンドデザイン
却下: Inter/Roboto、紫色のグラデーションの白い背景、単調なレイアウト
📋 クイックチェックリスト
寸法および検査項目
フォントはInter/Robotoを避けるべきでしょうか？何か特別な色の組み合わせはありますか？
配色に統一感はありますか？紫のグラデーションは避けるべきでしょうか？
そのアニメーションには、綿密に計算された読み込み効果がありますか？
レイアウトは従来のグリッドから逸脱していますか？
背景は奥行きや雰囲気を作り出しているか？
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
ありきたりな「AIスロップ」デザインにうんざりしていませんか？このスキルは、独自のタイポグラフィ、大胆な色彩、巧みなアニメーション、革新的な空間レイアウト、深みのある背景を通じて、平凡から脱却し、印象的なフロントエンドインターフェースを構築するのに役立ちます。実用的な美学ガイドを提供し、あなたの作品を数多くのウェブサイトの中で際立たせ、真の視覚的ブレークスルーを実現します。
独特なフォントの個性 ダークなサイバーパンク美学 非対称な動的レイアウト 緻密に構成されたローディングアニメーション 没入感あふれる雰囲気作り
関連スキル
すべて表示ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
ウェブページ柔光デイタイム・浮遊スタイルのWebページ
柔光デイタイムスタイルのウェブデザインシステム：淡いスカイブルーのキャンバス（#ebf5ff）、字重を500に固定した超大ディスプレイテキスト（レスポンシブで最大148px）、32pxの角丸カード＋9999pxのピル、ほぼ黒の#181d27のソリッドCTA、パステルカラーのブロックと浮遊する3Dクレイ風イラスト。深みはキャンバスからカードへの色の段階的なシフトのみで表現し、コンテンツカードにはシャドウなし。「柔光デイタイムスタイル」「3Dイラストのランディングページ」「淡いブルーのキャンバス」「角丸カードスタイル」「SaaS公式サイト」「Linear/Framerスタイル」などのニーズに対応し、アクセシビリティとレスポンシブ対応の制約が組み込まれています。
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。