厳選・オープン・無料

Editbrandstudio

柔らかなティールと気まぐれな線画を使った遊び心のあるイラスト入り403エラーページ。

01

デザイン DNA

フレンドリーな空を飛ぶイラスト。

02

カラー

ソフトで落ち着いたティールのベースに、高コントラストのブラックテキスト。

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display36px · 700
• body16px · 400

04

余白

縦方向に十分なパディング、横方向に制限された間隔。

05

サーフェス (角丸 / 影 / 罫線)

目立つボーダーは使用しません。

06

レイアウト

イラストとテキストを縦に積み重ねた、単一の中央揃えカラム。

07

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

hover/focus時の暗黙のトランジション。

暗黙のトランジション。 · 暗黙のトランジション。

08

コンポーネント

• button なし。
• card なし。
• chip なし。
• input なし。
• hero 大きな中央グラフィックと装飾的な背景要素を備えた、フルワイドのイラスト入りヒーローセクション。

09

文体と禁止事項

• トーン フレンドリーで親切。
• 見出し エラーの明確で直接的な表現。
• CTA N/A

• ダークモードを使用しない — スクリーンショットは明るい青空のテーマを示しています
• 鋭角で技術的なフォントを使用しない — スクリーンショットはフレンドリーなトランジショナル・セリフとヒューマニスト・サンセリフを使用しています
• 高彩度のアクセントカラーを使用しない — スクリーンショットは単一のモノトーンティール・パレットに依存しています
• 複雑なマルチカラムレイアウトを使用しない — スクリーンショットはシンプルな中央揃えの単一カラムレイアウトを示しています
• 重いドロップシャドウやディープレイアウトを使用しない — スクリーンショットはフラットな線画イラストを示しています
• 分厚くテキストの多いエラーメッセージを使用しない — スクリーンショットは短くフレンドリーな文句を使用しています
• 避ける: 過激な技術用語
• 避ける: 分厚い段落
• 避ける: 攻撃的なエラーメッセージ

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko