厳選・オープン・無料

Foster + Partners

世界的に有名な建築事務所のための、ミニマルで写真主導のポートフォリオ。

01

デザイン DNA

ビジュアルポートフォリオを提示する権威ある世界的建築事務所。

02

カラー

建築写真を際立たせるために退く、ハイコントラストの白タイポグラフィを持つ、モノクローム暗色UI。

03

タイポグラフィ

humanist-sans

• display48px · 500
• heading33px · 500
• body16px · 400

見出しは文頭の大文字のみを使用し、静かでエレガントなトーンを維持する。 · テキストは主に白とし、暗い背景の上で読みやすさを確保する。 · フォントウェイトの変化を最小限に抑えることで、UIを整理された状態に保つ。

04

余白

ゆとりのある余白が、穏やかで美術館のような閲覧体験を生み出す。

05

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

繊細な区切りのために、薄く半透明の白いボーダーが使用される。

rgb(128, 128, 128) 0px 0px 5px 0px

06

レイアウト

大規模で没入感のある画像を優先する非対称グリッドレイアウト。

07

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

ヒーロー画像のトランジション用のスムーズなクロスフェード。 · インタラクティブな要素のopacityとtransformの変化。

テキストの色や背景のopacityの微細な変化。 · 即座のナビゲーションまたは状態変更。

08

コンポーネント

• button 背景に繊細な透明度を持つ、ミニマルなピル形状ボタン。
• card テキストオーバーレイを持つ画像重視のグリッドアイテム。可読性のためにグラデーションフェードがよく使用される。
• chip カテゴリ用の小さな角丸ラベル。
• input ヘッダーに統合された、ミニマルでボーダレスな検索フィールド。
• hero テキストを下部に固定した、フルビューポートの写真スライドショー。

09

文体と禁止事項

• トーン 権威があり、エレガントで控えめ。
• 見出し 直接的、事実に基づき、文頭の大文字のみ。
• CTA クリーンで機能的。アイコンや小さなピルボタンとして統合されることが多い。

• 明るい色やネオンのアクセントカラーを使用しない — スクリーンショットは厳格なモノクローム配色を示している。
• 装飾的なセリフフォントを使用しない — スクリーンショットはクリーンなヒューマニストサンセリフを一貫して使用している。
• UIをUI要素で混雑させない — スクリーンショットは建築写真が支配的になるようにしている。
• ハードボックスシャドウや3D効果を使用しない — スクリーンショットはフラットなサーフェースと微妙な透明度に依存している。
• すべて大文字の見出しを使用しない — スクリーンショットは洗練されたトーンのために主に文頭の大文字のみを使用している。
• 厳格で均一なグリッドを使用しない — スクリーンショットは視覚的階層を強調する非対称レイアウトを示している。
• 避ける: 大げさまたは販促的な言葉遣い。
• 避ける: 複雑なタイポグラフィレイアウト。
• 避ける: 装飾過多なUI要素。

10

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

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

11

System Prompt

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