AI MORITA PORTFOLIO

Web Study Sapporo
Corporate Site Renewal ウェブスタディサッポロ
コーポレートサイト改修

Home
作品集
ウェブスタディサッポロ

デスクトップ画面

Information 基本情報

職業訓練校のグループワーク課題として制作しました。
訓練校であるWSS(ウェブスタディサッポロ)様の仮想サイトリニューアル案件を通して
コンセプト設計から一連の制作フローを学び、チームメイトと共にサイトを完成させました。

URL: https://ai-webportfolio.com/works/wss/wss_portfolio/index.html
表示サイズ: PC(フルサイズ 1920px)
クライアント: ウェブスタディサッポロ(仮想案件)
担当箇所: デザイン / コーディング / サブディレクター(議事録作成・発表準備)
制作時期: 2024年4月
制作期間: 100時間(設計48時間/デザイン24時間/コーディング12時間/発表準備16時間)
使用ツール: Photoshop/Figma/VSCode/Quip/Google Drive

Concept コンセプト

サイトコンセプト

『本気のあなたをプロが一押し』

ユーザーに届けたいストーリー

自ら動いてWeb業界に就職したいという本気度の高い方に応募してもらえるよう、
「本気のあなた」にサイトを通して呼びかけ、
またサイトの内容を見た方の潜在的な本気を引き出す設計にしたいと考えました。
求職者である「あなた」がWSS様の訓練によって質の高い知識やスキルを身につけ、Web業界への就職を叶える。
そして、就職先企業での成長を通して、結果的に業界全体ががさらに盛り上がりを見せていく……。
WSS様をこうした好循環を生むスタート地点と考え、Webサイトをそのきっかけづくりの場にしたいと考えました。

Web業界の好循環を示した図

Design デザイン

デザインコンセプト

サイトコンセプトをもとに、WSS様が生みだすWeb業界の好循環をサイクルイメージで表現しました。
トップページの文字サークルアニメーションや随所にあしらった円形ビジュアルが、
サイトデザインのキーポイントです。

担当ページで気をつけたこと

『ABOUT』ページのデザインとコーディング、『EMPLOYMENT SUPPORT』のページデザインを担当しました。
『ABOUT』ページでは、
職業訓練校の役割とWSS様の『PC・スマホサイトデザイン科』の存在を、
初めて訪れた人にも理解してもらえるよう心掛けました。
以降のページのコンテンツ量を考慮し、シンプルでわかりやすいレイアウトにしました。
『EMPLOYMENT SUPPORT』ページでは、
訓練後に目指せる職種やWSSが行っている就職サポート、就職実績企業を掲載しました。
4つ以上のコンテンツが続くため、見やすく、かつ単調にならないように整列や余白を意識して制作しました。
また、MV写真、就職支援内容の写真はPhotoshopでフォトレタッチを加えました。