Daily UI #050（Job Listing or Hiring Page）
Daily UI 50日目のお題は「Job Listing or Hiring Page」。
ポートフォリオアプリのモバイル画面を制作します。
「ポートフォリオ」という言葉はいろんな分野で+違う意味で使われていてややこしいんですが、ここでいうポートフォリオは教育系でいうポートフォリオです。学生の成績や活動を記録しておくやつのことを指しています。
就活で履歴書等を書くときに毎回1から調べるのは大変めんどくさいので、1ヶ所にまとめて記録しておけたら便利じゃないかなと思って制作しました。
制作過程
今回は4時間くらいでした。
制作の流れ
前回の反省点の確認：1分
リサーチ：50分
要件定義・必要な項目を考える：29分
ラフ：4分
ワイヤーフレーム・ビジュアル：2時間54分
-------------------------
計 4時間18分
リサーチ
既存の就活アプリ・履歴書アプリを主に参考にしました。デザインのテイストはマイナポータルを参考にしました。
要件定義
ChatGPTに要件を詰めてもらいました。
サービス名：EduPort
サービス内容：学生が学業や活動を一元管理できるアプリ
機能：
成績記録、活動履歴管理、履歴書自動生成、目標設定と達成管理、資格・スキル管理、進捗通知
サービスカラー：
ブルー、 イエロー、ホワイト
ペルソナ：
田中 大輝（21歳・経済学部3年）
・就職活動が迫っており、自己PRやエントリーシートの準備を進めている。学業だけでなく、インターンシップや課外活動にも積極的に参加し、履歴書に記載できる実績を増やしたいと考えている。デジタルツールに精通しており、スマホでの効率的な管理を好む。
合わせて必要な項目も考えます。
項目
・基本情報
・名前
・生年月日
・年齢
・性別
・住所
・電話番号
・証明写真
・学歴
・学校名（、学部・学科・専攻・コース等）
・入学年月
・卒業年月
・部活動・サークル
・クラブ名
・入部（～退部/引退）年月
・免許、資格
・資格名
・合格年月
・スキル
・スキル名
・経験年数、度合いなど
・表彰
・表彰活動名
・表彰年月
・その他（インターンシップ等）
・活動名
・活動年月
・活動内容
・自己PR
ラフ
ここは割愛。
ワイヤーフレーム・ビジュアル
制作したワイヤーフレームがこちら ↓
完成
制作したデザインがこちら ↓
各項目はアコーディオンメニューで開閉でき、それぞれ開いた画面を制作しました。
デザインのポイント
個人情報は見えないように
「基本情報」の部分で、電話番号や住所等は途中から*で省略し、＞を押してから出ないとすべて見えない仕様にしました。
年月の優先順位を上げた
履歴書等を書くときに見たい頻度が高いのは年月（入学年月、活動年月等）かなと思い、目に入りやすい位置+やや濃いめの色にしました。
制作してみて
既存サービス（マイナポータル）を参考に作ったので、前回のような余白・色の違和感はかなり軽減できたかなと思います。
コラム：いろいろな「ポートフォリオ」
冒頭でも少し触れましたが、「ポートフォリオ」にはいろんな意味があるようなので、ちょっと見てみようと思います。
１．ポートフォリオ（教育分野）
子どもの成果物や経験をまとめたものを指します。ポートフォリオに課外活動や学習過程をまとめておくことで、従来の評価元であったペーパーテスト以外に現れる能力を可視化できるところがメリットのようです。教員側だけでなく、子ども自身が学びを振り返るのにも役立つんだとか。今回のお題ではこの意味で取り上げました。
２．ポートフォリオ（金融分野）
企業で言うと、どの事業がどのくらい利益を上げているか等を一覧にまとめたものを指します。投資家だと、何（現金・株・不動産…等）をどのくらい保有しているかの一覧・組み合わせを指します。何がどのくらいの割合を占めているかを俯瞰し、より小さいリスクでより大きいリターンを得よう、という考えが根底にあるようです。
３．ポートフォリオ（クリエイティブ分野）
美大・芸大の学生だとこちらの意味がぱっと浮かぶでしょうか。「作品集」等とも呼ばれ、自分の制作物をまとめたものを指します。就職・転職時に使うことが多いかと思います。非デザイン職で言うと履歴書くらいよく使うやつです。決まったフォーマットはないので、試行錯誤しながら制作していきます。
参考：
ポートフォリオの意味は業界によって違う？4つの意味や重要性を紹介｜バーチャルオフィスのレゾナンス (virtualoffice-resonance.jp)
ポートフォリオとは - Portfolioの意味と3つの業界での使い方 | マイナビクリエイター (mynavi-creator.jp)