厳選・オープン・無料

Atlason

家具やプロダクトの仕事を紹介する、ハイエンドなデザインスタジオのポートフォリオ。

01

デザイン DNA

作品に語らせる、高級なデザインギャラリー。

02

カラー

ハイコントラストの写真に色彩を依存した、厳格なモノクローム基盤。

03

タイポグラフィ

grotesque-sans

• display230px · 400
• heading106px · 500
• body16px · 400

大きなディスプレイ見出しには、 tighterな字間隔を使用する · すべてのテキストブロックは、厳格に左揃えを維持する · テキストにドロップシャドウや装飾的な処理を施さない

04

余白

非対称で、主要セクション間には大きな隙間を設け、コンテンツブロック内ではより密接にまとめる。

05

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

主要なインターフェース要素には目立つボーダーを設定しない。区切りにはホワイトスペースに依存する。

06

レイアウト

デスクトップでは非対称のマルチカラムグリッド、モバイルでは単一カラムにスタックする。

07

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

スクロール時の画像や要素への、滑らかなフェードイン/アウト · hover時の控えめなscaleとtranslateの変形

インタラクティブな要素に対する、控えめなopacityの減少またはわずかなscaleの増加。 · 即座のナビゲーションまたはトランジション。

08

コンポーネント

• button hover時に控えめなopacityの遷移を伴う、テキストのみのリンク。
• card 最小限の、またはボーダーのない画像グリッド。キャプションとの近接性に依存する。
• hero 巨大なタイポグラフィと、フルブリードまたは分割画面の大きな画像を組み合わせる。

09

文体と禁止事項

• トーン 自信に満ち、控えめでプロフェッショナル。
• 見出し 巨大なタイポグラフィによる、太字の宣言的な文。
• CTA ミニマルなテキストリンクで、しばしばシンプルな矢印アイコンが伴う。

• 明るいアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示している
• 画像にドロップシャドウを追加しない — スクリーンショットはクリーンでフラットなプレゼンテーションを示している
• テキストの中央揃えを使用しない — スクリーンショットは強力な左揃えのタイポグラフィを示している
• コンテナに角丸を使用しない — スクリーンショットはシャープで長方形のエッジを示している
• 見出しにセリフフォントを使用しない — スクリーンショットは太字でモダンなゴシック体サンセリフを示している
• アイコンでUIを雑踏させない — スクリーンショットはナビゲーションにテキストとイメージに依存している
• 避ける: 過度な形容詞やマーケティング的な表現
• 避ける: 明るく、不協和なカラーパレット
• 避ける: シャドウや角丸などの装飾的なUI要素
• 避ける: 密集した本文ブロック

10

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

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

11

System Prompt

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