作品メイン画像

画像をタップして詳細を見る

WEB

有志チーム制作

北海道情報大学安田研究室
WEBサイト制作

北海道情報大学安田研究室の公式WEBサイトがなかったため、自らゼミ生に呼び掛け、有志メンバーでWEBサイト制作を行いました。

制作日数

5か月 (2025年 8月 - 12月)

制作学年 / 制作人数

大学3年生次 / 6名

制作技術

HTMLcssJavascriptFigma

担当

リーダー / サイト設計 / デザイン

制作の背景

課題

ゼミのメインテーマが「WEBを中心としたクリエイティブ・ソリューション」にもかかわらず、公式のWEBサイトがなく、ゼミの詳細を知る場が少ない。

目的

ゼミ選びを行う下級生や学外の方に安田研究室についてより詳しく知ってもらうこと。

ターゲット

大学生1・2年生 → どんなゼミで何をしているか、どんな人がいるかを知ってもらう。
学外の方 → 活動を通して関わっている方々により詳しくゼミについて知ってもらう。

デザインコンセプト

ゼミロゴカラーの青とピンクを使いつつ、明るいゼミだとわかるようにスタイリッシュさと親しみやすさの両立を目指した。

情報設計

ゼミ活動についてはSNS更新が活発なため、サイト情報としてニュースなどのカテゴリは置かず、メンバー紹介やインタビューなど、このサイトでしか見れない情報を増やした。

制作プロセス

完成までの流れを紹介します。

Phase 01

サイト設計

企画・リサーチ

集まったメンバー(6名)でサイト設計を行った。何をどういう風にコンテンツ化するかについて話し合って決定した。

Phase 02

デザインコンセプト

設計・ワイヤー

ワイヤーフレームを作り、デザイン案について検討した。特にメインビジュアルを何パターンか提案を行った。

Phase 03

情報収集・写真素材撮影

デザイン

ゼミの活動内容や、写真について集め、メンバー紹介写真については大学スタジオにて新たに撮影を行った。

Phase 04

デザイン・実装

実装・完成

デザインを固め全ページ作成し、コーディング・実装。フィードバックを反映し完成させた。

こだわりと成果

Point 01

こだわった点

明るく活動的なゼミなのでそれらを伝えつつ、公的なゼミの詳細が伝わるようにスタイリッシュさを両立させられるデザインを目指しました。
また、ゼミ担当教員が特徴的なので専用ページを作り、親しみやすさを演出しました。
ゼミの活動自体はSNSでの情報発信がメインになっている現状があったので、サイトでは最新ニュースなどのコンテンツを作らずに、メンバー紹介やプロジェクトの詳細など、サイトでしか知ることのできない情報を増やしました。

Point 02

苦労した点

見やすくわかりやすいサイトにするために、情報をどこまで載せるかのライン引きに苦戦しました。
今後も更新していき、代々引き継がれていってほしいとも考えていたので運用しやすいように年度ごとに更新する箇所を絞るなど、かなり検討を重ねました。

Point 03

学んだこと

Webデザインを本格的にできるメンバーが少なかったので、ページ全体のあしらいが一辺倒になっているように思えるので、邪魔にならない程度にもう少しイラスト素材やあしらいを増やせたら良かったと思いました。
ゼミ活動の片手間に制作を行っていたため、うまく並行して進めていくことができず停滞し、進行が遅れた部分もあったので、ディレクションについての面をもっと学び、円滑な制作の進め方を身に着けていきたいと痛感しました。

← Previous フードドライブってなんですか?WEBサイト制作 Next → 「あのね」WEBサイト制作
メインビジュアル 1枚目 メインビジュアル 2枚目