Taki. — ポートフォリオの設計と実装

01 / Background仕事の先に、関心や考え方まで伝えたい

以前の構成は、自己紹介、仕事への姿勢、ケーススタディが中心でした。一方で、noteやMediumに書いた文章、登壇、SNSに投稿したプロトタイプ、音楽など、活動の記録は複数の場所に分かれていました。仕事の成果と、その周りで考えたり試したりしていることを、ひと続きに読める構成へ見直しました。

制作中に何度も言葉を探したのが、「関心やテーマの近い人と、議論や試行錯誤を楽しみながら、Craftmanshipを大切に仕事をしたい」ということです。そのために、何ができるかに加えて、どんな問いに興味を持ち、どんな姿勢でつくっているかも伝えることを、このサイトの軸に置きました。

02 / Information architecture集めた活動に、読む順序と強弱をつける

まず、記事・制作事例・実験・登壇・プロフィールという入口を整理しました。トップには自己紹介とSelected Writingを置き、考え方に触れてから、個別の活動をたどれるようにしています。文章は「情報設計・UI」「AI活用」「チーム・プロセス」「エッセイ・記録」「小説・創作」に分類しました。

すべてを同じ大きさで並べると、最初に読んでほしいものが埋もれます。おすすめ記事を先に見せ、通常の一覧との重複をなくし、個人の文章は下部の小さなリストにまとめました。仕事の入口を明確にしながら、個人の関心にも寄り道できる強弱をつけています。記事の表示・非表示は、ローカルの管理画面から変更できるようにしました。

03 / ProcessAIと試作し、ブラウザで見ながら選ぶ

Codexとの対話で、文章の候補、レイアウト、挿絵、操作の振る舞いをつくり、実際の画面を見て修正を重ねました。Aboutの構成はEditorial・Index・Personal、ヘッダーはSeamless・Glass・Fadeの比較画面を用意。ヒーローの文字サイズや背景、文章の組み方も、動くページで並べて検討しました。

フィードバックは「ITっぽさを残したい」「動きは軽く」「URLは変えたくない」といった感覚から始まります。それを、挿絵に描く構造、アニメーションの量、ページとテーマの分け方という具体的な実装条件に落としました。AIに案出しや実装を手伝ってもらい、画面を見て選び、違和感を言葉にして再び直す。この往復で仕上げています。

04 / Visual designひとつの内容に、4つの表情をつくる

with craftは余白と文章、on the webは初期の個人ホームページ、yours sincerelyは手紙のような親密さ、off the recordはモノクロの質感。それぞれに文字組みや背景、挿絵の扱いを変え、同じ活動を違う気分で読めるようにしました。

とくにon the webは、1995〜1996年の個人ホームページと、System 7上のNavigatorを参照しました。当時の資料と画面を調べ、OSの部品、ブラウザの操作、HTMLの本文を区別。時代の異なる装飾が混ざっていた初期案を整理し、文章とリンクを中心に構成し直しました。検索や印刷のボタンにも、実際に使える機能を持たせています。

自己紹介の挿絵も、データモデル、知識グラフ、LLMの推論など、文章で話している構造を描く方向へ調整しました。OG画像とfaviconは複数案を比較し、黒とクリーム、Inter、薄い線画を使う構成に。文字の見た目の左端・下端や、小さく表示したときの読みやすさまで合わせています。

05 / Interaction試してわかった違和感を、設計に戻す

テーマの個性をつくる一方で、読む場所や操作の意味は安定させたいと考えました。制作途中の画面で気になった挙動を見直し、ページを読む体験に合わせて調整しています。

テーマとURLを分ける

当初はテーマごとに別のURLへ移動していました。ライト・ダーク表示のように同じページの見た目を切り替える方式へ変更。URLとブラウザ履歴を保ち、選択したテーマを次のページや再訪時にも引き継ぎます。

動きを足したあと、減らす

テーマごとの登場演出を試したあと、スクロール時のカクつきを見て、本文のフェードやページ間のクロスフェードを外しました。操作への反応は残し、挿絵は静止を基本にしています。

必要なときに戻るナビゲーション

スクロール中に隠れるヘッダーが、停止後や上向きの操作で戻るよう修正。再読み込みでページ下部に飛ぶ問題も見直し、読む・移動する・戻るという一連の操作を確認しました。

06 / Technology内容、表示、操作を分けて実装する

基盤はAstro、React、TypeScript、Tailwind CSSです。AstroでURLごとのHTMLとメタ情報を生成し、Reactで言語切替やダイアログなどの操作部分を実装。テーマ固有の表現にはCSSを使い、内容の更新と見た目の調整を分けて扱える構成にしています。

コンテンツとルーティング

記事やプロフィールをTypeScript・JSONのデータとして管理し、Astroのルートからページを生成。記事の追加や表示順の変更を、レイアウトのコードから切り離しています。タイトル、description、OG画像、canonicalもページごとに設定します。

4テーマの状態管理

HTMLのdata属性とCSSでテーマを切り替え、選択をlocalStorageに保存。以前のテーマ名入りURLからも該当する内容へ到達できるよう、既存リンクとの互換性を残しました。

実装後の検証

型チェックと静的ビルドに加え、記事管理や埋め込みの回帰テストを用意。4テーマのリロード位置とヘッダー、ページ遷移時の履歴復元、390px幅のメニューを確認するブラウザ検証スクリプトも作りました。Xの埋め込みでは、ページ遷移時にReactの描画とDOMの状態が食い違う問題を修正しています。

07 / AI interaction読んだ人と、共通の話題を見つける

ページ下部にはAsk your LLMを設けました。サイトの内容と、訪問者が普段使っているAIに伝えている関心をもとに、共通するデザインや研究のテーマを探す入口です。ChatGPTとClaudeへのリンクに、サイトのURLと依頼文をパラメータとして渡しています。

最初に試した依頼文では、本人への質問集が出たり、訪問者とサイトの運営者が混同されたりしました。そこで「訪問者とtakizawaveを区別する」「双方に根拠のある接点を出す」「最大10件・20行以内」と条件を調整。共通の関心や、一緒に考えられそうなテーマを見つける方向へ、UIの説明とプロンプトを揃えました。

08 / Outcome & next自分のつくり方も見える場所へ

記事、制作、実験、登壇、プロフィールを共通の入口からたどり、同じURLのまま4つのテーマで読めるサイトになりました。文章やビジュアルだけでなく、情報の分け方、リンクの振る舞い、表示を待たせないことまで含めて、自分の仕事の進め方を表現しています。

今回の制作で大きかったのは、AIで案をすぐ形にできるからこそ、「何を残すか」を画面で確かめる時間を持てたことです。動きを減らしたり、記事の強弱をつけたり、依頼文を短くしたり。今後も活動を追加しながら、初めて訪れた人が仕事や関心をたどりやすい構成を育てていきます。