corporate-trust について
抑制の効いた企業向けサイトを設計するためのデザインスキルです。一般的なレイアウトと根拠を重視する表現を軸に、企業向けページのスタイルと内容を定めます。
主な機能
- 01固定の配色とタイポグラフィ
- 02一般的なグリッドレイアウト
- 03根拠を重視した主張と内容
- 04主要コンポーネントとしての表
- 05控えめなモーションとホバー状態
活用シーン
- 01企業向け製品ページの設計
- 02料金表と比較表の作成
- 03信頼を重視するマーケティングページの構築
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ madebymustafa/ design-taste --skill corporate-trustインストール後、Claude Code で/corporate-trustを入力して読み込まれたか確認します。
詳細
corporate-trust
ひとつのアイデンティティ:表紙にスカイラインとコンクリートの建物が描かれた年次報告書。誰も驚かないからという理由で購入されました。
1. パレット(固定)
- サーフェス:ページには純白
#FFFFFF、パネルには#F8FAFC、ホバー/インセットには#F1F5F9。 - 文字色:
#0F1722(見出し、プライマリ)、#3B4657(本文)、#5B6777(セカンダリ/控えめな表示)。 - 境界線:
#E1E7EF(1px)。強調時:#C7D0DC。 - アクセント — ちょうど1色:濃い青
#1F4FE0。用途:ビューポートごとにプライマリボタン1つ、リンク、アクティブ状態、強調マーク1つ。ほかには使いません。 - 成功/危険は、トークンの意味が固定されたステータスカラーとして使用します(成功の緑
#0E7F4B、危険の赤#C0362C)— ステータス用途のみで、装飾には使いません。 - グラデーション禁止、強いシャドウ禁止(ソフトな
0 1px 2px rgba(15,23,34,0.06)まで — 通常は不要)、マーケティングページのダークなヒーローセクション禁止。
2. タイポグラフィ(固定)
- ディスプレイ: システムのサンセリフ(プラットフォームのデフォルト)、ウェイト500~600、
clamp(1.8rem, 3.6vw, 2.8rem)。エンタープライズ向けのディスプレイは落ち着きがあり、具体的です — 「統合」であり、「超越」ではありません。ディスプレイセリフ体禁止、大文字のヘッダー禁止、大きすぎるヒーロー禁止(上限は厳守で2.8rem)。 - 本文: システムフォントスタック、15~16px、行高1.6。説明文にはセカンダリテキストを使用します。
- ラベル/メタデータ: 12~13px、ウェイト500、
#5B6777。スモールキャップスは任意、字間は≤ 0.04em。 - 禁止事項:本文のイタリック体、マーケティングサーフェスで12px未満のテキスト、1ページで3種類を超えるウェイト。
3. 構成(固定)
- 従来型のレイアウトが正解です: 左揃えのヒーロー、12列グリッド、3列または交互の2列で並ぶ機能、比較表、データテーブル、法的リンクを含む明瞭なフッター。対象ユーザーにとって安全な選択肢だと感じられるページにします。実際にそうなのですから。
- ヒーロー: アイブロウ(13px、アクセント色または控えめな色)→ H1(2.2~2.8rem)→ 1行のサブテキスト → プライマリボタン1つ+セカンダリボタン1つ → 枠線付きの製品/指標パネル。ヒーローで大げさな演出をしないこと、近くに根拠のない主張を置かないこと。
- 信頼を裏付ける要素が装飾です: ロゴ(グレースケール)、出典行付きの指標(「2,400社の顧客に基づく、2025年」)、コンプライアンスチップ(SOC 2、ISO 27001、GDPR — イラストではなくテキストチップ)、肩書きと会社名を添えた顧客の引用。
- テーブルは代表的なコンポーネントです:
#E1E7EFの1px罫線、左揃えの12px大文字ヘッダー、14pxの行、ゼブラ表示は任意、ホバー行は#F8FAFC。料金表示は料金カードより枠線付きテーブルを優先します。 - カード:1pxの境界線、8pxの角丸、ヘッダー+本文+任意のフッター。ホバー時は境界線を濃くし、浮き上がらせません。角丸は全体を通じて6~8px、ピル型はステータスタグにのみ使用します。
- フッターには必要な情報をすべて含めます:製品/会社/リソース/法務の各列、住所、著作権表示、コンプライアンスバッジ。
4. コンテンツの扱い
- すべての主張に条件または出典を付けます。「最高」は「カテゴリ内で最も高い導入率(G2、2025年)」に置き換えます。
- 絵文字は禁止です。アイコン:ストローク幅1.5pxのセット(全体で同じファミリー)、20~24px、通常時は
#5B6777、ホバー時はアクセント色。 - ボタンの文言は具体的にします:「トライアルを開始」「営業担当に相談」「デモを依頼」。
- 数値:等幅数字を使用し、正確に記載します(「稼働率SLA 99.9%」「年払いで月額$29」)。
5. モーション(実質なし)
- ホバー状態:背景色/境界線の変化のみ、120~150ms、移動なし。
- 許可される登場アニメーションは1つ:ページ内でセクションを順番に表示(200ms、6px、過度なずらしなし) — またはアニメーションなしでも問題ありません。
- 上記以外のスクロールアニメーション、視差、自動再生カルーセルは禁止です。
6. チェックリスト(該当する場合はページを不合格にする)
- 信頼につながらない装飾要素(人物のイラスト、グラデーションの blob など)がある。
- 条件や出典のない主張がある。
- 12px未満のテキストがある。
- ビューポートごとにアクセントが1つを超える、または意味のない色が使われている。
- 見出しが約2.8remを超える、またはディスプレイにセリフ体/大文字表記が使われている。
- フッターに法的リンクがない、または規制対象の顧客向けページにコンプライアンスの表示がない。
- 適切に配置されていないテーブル(数字は右揃え、テキストは左揃え)がある。
- 調達委員会が目を凝らさなければ読めないレイアウトになっている。
コメント
Markdown 対応