ポートフォリオからスタジオサイトへ：目的が変われば、情報設計も変わります

この記事は改修当時の情報設計と協業の方向性を記録したものです。現在の委託範囲はグラフィックデザイン、UI/UX、フロントエンド開発で、確認した範囲に応じて見積もります。詳しくはサービスページをご覧ください。

サイトの主な役割が「これまでに作ったものを見せる」ことから、「今何を作っているのか、どう作るのか、一緒に取り組めるのかを伝える」ことへ変わると、制作実績を中心にしたナビゲーションだけでは足りなくなります。カードを数枚追加しただけで、スタジオサイトになるわけではありません。まず、それぞれのページが誰のどんな疑問に答えるのかを見直す必要があります。

この記事では、サイトのページ、ルート、コンテンツの取り扱いルールをもとに、今回の情報設計の変更を整理します。私の判断は、目的が変わったら、ビジュアルやコンポーネントを整える前に、ページの役割と入口の順序を変えるべきだというものです。制作実績は残しますが、サイト全体の説明をすべて引き受ける役割からは外します。

制作実績への単一の入口から、複数の読み方へ

もともとのポートフォリオが主に答えていたのは、「どんなものを作ってきたか」という問いでした。今のサイトでは、それに加えて、何に取り組んでいるのか、どんな実装方法を使っているのか、どのプロダクトを開発しているのか、協業の相談はどこから始められるのか、作者の背景と制作実績全体はどこで見られるのかにも答える必要があります。

ルートごとの役割は次のように分けています。表のパスは、中国語原文で扱っている繁体字中国語版のものをそのまま示しています。英語版には /en、日本語版には /ja のプレフィックスが付きます。

ルート	主に答える問い	ページの役割
/	このサイトは今、何に取り組んでいるのか	スタジオの位置づけ、ノートへの入口、単一のプロダクト、協業の方向性、プロフィールと連絡先への入口
/notes	どんな方法や記録を読めるのか	公開済み記事の一覧、カテゴリ情報、記事がない場合の空の状態の表示
/notes/[slug]	あるテーマについて詳しく知りたい	個別記事、要約、日付、タグ、本文、関連記事
/products/daily-order	今、開発しているプロダクトは何か	日序の位置づけ、開発状況、機能の方向性、プロダクトへの入口
/services	一緒に取り組む相談はどこから始められるのか	協業の方向性、相談できる課題、連絡先への入口
/about	誰が取り組み、どんな経験を積んできたのか	実際の背景、仕事の進め方、経歴、実装したものへの入口
/about/work	どんなサイト、システム、ビジュアルを作ってきたのか	制作実績の一覧と、サイト・システム／コンテンツ・ビジュアルの表示切り替え

この分担は、名詞ごとにページを増やすためのものではありません。一つの問いに対して、一つの主な入口を用意するためのものです。制作実績は /about/work で見られ、プロダクトには専用の紹介ページがあります。どちらも、スタジオ全体の位置づけまで説明する必要はありません。

ホームは、制作実績へ送るだけのページではなくなりました

ホームの読み順は、最初に制作実績のカードを並べる構成ではなくなっています。まず短い位置づけと説明でサイトの取り組みを伝え、その後にノート、単一のプロダクト、協業の方向性、プロフィールと連絡先への入口を順に置いています。

この順序なら、読者はまず「ここに何があるのか」を理解し、そのうえで方法を読む、改良を続けているプロダクトを見る、協業の進め方を知る、詳しい背景を確認するといった選択ができます。ホームは、制作実績を縮小して並べる場所よりも、目的に応じて読み進める先を選ぶページに近くなります。

ホームのノート欄には、その言語で公開済みの最新記事を最大3本だけ表示し、全件一覧への入口を用意しています。公開済みの記事がなければ、その状態が分かる文言を表示します。同じ記事を複製して余白を埋めることはしません。小さなルールですが、「充実して見える」状態を架空のコンテンツで保つことはできない、という情報設計上の制約になります。

プロダクト欄でも同じ判断をしています。名前と入口が確定しているプロダクトは一つだけなので、ナビゲーションは詳細ページへ直接つながります。二つ目のプロダクトがない段階で、/products の総覧ページを先に作ることはしていません。

ノートは方法の記録であり、制作実績カードの延長ではありません

制作実績のカードは、「これは何か、どこで見られるか」を短く伝えるのに向いています。ノートが扱う問いは別です。判断、手順、制約、検証した範囲を説明し、最終画面だけでなく、その結果がどう形になったのかを読者が理解できるようにする必要があります。

そのため、/notes と /notes/[slug] は独立したコンテンツの入口として扱っています。一覧に載るのは、公開済みで公開日時を迎えた記事だけです。個別記事のページは、本文、目次、タグ、日付、関連記事を受け持ちます。下書きや未完成の翻訳は公開記事のリンクとして扱わず、「整理している途中」と「公開して読める状態」を分けています。

この区別によって、制作実績ページを何でも説明するページにしてしまうことも避けられます。制作実績ページには、実際に手がけた範囲を残します。情報設計の判断、コンテンツの運用手順、検証の限界を詳しく説明するときは、ノートに任せます。どちらも実装を扱えますが、訪れる読者が期待する情報の深さは異なります。

制作実績は残っていますが、唯一の答えではありません

今の主なナビゲーションには、ノート、プロダクト、協業、プロフィールを置いています。制作実績は、最上位の唯一の入口ではなくなりました。ただし、削除したわけではありません。/about からは引き続き実装や制作実績へ進めますし、/about/work には制作実績全体を残しています。旧 /work も互換性のために閲覧可能なURLとして残し、新しいルートを canonical として示しています。

ここには、異なる二つの役割があります。

• 主なナビゲーションは、読者に今、何を先に理解してほしいかを決めます。
• 互換ルートは、既存のリンクから元の内容を引き続き見つけられるようにします。

両者を混ぜると、「何でもある」ようには見えても、読み進める順序が分からないナビゲーションになりがちです。古いURLを残すことと、古い情報設計をホームや主なナビゲーションに残すことは別です。

制作実績の内容は現在、サイト・システム、コンテンツ・ビジュアル、そして独立して表示する AIGC のキャラクタービジュアルという三つの切り替え可能な区分に分かれています。前二者は実際に手がけた仕事を示し、AIGC は AI 生成のキャラクタービジュアルとして明確に表示します。新しいプロダクトの事例や、完全な AI プロジェクトとして見せ直すものではありません。サイトの目的が変わっても、過去のすべての制作実績の背景を同じ物語に置き換えられるわけではないからです。

プロダクトと協業には、空のページではなく境界が必要です

「スタジオサイト」と呼ぶと、プロダクト一覧、サービスプラン、ケーススタディ、整った問い合わせフローまで必要に思えるかもしれません。しかし、現時点のコンテンツには、そのすべてを作る根拠がありません。そこで、情報設計には意図的に作っていない部分があります。

日序は、今のところ唯一の明確なプロダクトへの入口です。ページにも、引き続き改良中であることを示しています。実際に取り組んでいるプロダクトを紹介することはできますが、そこから二つ目のプロダクト、完成した製品群、確定済みの機能範囲があるとは言えません。

/services も、協業を固定のプランとしてまとめたページではありません。説明しているのは、アイデアを明確にし、業務や作業の流れをツールに整理し、AIと一緒に最初の版を作るという、形になりつつある協業の方向性です。相談の出発点を提供するものであり、すべてのプロジェクトが同じ手順で進むことを保証せず、成熟したサービス商品がすでにあるとも述べていません。

足りない部分を隠さないことで、ページの「完成されている感じ」は少し弱くなるかもしれません。それでも、今、公開して裏づけられる状態には近づきます。情報設計は、将来できるはずのコンテンツの置き場所を先に作ることよりも、実際に存在するものを認めることから始まります。

多言語のURLも情報設計の一部です

このサイトでは、繁体字中国語のホームを / に置き、英語版は /en、日本語版は /ja に置いています。同じ固定ページには、言語ごとに対応するURLがあります。言語選択、ページの lang 属性、メタデータ、リンクは、共通のURL情報をもとに対象の言語を判断できます。

ノートには、さらに厳しいルールがあります。記事のURLを生成するのは、その言語の記事が実際に存在し、翻訳が完成している場合だけです。中国語原文が記録した段階では、未翻訳だった英語版と日本語版のノート一覧に、記事がないことを伝える表示を使っていました。現在は完成した翻訳がそれぞれの一覧に載りますが、未翻訳の記事に架空のルートを用意することはありません。繁体字中国語の記事があるという理由だけで、偽の翻訳ページを生成したり、無関係なホームへ読者を送ったりはしません。

これは翻訳だけでなく、コンテンツへの入口のルールです。言語の切り替えでは、「この内容がどの言語に存在するか」を伝えるべきです。存在しない場合は、翻訳済みと表示しながら実際には同じ記事ではないページを用意するよりも、記事がない状態を示すほうが明確です。

この設計で解決したことと、証明できないこと

原文で記録したルート、ページコンポーネント、コンテンツデータ、静的出力のチェックから、次の点を確認できます。

• ホーム、ノート、プロダクト、協業、プロフィール、制作実績には、それぞれ区別できるページの役割があります。
• 制作実績の主なルートは /about/work で、旧 /work は閲覧可能な互換入口として残っています。
• 多言語の固定ページは対応する言語のルートを使います。存在しないノートの翻訳を、記事ページや sitemap にあるように見せることはありません。
• 公開ページには実際のHTMLコンテンツがあります。記事ページは、ブラウザがJavaScriptを実行して初めて中身が現れる空の枠ではありません。

この証拠から言えるのは、「情報設計が実装され、技術面のチェックを受けている」ということです。次の結論までは支持できません。

• ユーザー調査やアクセス解析のデータがないため、この順序が旧サイトより必ず理解しやすいとは言えません。
• SEOの順位、流入、コンバージョン、協業の成果に関するデータがないため、情報設計が事業上の成果を生んだとは主張できません。
• レスポンシブ対応全体、アニメーションのテンポ、読み心地は、実際にユーザーが見て確認する必要があります。ビルドの成功で、その確認を代替することはできません。
• プロダクトと協業の説明は、現在の公開範囲に限られます。ページ上のイメージから、未確認の機能やサービスがあると判断することはできません。

次にサイトを整理するとき、先に確認すること

1. 追加したいページを並べる前に、サイトが今、果たすべき主な役割を書き出します。
2. 読者が繰り返し尋ねる問いを挙げ、それぞれに主な入口を一つ割り当てます。
3. ホームは読み進める先を選ぶ役割にし、すべての内容を制作実績カードに押し込みません。
4. コンテンツ、機能、公開範囲が成立してから、プロダクト、カテゴリ、事例のページを追加します。
5. 古いURLを残す必要がある場合は、互換性と主なナビゲーションを分けて扱います。過去のルートに、新しい読み順を決めさせません。
6. その後に、ページの役割をコンポーネント、スタイル、アニメーションへ落とし込み、出力、操作、主観的な読み心地をそれぞれ確認します。

このサイトにとって、ポートフォリオからスタジオサイトへ進むことは、「ノート」のリンクを一つ増やすことでも、ホームをもっと大きな制作実績の壁にすることでもありません。位置づけ、方法、プロダクト、協業、背景、制作実績の役割を分け、まだ存在しないコンテンツは空白のままにしておくことが変更の中心です。そうして初めて、新しいページは見た目の穴埋めではなく、情報設計を補うものになります。

この記録の範囲

この記事は、中国語原文が扱った段階でリポジトリに実装されていたページ、ルート、コンテンツ取得処理、スタジオサイトの開発仕様を整理したものです。翻訳一覧の状況については、上で現在との違いを補足しています。ページの役割と公開範囲を、読者が理解できる判断として説明しています。モックアップ、計画中の機能、未完成の翻訳、ビジュアル面の受け入れ確認、検索での成果を、完成済みのプロダクトの事実としては扱っていません。