個人サイトを作り直し、公開しました。
名前は「Philosophy Music Journey」です。
以前のサイトはWordPressのテンプレートを使っていました。しかし、活動が増えるにつれて、いま何を作っていて、それぞれがどうつながっているのかを十分に伝えられなくなっていました。
音楽のWebアプリがあります。哲学を扱ったデジタル作品があります。地域文化と身体表現を結ぶ試みがあり、AIを使った商品開発や業務支援もあります。ブログも二つあります。
一つひとつは別々の成果物です。しかし私の中では、すべてが「考える。奏でる。つくる。」という同じ運動から生まれています。
今回の再構築で目指したのは、単に見た目を新しくすることではありませんでした。散らばっていた活動を一か所へ集め、その関係が見える場所を作ることでした。
個人サイトは、経歴を置く場所だけではない
個人サイトというと、プロフィール、経歴、連絡先、過去の実績を並べた「名刺」のようなものを想像しがちです。
もちろん、それらも必要です。ただ、活動の種類が増えるほど、名刺型のサイトには限界が出てきます。
完成した作品だけを並べると、いま進んでいる研究や試作が見えません。時系列でブログ記事を並べるだけでは、異なる領域の仕事がどこで接続しているのかが分かりません。カテゴリーを細かく分けすぎると、今度は横断していること自体が伝わらなくなります。
そこで今回は、サイトを「保管庫」ではなく「インターフェース」として考えました。
インターフェースとは、人と情報、人と道具をつなぐ接点です。個人サイトも同じように、訪れた人と私の活動をつなぎ、さらに作品同士、ブログ同士、問いとプロダクトをつなぐ接点になり得ます。
トップページの言葉を「考える。奏でる。つくる。」にしたのも、そのためです。
哲学は考えること、音楽は奏でること、開発はつくること、と完全に分かれているわけではありません。考えることが作品になり、演奏する身体がプロダクトの操作になり、技術的な試作が新しい問いを生みます。三つの動詞は、専門分野の名前というより、活動が変化していく順序を表しています。
完成品だけでなく、「いま動いているもの」を見せる
新しいサイトには、作品、プロダクト、サービスという三つの区分を設けました。
作品には、軌道と音響生成を結びつけた「Orbital Pulse」や、西洋哲学史の「存在」を二重螺旋として可視化した「存在のDNA」を掲載しています。
プロダクトには、奇数連符のグルーヴを設計する「Odd Engine Beat」、スマートフォンの傾きで演奏する「Smart Theremin」、身体を振って三線風の音を鳴らす「Smart Kachashi」、スマートフォンを鳴子にする「デジタル鳴子」などをまとめました。
サービスには、MPCの学習を支援する「Xross Vibes」や、AIとの対話から商品企画と小さな試作品づくりを進める「AI商品開発Skills」を掲載しています。開発中のものは、完成したもののように装わず「COMING SOON」と表示しました。
重要だったのは、完成品だけを選んで立派に見せることではありません。「いま、動いているもの」を含めて、現在地が分かるようにすることでした。
個人の活動は、企業の製品カタログほど固定されていません。研究が作品になり、作品からツールが生まれ、ツールを使った経験がサービスへつながることがあります。途中段階を隠すより、状態を明示して見せるほうが、活動の実像に近いと考えました。
デザインは、強さを少しずつ調整しました
デザインの出発点はAppleのような、白を基調とした明快な画面でした。ただし、そのままではゴシック体の強さが前面に出て、少し硬く見えました。
そこで一度、柔らかな明朝体や低彩度の色を使った、北欧と日本の中間のような方向も試しました。しかし今度は、静かになりすぎて、制作や実験が動いている感覚が弱くなりました。
最終的にはApple風の構造へ戻しながら、文字のウェイトを抑え、青、ラベンダー、淡いピンクを柔らかく使う方向に落ち着きました。
この過程は、デザインを一度で「当てる」作業ではありませんでした。
画面を見て、「強すぎる」「急に軟派に見える」「ここだけ灰色で寂しい」「SNSが目立ちすぎる」といった違和感を言葉にし、その都度調整しました。
たとえば、APPROACHのセクションは単色の濃い背景から、青紫の光と軌道線を持つ奥行きのある画面へ変えました。一方、SNSは大きなカードで主張させず、細い罫線と小さな文字だけの一覧へ抑えました。
Smart Kachashiの紹介画像には大きな空白がありました。そこで空白を単に切り落とすのではなく、演奏画面をスマートフォンのように見せ、右側を「振る。鳴る。踊る。」という体験の説明に使いました。
こうした修正を通じて分かったのは、デザインの良し悪しは、装飾の量だけでは決まらないということです。どこを強くし、どこを引かせるか。その強弱が、サイト全体の人格になります。
Codexとの制作は、指示ではなく対話だった
今回のサイト制作では、Codexを使いました。
ただし、「いい感じのサイトを作って」と一度頼んで完成したわけではありません。
最初に、現在のページ構成、掲載したいブログ、作品、プロダクト、サービスを整理しました。次にHTMLで確認できるモックを作り、実際の画面を見ながら、文字、色、余白、画像、説明文、リンクを一つずつ直しました。
作品の分類が違えば移動させました。不要な名称や顔アイコンのような要素は削除。外部リンクを追加し、リンク先から紹介画像を用意しました。さらにスマートフォンで崩れないように表示幅ごとの調整も加えました。
最後は、Xserverのファイルマネージャーへ配置できるように、HTMLと画像を静的なファイル一式へまとめ、ZIPを展開すれば動く形に。画像参照や圧縮ファイルの内容も確認し、公開後には主要表示とリンクも確認。
この制作方法は、「AIに仕事を任せた」というより、言葉と画面を往復しながら設計を具体化した、と表現するほうが近い。
人間側の役割は、好みを示すことだけではありません。何が違うのかを見つけ、どこまでならよいのかを判断し、公開する情報の責任を持つこと。AI側は、その判断を素早く形にし、整合性を保ちながら修正を重ねる役割を担うのだと思います。
WordPressから静的HTMLへ移した意味
今回の公開版は、静的HTMLを中心にしています。
静的HTMLとは、ページを表示するための完成したファイルをサーバーへ置く方式です。記事投稿や管理画面を中心とするWordPressとは、更新の考え方が異なります。
静的な構成には、管理画面から気軽にページを追加する仕組みはありません。その代わり、今回のような小規模なポートフォリオでは、表示内容とファイルの関係が分かりやすく、必要な機能だけで構成できます。
もちろん、静的HTMLが常に優れているわけではありません。頻繁な記事更新、複数人での編集、検索、会員機能などが必要なら、CMSやWebアプリのほうが適しています。
大切なのは、流行している技術を選ぶことではなく、自分の更新方法に合う構造を選ぶことです。
今回はブログ自体を別に運用しているため、個人サイトには記事を蓄積する管理機能より、作品と外部の活動を見渡せることが必要でした。その目的には、静的なポートフォリオが合っていました。
サイトを作ることは、自分の活動を編集することだった
個人サイトを作る過程では、デザイン以上に「何を載せ、何を載せないか」を考える時間が必要でした。
活動を一覧にすると、似ているものと違うもの、完成しているものと構想段階のもの、今後育てたいものが見えてきます。つまり、サイト制作は見た目を整える仕事であると同時に、自分の活動を編集する仕事でもあります。
今回、すべてを一つの肩書きへ収めることはしませんでした。
哲学、音楽、テクノロジー、一次産業への関心、AIを使った事業開発。それぞれを無理に統一する代わりに、それらが交差する場所をサイトとして示しました。
個人サイトは、過去をきれいに整理して置く棚ではありません。現在の活動へ入口を作り、次に何を作るかを考えるための地図にもなります。
公開したことで完成ではありますが、活動が続く限り、内容は変わっていきます。新しい作品やサービスが形になれば追加し、説明が実態とずれれば書き直します。
今回の問いは、「どうすれば立派な個人サイトを作れるか」ではありませんでした。
「いまの自分の活動を、どうすれば無理なく一つの場所で見せられるか」という問いでした。
その答えとして、Philosophy Music Journeyを公開しました。
よければ、現在の作品と試みをサイトで見てみてください。
コメント