厳選・オープン・無料

Thankyoumachine Zendesk

明確なコミュニケーションと強いタイポグラフィ階層に焦点を当てた、プロフェッショナルでハイコントラストなSaaSヘルプセンターページ。

01

デザイン DNA

SaaSプラットフォーム向けのクリーンでプロフェッショナルなヘルプデスクインターフェース

02

カラー

ハイコントラストな黒と白に加え、プライマリアクション用に1色の鮮やかなチャートルーズアクセントを配しています。

03

タイポグラフィ

humanist-sans

• display68px · 600
• displaySmall42px · 600
• displaySmall32px · 500
• body16px · 400
• caption14px · 400

主要見出しには、tightな行間とネガティブな文字間隔を持つboldなヒューマニスト・サンセリフを使用します。 · 本文テキストは、読みやすさのために1.5の快適な行間を維持します。 · ボタンには、強調用にやや太めのウェイト（500-600）を使用します。 · フッターテキストは、情報密度に合わせてスケールを小さめ（14px）に設定します。

04

余白

一貫した8pxグリッドを基調とし、セクション間には十分な余白を設けています。

05

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

rgba(0,0,0,0.08) 0px 8px 24px 0px

06

レイアウト

十分なマージンを持つ標準的な12カラムグリッドを採用し、ヘッダー、ヒーロー、フッターセクションの区別を明確にしています。

07

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

インタラクティブ要素向けの滑らかなbackground-positionトランジション。 · ホバーステート向けのリニアなマイクロインタラクション。 · プライマリのレイアウトシフト向けのcubic-bezierトランジション。

インタラクティブ要素の控えめな背景色トランジション。 · カーソルポインタによる即座の視覚的フィードバック。

08

コンポーネント

• button ハイコントラストなアクセント背景を持つピル形状のプライマリボタンと、控えめなアウトラインのセカンダリボタン。
• card このビューでは明示的に示されていませんが、ヒーロー画像には角丸のコンテナが使用されています。
• chip このビューには存在しません。
• input このビューには存在しません。
• hero 左側に大きな見出し、右側に角丸の画像コンテナを配した分割レイアウトで、十分な余白で区切られています。

09

文体と禁止事項

• トーン エラーメッセージを伝える際も、丁寧でプロフェッショナルかつ直接的です。
• 見出し 否定的なメッセージを和らげるため、大きくboldで少し砕けた表現（「おっと、このヘルプセンターはもう存在しません」など）を用います。
• CTA ハイコントラストなスタイリングで、明確で行動を促すボタン（「ガイドを読む」「無料トライアル」など）を配置します。

• メインコンテンツエリアにダーク背景を使用しない — スクリーンショットではクリーンな白い背景が使用されている。
• 見出しにセリフフォントを使用しない — スクリーンショットではすべてのテキストにヒューマニスト・サンセリフが使用されている。
• プライマリテキストにローコントラストなカラーを使用しない — スクリーンショットでは白地にハイコントラストな黒が使用されている。
• 鋭角で四角いボタンを使用しない — スクリーンショットでは十分なborder-radiusを持つピル形状のボタンが使用されている。
• ヒーローセクションに複数の要素を詰め込まない — スクリーンショットではクリーンな分割レイアウトと十分な余白が確保されている。
• アクセントカラーをテキストや背景に使用しない — スクリーンショットではハイコントラストなボタンのみに限定されている。
• 避ける: ユーザー向けコピーで過度に専門的な用語を使用しない。
• 避ける: 明確な階層のない、密集したテキストブロックを作成しない。
• 避ける: プライマリCTA以外にアクセントカラーを使用しない。

11

System Prompt

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