厳選・オープン・無料

Charlielemaignan

巨大で表現主義的なタイポグラフィと、鮮明なハイコントラストのカラーパレットで定義される、実験的なグラフィックデザインポートフォリオ。

01

デザイン DNA

大胆で実験的なタイポグラフィと、鮮やかでハイコントラストなビジュアルを紹介するグラフィックデザイナーの個人ポートフォリオ。

02

カラー

ハイコントラストなモノクロームをベースとし、ポートフォリオ画像を通じて鮮やかでプロジェクト固有の色を導入します。

03

タイポグラフィ

geometric-sans · neue-haas-grotesk

• display360px · 700
• heading40px · 700
• body20px · 400

04

余白

大きなタイポグラフィ要素を強調するための、リラックスした中央揃えレイアウトと豊かな余白。

05

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

ピルボタンには2px solid #FFFFFF。それ以外はボーダーなし。

06

レイアウト

幅全体で縦に積み重ねられたセクション、中央揃えのコンテンツ、そして大きなヒーローロゴが支配的。

07

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

インタラクティブ要素の滑らかなトランジション。 · カスタムカーソルアニメーション。

インタラクティブ要素は0.3秒にわたる滑らかで繊細なトランジションを備えています。 · 即座の視覚的フィードバック。

08

コンポーネント

• button 透過背景、白いボーダー、白いテキストを持つピル型ボタン。
• card グリッド内で大きなフルブリード画像または動画として提示されるプロジェクトカード。
• hero 主要なビジュアルフックとなる、巨大でカスタムタイポグラフィロゴタイプ「Charlie」。

09

文体と禁止事項

• トーン 実験的、大胆、そして非常にパーソナル。
• 見出し 巨大で、字間が詰められ、しばしばカスタムデザインされたディスプレイタイポグラフィ。
• CTA ハイコントラストのアウトラインを持つ、クリーンなピル型ボタン。

• 繊細な色を使わない — スクリーンショットではハイコントラストの黒と白がプライマリパレットとして示されている。
• 標準的なウェブフォントを使わない — スクリーンショットでは highly customized, expressive display type が使われている。
• ボタンにシャープな角を使わない — スクリーンショットでは一貫してピル型 (border-radius: 999px) のナビゲーション要素が使われている。
• 多くの要素でレイアウトを雑然とさせない — スクリーンショットでは、単一の大きなビジュアルに焦点を当てた、疏で中央揃えのレイアウトが示されている。
• 従来のグリッドレイアウトを使わない — スクリーンショットでは、フルブリードで縦に積み重ねられた作品呈现が示されている。
• 小さく安全なタイポグラフィを使わない — スクリーンショットでは、ビューポートを支配する巨大で字間の詰まったタイプが使われている。
• 避ける: 一般的または企業的な言葉遣い。
• 避ける: 標準的でインスピレーションに欠けるタイポグラフィ。
• 避ける: 雑然とした、または複雑すぎるレイアウト。
• 避ける: 繊細または抑制されたカラーパレット。
• 避ける: 従来のグリッド構造。

10

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

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

11

System Prompt

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