学生向けにプロダクト開発を支援するプログラムを掲載・エントリー募集をするサイトをリニューアルしました。ページの作成や修正が柔軟に行えるようにCMSをカスタマイズし、ターゲット目線のわかりやすい導線設計はもちろん、運営側更新のしやすさも改善しています。
メインビジュアルは、ロゴの「ガレージ」を3Dで動かすことで多面的に物事をみるような思考の柔軟性を表現。じんわりとガレージの色が変わっていく様子は、プログラムに取り組む学生の変化や成長を彷彿とさせます。将来的なサイトの使いやすさを見据えながらも、シンプルなデザインと構成でターゲットである学生にもわかりやすいつくりのサイトとなっています。
当初の打ち合わせでは、まず課題感や現状についてのお話を伺うことからスタート。サイトに対する学生からの意見や、運営側が検討していることなどをディスカッションの上、課題や目的を言語化していきました。
結果、北大テックガレージ様の目的である「エンジニアコミュニティの拡大・発展」を軸とすること、そしてウェブサイトの機能面では「学生目線のわかりやすさ」、「運用側の更新のしやすさ」、そして「コンテンツの拡充」という主に3つの課題が浮かび上がりました。それらをウェブサイトの目的、解決すべき課題とし、プロジェクトがスタートしました。
ターゲットに届くデザインを追求する上で、その塩梅は絶妙でした。一般的なアントレプレナーシップを感じさせる「攻めのイメージ」からは遠く、より知的好奇心の強さを感じさせる“北大テックガレージらしさ”があったためです。
打ち合わせではその“北大テックガレージらしさ”を言語化し、デザインの方向性が決まってから制作はスタート。
提供するプログラムにおける「成果物」ははっきりと可視化しにくいものだったので、最初の案は抽象的なモチーフの案でした。まずは、ひとつのビジュアルにうんうんと悩みながらデザイナーとともにアイディアを広げ、ロゴをモチーフにした代案を作成するとデザイナーもディレクターも納得の「動き」をイメージできるビジュアルができあがりました。
それが現在のビジュアルになります。
https://hokudai-hutg.com/
3Dのアニメーションをつけ、ロゴからイメージを膨らませた「ガレージ」のモチーフをぐるぐると回すことで多面的に物事を見るような思考の柔軟性を表現しました。スクロールに応じて色がじんわりと変わっていく様子は「変化」や「成長」など学生の姿勢もイメージしています。
サイトの目玉はなんといってもプログラム「Spring/Summer Founders Program（SFP）」の更新機能。CMSで更新したプログラムの記事がそのままトップページのアーカイブに追加されるように工夫をしています。
さらにプログラム記事内のボタンや見出しデザインをしっかりと作り込んでいることもポイントです。更新スタッフでも簡易的なページを作れる仕組みにもなっており、サイトにデザインを合わせながらオリジナルのページを作ることがより簡単にできるようになりました。
ほかにもトップページ以外のページを運営側で編集ができるようにするなど、情報量は増やしつつ更新性も担保しています。
北大テックガレージはプロジェクトがスタートして3年ほど経過するタイミングとのことで、今後はますますそのコミュニティは深く、そして広がっていくことと思います。そして制作したウェブサイトはメンテナンスをしながら多様な使い方ができる可能性に溢れています。ひとつのプラットフォームとして適切に機能するように、今後もGEAR8の強みを活かして関わるみなさまのお力になれるよう、頑張りたいと思います。
GEAR8様とのHP制作作業は、私たちにとって、このプロジェクトがどのような意味を持ち、今後どうしていきたいのかといった方向性を考える機会になったと思います。その理由は、担当してくださった石塚さん、北川さんのお二人がじっくりと話を聞き、次回の打ち合わせまでに「このようなイメージでどうでしょうか」と何点ものHPのイメージを示してくださったことにあります。その過程で、私たちのイメージする「北大テックガレージ」の輪郭が浮かび上がっていきました。私たちがうまく言語化できていないイメージを、うまくビジュアルに作り込んでくださったからこそ、お互いが納得するHPに仕上がったのだと思います。HPの制作を通じ、私たちに新たな気づきと、北大テックガレージのエンジニアコミュニティを発展させていくという目標を再度明確にしてくださった期間になりました。本当にありがとうございました。
