厳選・オープン・無料

GitLab

GitLabは、DevSecOpsのためのインテリジェントなオーケストレーションプラットフォームであり、エンタープライズ向けソフトウェア配信のためのセキュアなオールインワンソリューションとして位置づけられています。

01

デザイン DNA

ソフトウェア配信用のエンタープライズ コマンドセンター

02

カラー

主に明るい背景に、印象的なオレンジアクセントを配したクリーンでハイコントラストなUI。強調にはダークサーフェスを使用しています。

03

タイポグラフィ

geometric-sans · monospace

• display96px · 660
• display-lg64px · 660
• display-md32px · 660
• body16px · 400
• body-sm14px · 400

大きなディスプレイサイズでは字間を詰め、boldでモダンな印象を演出 · 見出しには高いフォントウェイト（660）を採用し、強力な視覚的階層を確立 · 本文テキストには一貫した行高1.5を採用し、読みやすさを維持

04

余白

4pxベースグリッドに基づく、コンポーネントとレイアウト用の標準的な間隔プロGRESSION（進行）

05

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

1px solid #E8E7EB

0px 3px 7px 0px rgba(0, 0, 0, 0.05) · 0px 13px 13px 0px rgba(0, 0, 0, 0.04) · 0px 29px 17px 0px rgba(0, 0, 0, 0.03)

06

レイアウト

センタリングされたコンテナとフレキシブルなコンテンツブロックを持つマルチカラングリッドレイアウト

07

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

インタラクティブ要素（ボタン、リンク）のための弾性/オーバーフルーズイージング · 標準的なbackground-colorトランジション（0.2秒） · Transform（変形）ベースのホバーエフェクト（0.3秒）

背景色の変化またはTransform（オーバーフルーズイージング） · background-colorトランジションによる即時フィードバック

08

コンポーネント

• button 塗りつぶしプライマリボタン（黒背景、白テキスト）とアウトラインセカンダリボタン（透明背景、黒テキスト）
• card ダーク背景（#1F1C2E）に白テキスト。機能のハイライトやステータス更新に使用
• chip チャットウィジェットインターフェース内のインタラクティブアクションチップ
• input 送信アイコンを備えたフローティングチャット入力フィールド
• hero 目立つグラデーション背景（ピンク/オレンジ）、大きなタイポグラフィ、プライマリCTAを備えた全幅セクション

09

文体と禁止事項

• トーン 自信に満ち、権威があり、率直
• 見出し 短く、力強く、メリット重視（例：'より速く。信頼と共に。'）
• CTA 行動を促し、明確（例：'無料で試す'、'デモをリクエスト'）

• 低コントラストなテキストを使用しない — スクリーンショットでは、最大限の読みやすさのために、鮮明な黒（#171321）を白（#FFFFFF）に使用しています。
• 遊び心のある丸みのあるタイポグラフィを使用しない — スクリーンショットでは、構造化された幾何学的なsans-serifシステムが使用されています。
• すべての状態に単一の色に依存しない — スクリーンショットでは、オレンジ（#FC6D26）アクセントが黒と白と並んで控えめに使用されています。
• 過度に強いドロップシャドウを使用しない — スクリーンショットでは、カードやポップアップに非常に微細で、レイヤードされたbox-shadowのみが使用されています。
• すべてにigidなグリッドを使用しない — スクリーンショットでは、全幅ヒーローセクションに対応するフレキシブルなグリッドが使用されています。
• 機能のハイライトに明るい背景を使用しない — スクリーンショットでは、視覚的なコントラストと焦点をつくるためにダーク（#1F1C2E）サーフェスが使用されています。
• 避ける: 文脈のない専門用語
• 避ける: 形式張りすぎた企業用語
• 避ける: 曖昧で受動的な表現

10

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

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

11

System Prompt

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