厳選・オープン・無料

Studiothomas

巨大なタイポグラフィと1つの鮮やかなオレンジアクセントに依存したミニマルデザインスタジオサイト。

01

デザイン DNA

大胆な作品のギャラリー。目立つアクセントカラーが特徴。

02

カラー

モノクロームベースのハイコントラストに、1つの鮮やかなオレンジアクセントポイント。

03

タイポグラフィ

geometric-sans

• display120px · 400
• h186px · 400
• h240px · 400
• body16px · 400

宣言されたModeratフォントファミリーを使用する。 · ディスプレイおよび本文でフォントウェイト400を多用する。 · 大きな見出しのレタースペーシングはタイトに保つ。

04

余白

明確なパディングブロック（40px、100px）を用いた広めのホワイトスペース。

05

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

ディバイダー用に、鋭く1pxの黒いラインを控えめに使用。

06

レイアウト

フル幅のヒーローブロックの後、端から端までプロジェクト画像を表示。

07

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

インタラクティブな要素上のカラーや不透明度のトランジション。 · Transformベースのカーソルやホバーエフェクト。

ease-in-outを用いたカラートランジション。 · 微細なリニアな不透明度変化。

08

コンポーネント

• button シンプルなテキストまたは細いハンバーアイコンを用いたミニマルなナビゲーション。
• card オーバーレイのタイポグラフィを持つ、端から端まで（フル）のイメージブロック。
• hero センタリングされたテキストを持つ、巨大なソリッドカラーブロック。

09

文体と禁止事項

• トーン 自信、ミニマル、プロフェッショナル。
• 見出し 巨大な、小文字または文頭大文字のジオメトリックサンセリフ。
• CTA 控えめなテキストリンク。

• アクセントカラーを複数使用しない — スクリーンショットでは厳格なオレンジアクセント（#FF4F00）が使用されている。
• セリフフォントを使用しない — スクリーンショットではジオメトリックサンセリフ（Moderat）が使用されている。
• メインブロックに影や角丸を追加しない — スクリーンショットでは鋭いエッジが使用されている。
• 見出しに太字（bold）のフォントウェイトを使用しない — スクリーンショットではフォントウェイト400が使用されている。
• 装飾的なアイコンやグラフィックを追加しない — スクリーンショットではタイポグラフィのみのデザインが使用されている。
• 見出しに広いレタースペーシングを使用しない — スクリーンショットではタイトなネガティブトラッキングが使用されている。
• 避ける: 散らかり
• 避ける: 装飾的なグラデーション
• 避ける: 角丸

10

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

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

11

System Prompt

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