date：2025.04
tool：Figma / CLIP STUDIO PAINT / Visual Studio Code
Outline
制作概要
自分自身の転職活動用ポートフォリオサイトを制作しました。
採用担当者の視点を意識しながら、自分の強みと親和性のある業界を分析し、競合の多い応募者の中で個性を際立たせるようなポートフォリオサイトを目指しました。
担当範囲：企画、デザイン、コーディング
-
課題
Web業界への転職を行うにあたってポートフォリオが必要。
デザイン、コーディング、イラストのスキルをアピールしたい。 -
目的
競合の多い応募者の中で個性を際立たせ、採用担当者に「この人と一緒に働きたい」と感じてもらえるポートフォリオサイトを制作する。最終ゴールは内定の獲得。
-
ターゲット
採用担当者、デザイナー、ディレクター、コーダーの方々。
-
情報設計
イラスト×webデザインスキルでユーザーがワクワクできるような世界観を作り出し、遊び心のあるサイト作りを意識しました。遊び心のある演出によって、見る人の記憶に残るポートフォリオを目指し、限られた閲覧時間の中でも、印象づけとスキルの理解を同時に実現する設計にしています。トップページでは世界観やスキルを直感的に伝える構成にし、気になった人が詳細を深掘りできるよう、作品やプロフィールを下層ページに分けることで情報過多を避けました。
Figmaでは初期案から完成までのデザイン推移を、GitHubではファイル構成やコミットログにて開発への取り組み方を確認できるようにし、入社後の業務理解の材料としても活用いただけるよう意識しました。 -
デザイン
Web制作業界は多彩なスキルを持つメンバーが協力して課題解決に挑みます。その姿が、まるでファンタジーゲームの「勇者パーティ」のようだと感じました。自分は、ヒーラーのような「優しくチームを支え、解決策を見つける役割」を連想し、サイト全体をファンタジーRPGの世界観でデザインしています。
ファンタジー風の装飾に頼りすぎず、情報の視認性や読みやすさも重視しました。背景は淡色をベースにし、装飾的な要素は枠線やアイコンに留めることで、主役であるコンテンツを邪魔しないよう工夫しています。またファンタジー感のあるオールドスタイルなセリフ体や、やわらかいパステル調の配色を採用することで、サイト全体に温かみと信頼感を持たせ、「優しく支えるヒーラー」という印象を視覚的にも伝えることを意識しています。
