Project Overview
自身のポートフォリオサイトを制作しました。
作品を見せるだけでなく、「どのような考え方で制作しているのか」を伝えることを目的とし、企画からデザイン、コーディングまで一貫して担当しました。
また、職業訓練校の授業では扱わなかったFigmaを独学で学習し、ワイヤーフレームおよびデザインカンプを制作した上で実装を行いました。
Target
・Webデザイン･UIデザイン職の採用担当者
・制作会社の面接担当者
・ポートフォリオ閲覧者
Role
企画立案 / 情報設計 / ワイヤーフレーム・デザインカンプ作成 / UIデザイン / コーディング
Duration
制作期間：30時間
Challenge
ポートフォリオサイトは作品を見せる場である一方、自身のデザインスキルや考え方も評価されるため、見やすさと個性の両立が課題でした。
また、作品数が限られている中でも、制作過程や思考プロセスが伝わる構成を目指しました。
Thinking Process
私は普段から「なぜ人は惹かれるのか」を考えることが好きです。
そのため本サイトでは、作品そのものだけでなく、課題発見から制作までの思考プロセスも伝えられる構成を検討しました。
採用担当者が短時間で作品を把握できるよう、情報量を整理しながら閲覧しやすい導線設計を意識しています。
また、ポートフォリオサイトの制作にあたり、現役デザイナーの発信を参考にしながら、業務で広く利用されているFigmaとClaudeを取り入れました。
職業訓練校では主にPhotoshopを使用していましたが、実務ではFigmaによるUI設計が主流となっていることを知り、自主的に学習を開始しました。
Claudeを活用することで情報整理や文章構成の検討を効率化し、デザインだけでなく制作プロセス全体の改善にも取り組みました。
Idea & Design
ダークトーンをベースに、グラデーションをアクセントとして使用しました。
落ち着いた印象と個性の両立を目指し、作品が主役になるよう余白を活かしたレイアウトと、特徴的なフォントを採用しています。
また、固定ナビゲーションやシンプルな導線設計により、閲覧者がストレスなく作品を確認できるよう工夫しました。
What I Learned
本制作では、Figmaを用いたワイヤーフレーム作成からデザインカンプ制作までを独学で行いました。
これまでPhotoshop中心だった制作フローと比較し、レイアウト検討や修正作業を効率的に進められることを実感しました。
また、Claudeなどの生成AIを活用することで、情報整理やアイデア出しのスピードが向上し、デザインそのものにより多くの時間を使えるようになりました。
制作を通して、デザインスキルだけでなく、新しいツールを学びながら柔軟に制作フローを改善していく姿勢の重要性を学びました。