概要

職業訓練校でのグループワーク課題として、Web業界への就職支援を行う職業訓練校WSS(ウェブスタディ サッポロ)の公式サイトリニューアルを想定して、制作を行いました。

課題

既存のWebサイトが存在する中で、「現行サイトを上回る品質を実現すること」をテーマに取り組みました。現行サイトは情報量が必要最低限に留まり、企業や職業訓練校としての特徴や強みが十分に伝わりにくい状態でした。また、ページ構成や導線が分かりづらく、ユーザーが目的の情報へスムーズにたどり着きにくい点も課題と感じました。特に、Web業界への就職支援に注力している点や、専任講師による継続的なサポート体制、いつでも添削を受けられる学習環境といった強みが、サイト上で十分に表現されていないことが大きな課題でした。

目的

ユーザーが迷わず行動でき、分かりやすくアクセスしやすいサイト構造を目指し、説明会への参加や訓練校応募につなげる。

ターゲット

Web業界に興味を持ち、学習や就職を検討している、新たな挑戦を始めたい20代〜30代の男女。

役割・取り組み

デザインリーダーを担当しました。制作初期に現行サイトのサイトマップを作成し、チームメンバーと課題を洗い出した上で、リニューアル後の新規サイトマップを設計しました。サイト全体のコンセプトや情報の優先順位を話し合い、レイアウト、文字サイズ、フォント、余白のルールなどを決定した上で、制作範囲の振り分けを行いました。また、各メンバーが制作したデザインを確認・調整し、トーンやレイアウトに一貫性を持たせる役割を担いました。実装面では、下層ページの「WSSとは」「就職支援」「運営会社」のコーディングを担当し、デザイン意図が正しく反映されるよう制作を行いました。

情報設計

トップページでは、学校やサービスの全体像がひと目で把握できる構成とし、下層ページで各情報をより具体的に伝える設計としています。Web業界への就職支援に力を入れている点を明確に伝えるため、就職先情報を独立したコンテンツとして整理し、就職状況が直感的に伝わるグラフを配置しました。また、説明会への導線を強化するため、新たに応募フォームを設置し、「ポートフォリオを見て入校を決めた」という説明会参加者の声を掲載することで、参加への後押しとなる構成としています。不要なコンテンツは整理・削除し、フッターは運営会社情報として再構成。外部サイトへのリンクを明確にしました。ヘッダーは画面上に追従させ、ページ移動や説明会申し込みがスムーズに行えるよう配慮しています。

デザイン

「共に学ぶ」をコンセプトに、この学校に入れば安心して学べそうだと感じられる安心感と、Webデザインに挑戦するワクワク感の両立を目指しました。全体はシンプルで落ち着いたトーンにまとめつつ、要所にあしらいを加えることで、新しい分野へ踏み出す前向きな印象を表現しています。見出し・本文・セクション間の余白を丁寧に整え、情報量が多くても読みやすく、視線の流れが自然につながるレイアウトを意識しました。図形のあしらいは、主張しすぎない形状とサイズに抑え、情報構成にリズムを生み出しながらもサイト全体の統一感を保っています。角は基本的に角丸を採用し、親しみやすさを演出しました。トップページのメインビジュアルや修了生の声の人物写真には、安心感を持ってもらうことを意図し、PhotoshopのAI生成機能を用いて在校生をイメージした人物を作成しています。また、説明会セクションは特に目に留まるよう、他のセクションとは異なる円形に近い背景デザインとし、明るい未来を想起させる柄を重ねた青ベースのビジュアルを用いることで、説明会への前向きな一歩を後押しする表現としています。

配色

#E4F3FF

#F2F2F2

#008CB3

#FE8C46

#FDE801

明るく清潔感のあるトーンを基調に、軽やかで親しみやすい印象にまとめました。信頼感を与える青をベースに、オレンジや黄色のアクセントカラーを取り入れることで、Web業界への挑戦に対する前向きさやあたたかみを表現しています。色数を抑えながらもメリハリをつけ、重要な情報や導線が自然と目に入る配色設計を意識しました。

使用フォント

Zen Kaku Gothic New / Mulish
日本語フォントには「Zen Kaku Gothic New」を使用し、安心感と親しみやすさを持たせながら高い可読性を確保しました。英字フォントには「Mulish」を採用し、主にキャッチコピーや見出しに使用。情報量の多い職業訓練校サイトの中でも視線を集め、未経験者にも安心感と信頼感を与えられる点から採用しました。

使用ツール

Figma / Photoshop / Visual Studio Code

制作期間

企画・WF：約25時間
デザイン：約35時間
コーディング：約30時間