厳選・オープン・無料

Mrmarcelschool

消費者向けウェブサイト向けの、親しみやすいイラスト付き403 Forbiddenエラーページ。

01

デザイン DNA

ロックされたデジタルゲートの親しみやすくも毅然とした警備員

02

カラー

主体のパウダースカイブルーと、最大限の可読性のためのダークでハイコントラストのテキストカラーで支えられた、明るさが主体の単色パレット。

03

タイポグラフィ

humanist-sans

• display36px · 700
• body16px · 400

すべての表示テキストと本文テキストにクリーンなsans-serifを使用する

04

余白

要素間の明確な空間的分離のため、余裕のあるpaddingを持つ、シンプルな4pxベースユニット。

05

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

ダークティールカラーの薄い、1px solidな線がイラストのアウトラインに使用されています。

06

レイアウト

上部に大きなイラストスタイルのグラフィック、その後にテキストブロックが続く、単一の中心化された縦カラムレイアウト。

07

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

08

コンポーネント

• hero 浮遊する幾何学模様と雲のような基部に囲まれた、パッドロック付きコンピュータモニターを描いた、大きく中心化されたベクターベースのイラスト。

09

文体と禁止事項

• トーン 直接的で情報に富んでいますが、親しみやすいビジュアルスタイルによって和らげられています。
• 見出し エラーコードとステータスの、明確で大きく太字のステートメント。

• 複雑または複数カラムのレイアウトを使用しない — スクリーンショットはシンプルな、中心化された縦型スタックを示しています
• 暗い背景を使用しない — スクリーンショットは明るい、パステルブルーの背景を示しています
• エラーに攻撃的な赤色を使用しない — スクリーンショットは落ち着いた、威圧感のないカラーパレットを使用しています
• 重厚でリアルな画像を使用しない — スクリーンショットはシンプルでフラットなベクターイラストを使用しています
• 複数のウェイトとスタイルを持つ複雑なタイポグラフィを使用しない — スクリーンショットは限定的でクリーンなsans-serifシステムを使用しています
• 複雑なナビゲーションやフッターを追加しない — スクリーンショットはコアのエラーコンテンツと装飾要素のみを示しています
• 避ける: 過度に技術的な専門用語を使う
• 避ける: パニック感を生む
• 避ける: エラーステートに攻撃的な赤色を使う

11

System Prompt

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