PortfolioOverseas / UAPicked 2026.09.26

bleibtgleich'26

ポートフォリオのWebデザイン参考 — UX/UIデザイナー・クリエイティブデベロッパー（個人ポートフォリオ）

出典: bleibtgleich.dev

Editor's note — 編集部の視点

名前を、ポスターみたいに積み上げただけ。

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

LunaType & Whitespace

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

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

Color

bleibtgleich'26の配色

Typography

使用フォントと無料の代替

見出し・本文・ラベル（全要素）

Aa あア

使用: Akzidenz Grotesk Pro
代替: Inter Tight

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型90px · 0.88 · 500

Structure

ページ構成（上から順）

01
ヒーロー
左上に黒い顔型のロゴマーク、縦罫の右に「Based in Kyiv / Working w/ TFTL」。罫の下端に巨大な名前「Maksym Bleibtgleich」を置き、右上に角丸の「Menu」ボタン。
02
ステートメント
「Design Digital Products, UX/UI & Web-flow dev.」を語ごとに改行し、縦罫を挟んで左右に振り分けて積む。
03
サービス・一言
薄グレーの正方形タイルを横に並べ、短い説明文と「the best ideas deserve execution.」の大見出しを段差で組む。
04
Work 24-26
大きな余白の中央に作品サムネイルが球体状に浮かび、左右に「Work」「24-26」を配置する。
05
Awards & Recognitions
見出しを「Recog-nitions」とハイフンで折り、年・プロジェクト・アワード名・賞の4列を罫線の表で並べる。
06
フッター
「Everything that exists had first existed as … nothing more than a sentence.」を段差で組み、中央に数字と画像。連絡先、SNSの丸ボタン、最下部に「bleibtgleich」のロゴタイプ。

Interaction

アニメーション・インタラクション

作品のカード群は Three.js で平面メッシュを球面上に配置し、スクロールやカーソルで回転させていると思われる。CSS の 3D transform（rotateY + translateZ）でも近い表現は再現可能
Barba.js があるため、ページ遷移はリロードせずにトランジションでつないでいると思われる
巨大見出しは GSAP で語ごとに overflow: hidden のマスクから立ち上げる演出で再現可能
Lenis による慣性スクロールで、余白の多い長いページでも間延びせずに流れる

スクロールのコマ撮りLenis · 400–2500ms

検出された技術:GSAPThree.jsLenisBarba.jsWebflowWebGL

Reproduce

再現するときのポイント

01書体は太めのグロテスク1種に絞り、階層はサイズと配置だけでつくる
02縦罫1本をグリッドの基準線にして、見出しを左右に振り分ける
03語ごとの改行とハイフネーション（Web-flow、Recog-nitions）は手で制御する
041画面に1メッセージ。余白を詰めずに、スクロールで次の言葉を待たせる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全6セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

bleibtgleich-26.katapick.md

1---
2title: "bleibtgleich'26 再現用デザイン仕様書"
3source: https://bleibtgleich.dev/
4katapick: https://katapick.com/sites/bleibtgleich-26
5category: ポートフォリオ
6region: 海外 (UA)
7tags: [大胆なタイポ, モノクロ, 余白, ミニマル, 3D/WebGL, テキスト主体]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# bleibtgleich'26 — 再現用デザイン仕様書
17 
18> 名前を、ポスターみたいに積み上げただけ。キーウのデザイナー兼エンジニアによるポートフォリオ「bleibtgleich'26」は、白地に黒の1書体と縦罫1本だけで、組版の精度そのものを実績として見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22