フロントエンド美観の向上
指示
ありきたりな「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スロップ」デザインにうんざりしていませんか？このスキルは、独自のタイポグラフィ、大胆な色彩、巧みなアニメーション、革新的な空間レイアウト、深みのある背景を通じて、平凡から脱却し、印象的なフロントエンドインターフェースを構築するのに役立ちます。実用的な美学ガイドを提供し、あなたの作品を数多くのウェブサイトの中で際立たせ、真の視覚的ブレークスルーを実現します。
独特なフォントの個性 ダークなサイバーパンク美学 非対称な動的レイアウト 緻密に構成されたローディングアニメーション 没入感あふれる雰囲気作り
関連スキル
すべて表示
スライドデベロッパー向けニュー・ブルータリズム編集スタイル
あなたのテーマコンテンツ、記事、知識ポイント、プロジェクト振り返り、コース文案、ツール紹介などを、「デベロッパー向けニュー・ブルータリズム編集スタイル」の横長Slidesに変換します。全体のスタイルは、ニュー・ブルータリズムデザイン、インディーズ雑誌のレイアウト、デベロッパー端末の美学を融合：オフホワイトの背景、太い黒枠、ハードシャドウ、ハイコントラストの色ブロック、極太タイトル、等幅フォント、ウェブ/端末/カードのモジュール型レイアウトにより、強い技術コンテンツ表現感を生み出します。 このスキルは、まずコンテンツ構造を抽出し、各ページにコアとなる見解を設定し、タイトル、説明文、知識ポイントモジュール、結論、適切なビジュアルコンポーネントを自動生成します。これは、AIツールの紹介、Agentの実践、オープンソースプロジェクトの分解、コースコンテンツの整理、方法論の要約、製品機能の説明、技術振り返りなどのコンテンツシーンに特に適しています。 最終出力は16:9の横長Slidesで、全体のビジュアルが統一され、読みやすく、余白が十分で、スタイルが明確で、「オープンソースプロジェクトの作者が技術共有をしているようで、かつインディーズデザイン雑誌がストーリーを語っているような」高度な表現効果を呈します。
画像漢画像石風ポスター
漢画像石から抽出したビジュアルシステム：幾何学的シルエット人物 × 古典色 × 非対称エディトリアルレイアウト。イベントポスター、ライブ予告、ポッドキャストカバーなどのシーンに適用可能。テーマを指定するだけで、現代のコンテンツを二千年の美意識に刻み込みます。
執筆小さくて美しいIP - Dan Koeスタイルのバズるタイトル
ユーザーのコンテンツに対して7つのタイトルを生成します。各タイトルはDan Koeのコアスタイルの特徴を一つずつ表現し、多様性と選択の余地を確保します。 これは、バイラルマーケティング心理学とDan Koeのコンテンツ美学に精通したタイトル作成の達人です。クリエイター、個人ブランドビルダー、デジタルノマドのために設計されており、退屈なテーマを「思想的リーダー」の質感を持つバイラルタイトルに変えることに専念しています。 🌟 コア機能 深いコンテンツ分析：断片的なキーワードや万字のスクリプトから、コアな課題、オーディエンス像、価値提案を自動的に抽出します。 7つの黄金の次元：Dan Koeのビジュアルロジックに厳密に従い、一度に7つの全く異なるアプローチ角度を生成します。
フロントエンド美観の向上
指示
ありきたりな「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スロップ」デザインにうんざりしていませんか？このスキルは、独自のタイポグラフィ、大胆な色彩、巧みなアニメーション、革新的な空間レイアウト、深みのある背景を通じて、平凡から脱却し、印象的なフロントエンドインターフェースを構築するのに役立ちます。実用的な美学ガイドを提供し、あなたの作品を数多くのウェブサイトの中で際立たせ、真の視覚的ブレークスルーを実現します。
独特なフォントの個性 ダークなサイバーパンク美学 非対称な動的レイアウト 緻密に構成されたローディングアニメーション 没入感あふれる雰囲気作り
関連スキル
すべて表示スライドデベロッパー向けニュー・ブルータリズム編集スタイル
あなたのテーマコンテンツ、記事、知識ポイント、プロジェクト振り返り、コース文案、ツール紹介などを、「デベロッパー向けニュー・ブルータリズム編集スタイル」の横長Slidesに変換します。全体のスタイルは、ニュー・ブルータリズムデザイン、インディーズ雑誌のレイアウト、デベロッパー端末の美学を融合：オフホワイトの背景、太い黒枠、ハードシャドウ、ハイコントラストの色ブロック、極太タイトル、等幅フォント、ウェブ/端末/カードのモジュール型レイアウトにより、強い技術コンテンツ表現感を生み出します。 このスキルは、まずコンテンツ構造を抽出し、各ページにコアとなる見解を設定し、タイトル、説明文、知識ポイントモジュール、結論、適切なビジュアルコンポーネントを自動生成します。これは、AIツールの紹介、Agentの実践、オープンソースプロジェクトの分解、コースコンテンツの整理、方法論の要約、製品機能の説明、技術振り返りなどのコンテンツシーンに特に適しています。 最終出力は16:9の横長Slidesで、全体のビジュアルが統一され、読みやすく、余白が十分で、スタイルが明確で、「オープンソースプロジェクトの作者が技術共有をしているようで、かつインディーズデザイン雑誌がストーリーを語っているような」高度な表現効果を呈します。
画像漢画像石風ポスター
漢画像石から抽出したビジュアルシステム：幾何学的シルエット人物 × 古典色 × 非対称エディトリアルレイアウト。イベントポスター、ライブ予告、ポッドキャストカバーなどのシーンに適用可能。テーマを指定するだけで、現代のコンテンツを二千年の美意識に刻み込みます。
執筆小さくて美しいIP - Dan Koeスタイルのバズるタイトル
ユーザーのコンテンツに対して7つのタイトルを生成します。各タイトルはDan Koeのコアスタイルの特徴を一つずつ表現し、多様性と選択の余地を確保します。 これは、バイラルマーケティング心理学とDan Koeのコンテンツ美学に精通したタイトル作成の達人です。クリエイター、個人ブランドビルダー、デジタルノマドのために設計されており、退屈なテーマを「思想的リーダー」の質感を持つバイラルタイトルに変えることに専念しています。 🌟 コア機能 深いコンテンツ分析：断片的なキーワードや万字のスクリプトから、コアな課題、オーディエンス像、価値提案を自動的に抽出します。 7つの黄金の次元：Dan Koeのビジュアルロジックに厳密に従い、一度に7つの全く異なるアプローチ角度を生成します。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。