【プロデザイナーコース課題】架空企業の採用サイト

OVERVIEW

プロデザイナーコース課題⑤、1か月間で情報設計→デザインカンプ(PC/SP版)→コーディング→実装(PC/SP版)

YEAR 2026


▶概要

▶要件定義

▶ユーザーストーリー

▶デザイン面の工夫

▶構成・UXの工夫

▶コーディング・実装の工夫

▶進め方の工夫

▶課題を通して学んだこと

▶デザインカンプ



■ 構成・UXの工夫

  • 「世界観への共感を重視」という要望を踏まえ、
      「事業内容 → 募集職種 → 見学会 → メンバー → 働く環境…」の順で構成

  • 優先度の高い情報から順に配置し、自然な導線を設計

  • 写真や大きめのフォントを活用し、注目してほしい要素を視覚的に強調

■ コーディング・実装の工夫

  • メンバー紹介セクションは、jQueryを応用して動きを実装

  • 「調べる→試す→改善→相談」のサイクルを回しながら問題解決

  • デザインカンプ上にマークアップを書き込み、構造を整理してからコーディング
      → 再現性と作業効率を向上

■ 進め方の工夫

  • SHEの拠点開放に参加し、作業時間を意識的に確保

  • 将来なりたいデザイナー像を具体的にイメージし、モチベーションを維持

■課題を通して学んだこと

あたたかみや丸みを意識しながら、求職者が働く姿をイメージできるデザインを目指しました。

制作を通して、クライアントの意図やユーザーの心情を考えた構成設計ができるようになり、デザインスピードも前回の課題より向上したと感じています。

コーディングでは「分からないことが分からない」状態に苦戦しながらも、調べ直しや相談を重ねて理解を深めました。

今回はコーディング期間の3週間目~提出日までのスケジュールが組めておらず、提出がギリギリになってしまったためスケジュール管理の重要性を実感し、計画的に進めることの大切さを学びました。

今後はJavaScriptを中心に実装力を高め、デザインからコーディングまで一貫して担えるWEBデザイナーを目指したいです。



【PC版デザインカンプ】

【SP版デザインカンプ】

WEBSITE