サイトリニューアル実施
2日で「統合中枢」へコンセプト転換
Personal Notesという名前で運用してきた個人サイトを、2日間で全面的に作り直した。変えたのは配色やトップページだけではない。記事、ツール、実装事例、人物概要を、思考・実践・判断・実装が循環する一つの構造へ組み替えた。
以前のサイトは、内容を置けても関係までは見せられなかった
以前のTOPは、白に近い、わずかに黄みを帯びた背景に大きな「PERSONAL NOTES」を置き、その下に記事を並べる静かなアーカイブだった。
当時の画面が悪かったわけではない。記事を蓄積する場所としては成立していた。余白があり、読むことを邪魔せず、個人の記録を置く場所として十分に機能していた。
ただし、掲載する内容が増えるほど、構造上の限界が見えるようになった。記事はある。ツールもある。実装事例もある。プロフィールもある。しかし、それぞれが何によってつながっているのかが画面から伝わらない。
最大の問題は、内容が不足していることではなかった。内容の増加に、サイトの意味構造が追いついていなかったことである。
変えたかったのは見た目ではない。
サイトの中にあるものの関係を、説明できる構造である。
サイト名ではなく、サイトの役割から設計し直した
今回、最初に決めたのは色でもレイアウトでもない。このサイトを何と呼ぶかでもなかった。決めたのは、この場所が何をする機構なのかである。
記録を保存するだけなら「Personal Notes」で足りる。しかし現在のサイトには、考えたことだけでなく、作ったツール、実際に公開したプロダクト、改善の過程、判断基準、次の実践へ戻すための記録がある。
異なる領域から得た知識を集め、実践に変換し、結果から構造を取り出し、次の判断へ再投入する。この役割を一言で表すため、TOPを「統合中枢」とし、その中心に「知識統合運用機構」という概念を置いた。
- 記録群思考と判断基準を蓄積する場所
- 構築機構群実際に使える形へ変換したツールの集合
- 実装記録群構想から公開までを通した成果の証拠
- サイト概要実践から再投入までの運用手順
- 人物概要複数領域を横断する設計者としての現在地
領域ごとに色を分け、全体では一つの世界観に戻す
私は複数領域を横断しているが、マーケティングとUXとAIを同じものとして扱っているわけではない。それぞれには異なる目的、言葉、判断基準がある。
その違いを消さないため、業務構造設計、情報基盤設計、人工知能運用、体験設計、実装機構、市場干渉設計には、それぞれ識別できる色を持たせた。一方で、背景、文字、罫線、余白、タイポグラフィは共通の設計言語で統一している。
目指したのは、カテゴリごとに別サイトを作ることではない。同じ中枢に接続された別々の領域として見せることである。
多領域統合を、説明文ではなく動きとして見せる
今回もっとも時間をかけたのは、静止画として整えることではなく、概念を動きに変えることだった。
TOPでは、複数の波形が画面を横断し、6つの領域を結ぶ。線は一つの中心から放射するだけではなく、重なり、離れ、再び交差する。これは、各領域が単独で完結せず、ある領域で得た知見が別の領域へ影響していく状態を表している。
人物概要では、6つの領域がそれぞれの軌道を持ち、順に選ばれ、最終的に中央へ集積する。統合された状態で終わるのではなく、中央から各領域へ再び光が戻る。
動きは見た目を豪華にするために入れたのではない。文章だけでは伝えにくい関係と循環を、触れて理解できる状態にするために使った。
記事、ツール、実装事例を、同じ実践の別の断面としてつなぐ
旧サイトでは、記事が主役で、ツールやプロフィールは付随するページに見えやすかった。今回のリニューアルでは、その上下関係をなくした。
構築機構群では、計算・判定、画像処理、PDF操作、テキスト整形、業務アプリ、ブラウザ拡張という用途単位でツールを再編した。これは単なるツール一覧ではない。記事の中で考えたことや、実務で発生した不便を、実際に使える形へ変えた結果の集合である。
実装記録群では、完成画面だけを並べるのではなく、何を観察し、どのように判断し、どこまで実装し、どう検証したかを追える構成にした。企画、情報設計、デザイン、実装、運用まで、掲載している事例はすべて自分で一貫して担当している。
一つの実践から、判断の記録が記事になり、反復できる処理がツールになり、成果と検証のまとまりが実装事例になる。見せ方は違っても、すべて同じ実践から生まれた別の断面である。
実践は、公開した時点で終わらない
サイト概要には、私が実践をどのように次へつなげているかを6段階で置いた。
01 実践、02 要素分解、03 構造抽出、04 判断基準化、05 記録集積、06 実践再投入。
何かを作ったあと、「成功した」「失敗した」で終えると、その経験は一回限りになる。結果を再現要因、阻害要因、変化条件、次の仮説に分解し、判断基準として残すことで、次の実践の初期値にできる。
そのため、この6段階は最後で停止しない。06の実践再投入から、再び01の実践へ戻るループとして設計した。
リニューアルは、最初の案をそのまま実装したものではない
画面を作り、実際のPCとスマートフォンで確認し、余白、文字の可読性、日付の位置、ナビゲーションの整合性、アニメーションの入り方を一つずつ見直した。意図したスライドインがカクつけば実装を戻し、ページ間でヘッダーの高さが違えば共通構造を再調整した。
リニューアルは、最初のデザイン案をそのまま実装したものではない。実践と観察を短い間隔で繰り返しながら、判断を積み上げた結果である。
2日で作れたのは、考えずに速く作ったからではない
今回の全面リニューアルに使った期間は2日間である。しかし、2日で作ったという事実を、制作速度だけの話にはしたくない。
短期間で全体を組み替えられたのは、サイトの中に置く記事、ツール、実装事例、判断基準がすでに蓄積されていたからである。ゼロから中身を考えたのではなく、存在していた断片を読み直し、現在の自分を最も正確に表す構造へ再編集した。
企画、情報設計、デザイン、実装、検証を分業せず、自分の中で連続して進められたことも大きい。見た目を決める人と実装する人の間で意図を翻訳する必要がない。コード上の制約を見てデザインを変え、実機での違和感を見て情報構造まで戻れる。
AIも制作支援には使った。ただし、何を表現するか、何を残すか、どこに違和感があるか、どの状態を完成とするかは自分で判断した。AIで速く作ったというより、自分の判断を高速に実装し、検証するためにAIを使った、という方が正確である。