大学の友人であり、建築設計・音楽制作・コンピューターグラフィックデザインなど、様々な活動を行っているSVRL（相馬孝世 : Soma Takase、 @soma_ad）のポートフォリオサイトの制作しました。
この記事では、SVRLのサイトを制作するにあたって試行錯誤した過程や、工夫を凝らした点などをまとめています。
サイトデザインの基本指針
私自身がSVRLのファンであることもあり、見る人が彼の作品に浸れるサイトを作りたいと考えました。彼は建築設計・CGデザインなど視覚的な作品を制作しつつ、音楽という聴覚的な作品も制作しています。そこで、
「音楽を聴きながら、様々な視覚作品を同時に閲覧できるサイト」
こちらをデザインの基本指針とし、サイトの設計を行いました。今まで自分が「音楽を聴きながら建築作品等を閲覧できるサイト」を見たことがなかったため、サイト制作をすることに決まったときは非常にワクワクしました。
音楽を聴きながら様々な作品（ページ）を見るためには、サイトがSPA（シングルページアプリケーション）で構築されている必要があります。よって、SPAを構築できるJavaScriptフレームワークのVue.jsを土台にサイトを開発しました。
開発を進める上で直面した課題
建築設計をWeb上で効果的にプレゼンする仕組みが必要だった
彼がメインで専門とするのは建築設計でしたので、設計した建物を魅力的に見せるWebデザインが必要です。建築設計の世界では、一般的に完成物の設計趣旨を紙のパネルでプレゼンします。これに対しWebサイトはデジタル媒体ですので、紙のパネルではできないインタラクティブな操作が行えます（スクロールやドラッグ、ピンチやスワイプなど）。この操作を活かして紙のパネルではできないプレゼンの仕組みが求められました。
建築設計を効果的にプレゼンできる一番の方法は、模型を見せるだと私は考えています。しかし、Webブラウザで物質をもつ建築模型を提供することは物理的に不可能です。
そこで、モダンWebブラウザに実装されているWebGLとそれを扱うThree.jsを用いることで、建築3Dモデルを閲覧できる仕組みを取り入れました。
このページでは、建築3Dモデルを閲覧できるだけでなく、スクロールやピンチ操作で拡大縮小、ドラッグやスワイプ操作でカメラの回転の操作が行えます。これにより、紙のパネルだけできないような、建築3Dモデルをインタラクティブに体験することが可能となります。
また、Webサイトの一番の強みは、インターネットに接続できる環境さえあればいつでもどこでも見ることができることです。建築3DモデルをWebブラウザ上で閲覧可能になることで、紙のパネルでは現実的には実現し得ない「世界のどこでも建築モデルを体験できる」ことを疑似的に実現しました。
通信トラフィックを抑える必要があった
これは全てのサイトに当てはまることですが、Webサイトの表示は速ければ速いほど良いものです。
制作したサイトは、通信トラフィックの多い2D画像・音楽・3Dデータのようなメディア形式の作品をメインに見せるものでした。加えてSPAで構築している以上ページ間の遷移は非常に速いので、これらのメディアデータだけ表示が遅いようではシームレスに作品を閲覧することができません。
「いかにメディアを素早く・美しく見せるか」 は常に念頭において開発する必要がありました。
この課題に関しては、YouTubeが非常に参考になりました。
一覧ページでは作品をサムネイル（画質を落とした）とタイトルのだけを表示することで、基本的な通信トラフィックを抑えました。これにより、作品の詳細を見るまでは通信トラフィックの多い綺麗な画像等のデータを読み込まずに済みます。あまりに基本的なことかもしれませんが…
そして、サムネイルをクリックすることで、はじめてその作品の詳細を見ることができるサイト構成にしています。これにより、数ある作品を 「素早く・美しく」 見れることが可能になりました。
ポートフォリオサイト制作を終えて
私は大学では建築学科を専攻していましたが、在学中にWebプログラミングに惹かれICTの道を進むことに決めた人間です。そんな中、大学の友人と一緒にポートフォリオサイトという形でプロジェクトを進めることができ、「建築学科に所属していて良かった」と思いました。これは建築学科に所属していたからこそ完成できたプロジェクトであったと感じています。
SVRLのポートフォリオサイト制作を終えて、やりきったという達成感がある一方で、まだまだ自分が未熟であることに気付づかされました。技術的な側面・プロジェクトマネジメント的な側面・ICTソリューションの企画提案的側面、いかなる側面でも自分はまだまだ未熟であると感じました。
今後も多くのプロジェクトを経験し、たくさんのことを学習しながら、得た知識を身のまわりの人へ感謝の気持ちとして返したいと考えています。
この記事の 最終更新：2020.12.10