ポートフォリオ · ポートフォリオ
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。
プレビュー
概要
上品なセリフ体のポートフォリオは、装飾を最小限に抑え、書体と余白の選択だけで「格」を表現するデザインです。作品写真の力に寄りかからず、レイアウト・タイポグラフィ・静かな動きで、見る人の体感速度をゆっくりと落としていきます。
周辺設計が作品の格を決める
多くのポートフォリオは「作品を大きく見せること」に集中し、その周りの余白・書体・情報バーを雑に処理します。しかし、これは危険です。作品がどれほど優れていても、サイトの作りが粗ければ、サイトの格が作品の格を引き下げてしまう。逆に、周辺をセリフ体と余白で静かに整えきると、まったく同じ作品が一段上の印象で届きます。器が中身の見え方を決めるのです。
沈黙が高級感を生む
高級ブランドのサイトに共通するのは「静けさ」です。情報を詰め込まず、要素を急かさず、たっぷりの余白を恐れない。余白は空白ではなく、作品に「ここで立ち止まってよい」と告げる時間です。スクロールを速く消費させないことが、そのまま「格」の体験になります。
仕上げの判断軸
ワードマークは「ATELIER ferro」のように前半大文字＋後半斜体小文字にすると、テック系の味気なさから離れられます。見出しは2行目に左インデントの段差をつけ、雑誌の誌面割りを連想させる「読ませる見出し」に。メタバーの「24 / 58」のような分数表記は、キュレーションされた一部を見ている感覚を生みます。グリッドは12カラムを基準に、各作品の幅とアスペクト比をあえて不揃いにして紙面に呼吸を与える。価値観を表す単語をゆっくり流すマーキーは、スタジオの姿勢を静かに滲ませます。
使いどころ
- 制作スタジオ・建築事務所・ブランディングエージェンシーの自社サイト
- 写真家・グラフィックデザイナー個人の落ち着いた作品集
- 高級ブランド・ホテル・ジュエリーなどの世界観に合わせたコーポレート
このデザインの分類
- カテゴリ
- ポートフォリオ
- スタイル
- ラグジュアリー / エレガント / ファッション / エディトリアル / ウォーム
背景と狙いどころ
AIへの指示文
ブランディング/空間デザイン系の制作スタジオ向けに、上品なポートフォリオサイトを作ってください。 キャンバス: - ベージュ系のオフホワイト (#ede6d8)、近黒インク (#1a1612)、ミュート (#6b6355)、アクセントは渋い金茶 (#8a6f47)。 - セリフ書体 (Cormorant Garamond / Playfair Display / Tiempos / Georgia) を見出し・ロゴ・キャプションに。 - サンセリフ (Inter) をナビ・メタ情報・小ラベルに。 - letter-spacing を全体的に広めに取り、静けさを作る。 ヘッダー: - 左: "ATELIER ferro" のワードマーク。前半大文字 + 後半斜体小文字の混在で格を出す。 - 右: 4項目のナビ (Works / Studio / Process / Contact)。uppercase、letter-spacing 0.16em、アクティブは下線。 ヒーロー: - 2カラム (左タイトル / 右メタ情報)、下揃え。 - H1 は2行構成、font-size clamp(3rem, 9vw, 7.5rem)、line-height 0.95。 - 1行目に <em>practice</em> のような斜体+金茶色の一語を混ぜる。 - 2行目は clamp(1rem, 6vw, 5rem) の左インデントで段差をつける (雑誌のページ割り風)。 - 右のメタ情報は uppercase sans、letter-spacing 0.22em、3行構成 (所在地 / 年 / 状態)。 メタバー: - ヒーロー直下に 1px の上下罫線で挟んだ 1 行の情報バー。"Selected works · 24 / 58" のような分数表記、フィルタ、表示切替など。 作品グリッド: - 12 カラムの CSS Grid で、アスペクト比と span を変えた 6 作品を配置: - `w-7 · 4:5`, `w-5 · 1:1`, `w-4 · 4:5`, `w-8 · 5:4 (wide)`, `w-6 · 1:1`, `w-6 · 4:5` のような組み合わせ。 - 各作品は <figure> で包み、下に <figcaption>: - 左にセリフ体の作品名 + <em> で斜体強調の副題。 - 右に uppercase sans の年度・カテゴリ (2026 · Spatial など)。 - 作品のアートワークは実画像の代わりに、金茶系のグラデーションと conic-gradient による抽象ビジュアル。6 種類を使い回さず、微妙に違う形 (ellipse, sun, conic, diagonal stripes) を用意して紙面の豊かさを出す。 - hover で `transform: scale(1.03)` の slow ease-out (0.6s)。 マーキー: - 作品の下に 1px の罫線で区切り、巨大セリフ斜体の流れるテキスト (Restraint · Material · Quietness · Proportion)。28秒の slow marquee。各単語の後に `·` を金茶色で添える。 フッター: - uppercase sans、左にコピーライト、右にメール/電話。 レスポンシブ: 820px 以下でヒーロー縦積み、作品グリッドは 2 カラム、span を全て 2 に揃える。 JS 不要 (marquee は CSS アニメーションのみ)。
バリエーション
写真差し替え版
各 figure の .art を実際の作品画像 (<img>) に差し替える。 アスペクト比は figure 側で制御しているのでそのままフィット。 hover のスケールアニメーションは継続。
白基調のクール版
背景を #faf8f3、アクセントを (#3a3528) の墨色に変更。 金茶色の代わりに墨黒の斜体強調にする。 同じ構造のまま、トーンだけ「紙」寄りに振る。
よくある質問
セリフ書体は何を使うのが良い？
日本語サイトでも成立しますか？
マーキーは目障りにならない？
関連するデザイン
巨大斜体タイポのファッション・ルックブック
写真領域を全幅に走らせ、巨大な斜体ディスプレイ書体を画面外まで突き抜けさせるファッションマガジン的ポートフォリオ。Vogue・Dazed・i-D の版面感を Web 化した、ブランドルックブック専用の尖った設計。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
侘び寂びの墨絵的ポートフォリオ
不完全さを美と捉える日本の侘び寂び美学を Web に持ち込んだポートフォリオ。墨絵のかすれ、紙質感、大胆な余白、明朝の縦書き和文、朱の落款で「静けさ」を作る尖った設計。