作品メイン画像

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

WEB

ゼミ活動制作

株式会社大宮ホーロー北海道製作所
公式WEBサイトリニューアル

札幌商工会議所 × 北海道情報大学「クリエイティブ・ミートアップ2025」における産学連携プロジェクトとして、北海道情報大学 安田研究室にて、「株式会社大宮ホーロー北海道製作所」様の公式Webサイトリニューアルをおこないました。

制作日数

8か月 (2025年 7月 - 26年 3月)

制作学年 / 制作人数

大学3年生次 / 4名

制作技術

HTMLcssJavascriptFigma

担当

リーダー / サイト設計 / デザイン / トップページの実装

実際のサイトはこちら ↗

プロジェクトの背景

課題

道路標識製造という専門業種ゆえに若年層への認知度が低く、新卒採用に苦戦。
既存サイトはスマートフォン未対応で、企業の強みや経営理念といった情緒的価値を伝えるコンテンツも不足していた。

目的

若年層求職者への認知拡大と、採用応募数の増加。

ターゲット

就職活動中の若年層(新卒・第二新卒)。求職者。

デザインコンセプト

誠実さと親しみやすさの両立を追求。実際の標識データをサイト内に散りばめ、道路標識製造会社らしさを演出した。

情報設計

既存要素を「継続・削除・新設」の3軸で整理しサイトマップを作成。
トップへの情報集中を解消し、企業の強みや経営理念などのコンテンツを新規追加した。

制作プロセス

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

Phase 01

ヒアリング

企画・リサーチ

本社訪問・工場視察を通じて課題を特定。若年層との認知ギャップを本質的な課題として共有した。

Phase 02

設計・会議

設計・ワイヤー

サイトマップ・ワイヤーフレームを作成し、企業側と認識のすり合わせを会議にて行った。

Phase 03

デザイン

デザイン

デザインコンセプトの策定、カラー・フォント選定、実際の標識データを活用したビジュアル制作。

Phase 04

実装・運用

実装・完成

HTML/CSS/JavaScriptで実装。レスポンシブ対応に加え、更新用マニュアルの制作も行った。

こだわりと成果

Point 01

こだわった点

実際に使われている道路標識のデザインをサイト内に散りばめることで、道路標識製造会社らしさをビジュアル面から表現しました。
フォントには「Zen Kaku Gothic New」を採用し、誠実さと親しみやすさの両立を目指しました。
ヒアリングや工場視察を通して、デジタルでは伝わりにくい「作り手のこだわり」や現場の空気感を、サイトの中で丁寧に表現することを意識しました。
また、後任の担当者でもスムーズにメンテナンスできるよう、更新マニュアルも作成しました。「公開して終わり」にしない設計にすることを目指しました。

Point 02

苦労した点

サイト設計の段階から企業側と認識をすり合わせながら進めていたため、会議や修正を何度も重ねる必要があり、その度に認識のズレが起こらないように気を付けて制作を行いました。
情報構造をゼロから見直す全面リニューアルを選択したことで、既存サイトの要素について、残すか、新しく新設するか、など一つひとつ丁寧に判断していく作業が求められました。
スマートフォンを含むマルチデバイスへの対応に加え、アニメーションによって操作性を高めるコーディングも必要となり、ユーザー体験を阻害しない範囲で取り入れることを心掛けました。

Point 03

学んだこと

プロジェクトの進め方として、ヒアリングからワイヤーフレームでの共有、デザイン提案へと進む一連の流れを通じて、「認識のズレをいかに早い段階で防ぐか」が実プロジェクトにおいて重要であると実感しました。
また、Webサイトは公開して終わりではないという考えのもと、更新マニュアルの制作や保守性を意識したコード設計に取り組みました。
さらに、デザインと課題解決を結びつけて考える力も養われました。
若年層への認知拡大という具体的な課題に対して、レスポンシブ対応や情緒的価値の可視化、ユーザー動線の整理といった手段を関連づけて検討する経験ができました。

企画書

実際に作成した企画書を紹介します。

01 表紙・タイトル
02 背景
03 現状分析
04 解決策
05 構成検討
06 デザイン提案
07 実装
08 効果
09 展望
01
クリックで拡大
1 / 13

クリックで拡大できます

← Previous いちご屋 Next → フードドライブってなんですか?
メインビジュアル 1枚目 メインビジュアル 2枚目