概要

職業訓練校課題として、未経験からWeb業界への就職を目指せる職業訓練校の運営会社「株式会社ネクストワン札幌支社」のコーポレートサイトリニューアルを想定し、制作を行いました。（トップページのみ）

目的

職業訓練校の運営会社としての魅力や信頼性を伝え、運営している職業訓練校「WSS（ウェブスタディサッポロ）」公式サイトへの誘導を強化すること。

ターゲット

札幌で未経験からWeb業界への転職やスキル習得を検討している20代〜30代の男女。

情報設計

情報量が多くなりがちな内容を整理し、企業の姿勢や特徴を短時間で理解できる構成とすることで、不安の軽減や次の行動（WSS公式サイトへの遷移）につなげる設計としました。今回のサイトリニューアルの目的であるWSS公式サイトへのスムーズな誘導を実現するため、FVとフッターにWSS公式サイトへのCTAボタンを配置しています。FVに配置したCTAボタンは、サイト下部まで追従することを想定しており、少しでも興味を持ったタイミングでWSS公式サイトへ遷移できるよう工夫しました。

デザイン

全体を通して、見出しのあしらいやレイアウトにメリハリをつけ、情報量が多くても読み進めやすい設計としました。装飾は控えめにし、コーポレートカラーが自然に印象づくデザインとしました。FVではコーポレートカラーを用い、黄色から青色へのグラデーションを採用することで、「未経験からWeb業界へ」挑戦し、成長していく過程を表現しています。WSS公式サイトへのCTAボタンは円形とし、中心にアクセントカラーの黄色、周囲を黒色又は白色で囲むことで、サイト全体のトーンに馴染ませながらも、一目で視認できる配色と形にしています。

使用フォント

Zen Kaku Gothic New / Halyard Micro / Halyard Text
日本語フォントには可読性と信頼感を重視し、「Zen Kaku Gothic New」を採用しました。英字フォントには「Halyard Micro」と「Halyard Text」を使用し、太さやサイズのコントラストによって情報の優先度を明確にしつつ、全体に程よいリズムと視覚的なインパクトを与えています。

配色

#EBF5FF

#4E85BA

#282828

#E4E14C

コーポレートカラーを基調とし、明るくクリーンな配色で、安心感や信頼感が伝わるトーンにまとめました。ブルーを基調とした配色で誠実さや信頼感を表現し、濃淡の異なるブルーを使い分けることで、見出し・本文・背景の階層が直感的に把握できる構成としています。アクセントカラーはCTAや重要な情報に限定し、視線誘導と可読性を高めました。また、全体のコントラストを抑えることで、長時間閲覧しても疲れにくい配色にしました。

使用ツール

Figma

制作期間

企画・WF：約7時間
デザイン：約13時間