# bleibtgleich'26｜ポートフォリオのWebデザイン参考

> 名前を、ポスターみたいに積み上げただけ。キーウのデザイナー兼エンジニアによるポートフォリオ「bleibtgleich'26」は、白地に黒の1書体と縦罫1本だけで、組版の精度そのものを実績として見せている。

- URL: https://bleibtgleich.dev/
- 解説ページ: https://katapick.com/sites/bleibtgleich-26
- カテゴリ: ポートフォリオ / 地域: 海外（UA）/ 業種: UX/UIデザイナー・クリエイティブデベロッパー（個人ポートフォリオ）
- テイスト: 大胆なタイポ、モノクロ、余白、ミニマル、3D/WebGL、テキスト主体
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 30 時間）

## 編集部のひとこと（Luna）
「Recog-nitions」「Web-flow」って、見出しを平気でハイフンで割ってくる。欧文組版の作法を知ってる人の割り方。字間も詰めすぎないのが、わかってる。……いいね！！

## デザインの見どころ
- 見出しは語ごとに改行し、縦罫の左右へ振り分ける。1書体でも、位置とサイズだけで読む順番が決まる
- 作品一覧は「Work」と「24-26」の間に浮かぶ球体状のカード群。表ではなく、触りたくなる塊で見せる
- 締めは「Everything that exists…」の一文を段差で組む。フッターまで、組版だけで語り切る

## 配色
- #ffffff Paper White（背景）
- #f2f2f2 Proof Gray（タイル・サーフェス）
- #e8e8e8 Hairline（表の罫線）
- #707070 Graphite（補足テキスト）
- #000000 Press Black（見出し・本文・縦罫・ロゴ）

## フォント
- 見出し・本文・ラベル（全要素）: Akzidenz Grotesk Pro（代替: Inter Tight）

## よくある質問
### bleibtgleich'26で使われているフォントは？
見出しから本文まで Akzidenz Grotesk Pro の1書体で組まれています。無料で近い雰囲気を出すなら Inter Tight がおすすめです。

### bleibtgleich'26はどんな技術で作られている？
Webflow をベースに、GSAP・Three.js（WebGL）・Lenis・Barba.js が使われています。作品カードの3D表現やページ遷移、慣性スクロールにこれらが使われていると思われます。

### bleibtgleich'26はどんなサイトの参考になる？
デザイナーやエンジニアの個人ポートフォリオ、タイポグラフィを主役にしたスタジオサイトなど、色や写真に頼らず文字組みで実力を見せたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/bleibtgleich-26 からダウンロードできます。
出典: Katapick（https://katapick.com）