厳選・オープン・無料

Work & Co

ミニマルで自信に満ちたエージェンシーポートフォリオ。タイポグラフィーとハイプロファイルのクライアントワークがそのまま語る。

01

デザイン DNA

格式あるデザイン・テクノロジー・コンサルタント。

02

カラー

高コントラストのミニマリズム。攻撃的な赤をアクセントに1色だけ使用する。

03

タイポグラフィ

transitional-serif

• display56px · 500
• heading36px · 400
• body16px · 400

全プレーンテキストと見出しにはトランジショナル・セリフ体を使用する。 · 「Part of Accenture Song」のように、小規模なユーティリティテキストや特定のブランドロゴにはサンセリフ体を使用する。 · 大きなヘッドラインにはtightな字間を設定する。

04

余白

主要セクション間には60px、100pxなど大きなpaddingを用いた、ゆったりとした縦のリズム。

05

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

セクションを分ける薄い1px solidボーダー。

0px -1px 0px 0px inset rgb(0,0,0)

06

レイアウト

非対称の2カラムグリッド（1/3 ラベル、2/3 コンテンツ）。モバイルでは折りたたむ。

07

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

テキストリンクのカラーおよび下線トランジション。

テキストカラーの変化または下線アニメーション。 · 標準のポインターカーソル。

08

コンポーネント

• button 下線付きテキストリンク。アクセントの赤または黒で着色する。
• card 画像を上に配置し、その下にシンプルなセリフ体テキストを置くミニマルなカード。
• hero 大きな左揃えテキストブロック。補足的な引用文とCTAを配置する。

09

文体と禁止事項

• トーン 権威あり、簡潔、控えめ。
• 見出し 断定的でやや学術的なスタイル。
• CTA シンプルな下線付きテキストリンク（例：「詳細を見る」）。

• プライマリタイポグラフィーにサンセリフ体を使用しない — スクリーンショットではトランジショナル・セリフ体に大きく依存している。
• 複数のアクセントカラーを使用しない — スクリーンショットでは強調に赤（#DB2223）のみが一貫して使用されている。
• 奥行きを出すためにドロップシャドウを使用しない — スクリーンショットでは完全にフラットな2Dレイアウトで、影の要素は見当たらない。
• レイアウトをセンタリングしない — スクリーンショットではテキストとセクション構造が一貫して左揃えである。
• カードやUI要素に角丸を使用しない — スクリーンショットではすべての四角形要素がシャープな0px角である。
• 本文テキストに太字を使用しない — スクリーンショットでは標準テキストのfont-weightが一貫して400である。
• 避ける: 専門用語
• 避ける: 過度な大文字使用
• 避ける: 派手なCTAボタン

10

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

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

11

System Prompt

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