とある大学の大学院ウェブサイトをリニューアルした際に制作したスペシャルコンテンツについて、その制作の流れをまとめました（具体的な表現方法などにはフィクションを含みます）。
ご要望からプランニングまで
お客様からのご要望
ウェブサイトのリニューアルにあたり、お客様から大学院の特色をアピールしたいというご要望をいただきます。お話をうかがうと、次の2点をアピールしたいとのことでした。
- 特定の分野だけを研究していると誤解されがちだが、実は多様な研究が行われていること
- 教員数が多く、近年は大学院内での異分野連携も活発であるということ
最初のアイディア
ディレクターがはじめに考えたのは、研究に関するキーワードを取り出して表現することです。同じキーワードであっても、教員によって異なる切り口から研究されていることを表現できる方法はないものでしょうか？
そこで、最初のアイディアとして、キーワードをランダムに並べて、それを「関連性」に合わせて線で繋げることを思いつきます。そしてキーワードをクリックなどすると、研究者の紹介が表示されるようにするのです。これによって、研究の多様性と関連性をアピールできるはずです。
アイディアの検討
ディレクターのアイディアに、エンジニアもアイディアを付け加え、構想が実現可能かどうかを検討します。エンジニアはここで、キーワードを並べて線で繋げるという表現自体については、技術的に困難ではないと判断します。
しかし、分野同士の関連性を表現するためには、その関連性のデータをあらかじめ用意しておく必要があります。エンジニアの指摘によって、入力のためのUIをどうするのか、そもそも関連度をどう定義すべきかなどの課題が判明します。それがこのアイディアのネックとなる点だったのです。
一方で、キーワード同士ではなく、キーワードと研究者（教員）の情報を結びつけること自体は容易であるということが分かります。
次のアイディア
ディレクターは、たくさんのキーワードが「川を流れるように」表示させるという次のアイディアを思いつきます。まったく関係がなさそうなキーワードが混ざって表示されること自体に、面白さがあると考えたのです。
これにより、閲覧者を、興味のあるキーワードを通じて研究者の紹介ページに誘導できるようになります。また、キーワードをクリックすると関連する複数の研究者が表示されるようにすることで、研究の多様性も表現できます。
アイディアの検討再び
再びエンジニアとディレクターがディスカッションします。エンジニアの視点から考察することで、実現に向けてのハードルは低いことが分かります。そして、ディレクターが画面や機能の想定をスケッチ等でエンジニアと共有し、具体的なイメージのすり合わせや、技術的な課題について議論します。
また、技術的な難しさ以外にも、お客様が実際に行うデータの集約や、入力作業などを想定して、お客様が更新を行う際に難しさはないかを考えます。今回は、お客様側のリテラシーも十分であり、組織の協力体制も整っているとのことなので、特に問題はなさそうです。
お客様への仮プラン提案
ディレクターとエンジニアが、アイディアとスケッチの段階でお客様に提案します。
プランニングから公開まで
より具体的なイメージを作成
グラフィックデザイナーが線画レベルのデザインを作成します。その際に、エンジニアと話し合い、UIについても検討します。どこにボタンを付けるのか、ボタンの押すとどの状態に遷移するのかなどの詳細がこの段階である程度、決まっていきます。
エンジニアは、使いやすさ、実装のしやすさ、グラフィックデザインの実現のしやすさに気を配る必要があります（UI設計）。また、アニメーションなどもどのようなことが技術的に可能かを検討しておきます。
仮実装
エンジニアが、今回のプランのメイン要素である、たくさんのキーワードが「川を流れるように」表示される部分を仮実装します（PHP、JS、Sassによる実装）。ウェブブラウザーで動作する様子を見られるようにすることが第一目標です。このタイミングでディレクターもグラフィックデザイナーもはじめて実際の挙動を目にすることとなります。
お客様に提案
エンジニアとディレクターが、お客様にウェブブラウザーの画面を見せながら、提案と確認を行います。まず、企画意図を説明し、キーワードが流れている様子を画面で確認し、お客様とイメージを共有します。また、キーワードを選択してから研究者の紹介ページまでの導線を線画にて説明します。
見た目と機能の仕様の確定
エンジニアがスタイルのコーディング（Sassによる実装）を行い、出来るだけグラフィックデザイナーの意図、アニメーションの挙動を再現していきます。実装してはじめてわかった見た目上の不具合や、実装上の都合で上手くいかないところ等は、適宜、グラフィックデザイナーに共有し、必要に応じて修正します。
一方、ウェブサイトの管理画面側にキーワードの入力欄を付けるなど（PHPによる実装）、ウェブサイトが持つ教員データとの関連付けも行います。
実装・修正・公開
社内確認のフィードバックを反映させ、ウェブサイト全体とともに公開します。