就職活動のために制作したプロフィールサイト

概要

大学3年の就職活動に向けて、ESやGitHubだけでは伝えきれない実績や経歴を補うために制作したプロフィールサイトです。制作期間は約2週間で、Next.js・Tailwind CSS・Vercelというシンプルな構成で構築しました。

なお、現在はこのサイトから新しいプロフィールサイトへ移行済みです。

解決したかった課題

インディでの経験を、ES・面接だけで伝えきれなかった

長期インターン先のインディでは、デジタルマーケティングの実務に携わっていましたが、こうした経験はESの限られた文字数だけでは伝えきれませんでした。

面接の場で参照できる資料があれば、他の就活生との差別化になるはずですし、口頭では伝わりきらない熱意も補えると考えました。

GitHubだけでは、制作物の背景や自分自身が伝わらなかった

それまで制作物はGitHubにまとめていましたが、次のような課題がありました。

• コードを読める人でないと内容が伝わらない
• リポジトリの見た目が就活のアピール資料として見づらい
• なぜ作ったのか、どんな背景があったのかが伝わらない
• 自分の経歴や強みを説明する場所がそもそもない

制作物そのものは残っていても、「誰が」「なぜ」作ったのかという文脈が抜け落ちてしまっている状態でした。

なぜPDFではなくWebサイトだったのか

資料としてPDFにまとめる方法も検討しましたが、企業によってはPDFを送付できないケースがあります。一方でWebサイトであれば、ESにURLを一行載せるだけで共有でき、閲覧する側の負担も小さく済みます。

この手軽さが、Webサイトという形式を選んだ決め手になりました。

施策

トップページで第一印象を作る

面接官が最初に開くページなので、第一印象を左右するトップページには特に力を入れました。自己紹介から実績、制作物まで、必要な情報にすぐアクセスできる構成を意識しています。

プロフィールページで経歴・強みを整理する

自己紹介・経歴・強みをひとつのページに整理して掲載しました。ESでは書ききれない情報を、ここで補完する狙いです。

実績記事で「背景・課題・施策・結果」まで伝える

制作物を並べるだけでなく、それぞれについて背景・課題・施策・結果までを記事としてまとめました。スライド画像も活用することで、短時間でも要点が伝わるよう工夫しています。

レスポンシブ対応でどの端末からでも読めるようにする

面接官がPCだけでなくスマートフォンから閲覧するケースも想定し、どちらでも読みやすいレイアウトを意識しました。

モダンで視線誘導しやすいデザインにする

デザイン面では、次の点を意識しました。

• モダンな印象を与えること
• ダークテーマを基調とすること
• 情報量が多くても読みやすいこと
• シンプルで視線誘導しやすいUIであること

アーキテクチャ

使用技術はシンプルに、Next.js・Tailwind CSS・Vercelの3つに絞りました。

• Next.js：ページ遷移や表示速度など、就活資料として見られる際のUX品質を担保できるため採用
• Tailwind CSS：短い制作期間の中で、デザインの調整を素早く反映できるため採用
• Vercel：デプロイが容易で、URLをすぐに発行してES提出に間に合わせられるため採用

結果・まとめ

このサイトを制作したことで、次のような成果がありました。

• ESにサイトのURLを掲載できるようになった
• GitHubだけでは伝わらなかった経歴や制作背景を補完できた
• 分散していた実績をひとつの場所に整理できた

制作を通じて一番時間がかかったのは、実はサイトそのものの実装ではなく、自分の実績や経歴を整理する作業でした。AIを実装に活用したことで、コーディングに割く時間を減らし、デザインや情報設計、文章の推敲により多くの時間を使うことができました。また、自分の経験を言葉にして整理する過程は、そのまま自己分析にもつながりました。

この制作を通じて学んだのは、Webサイト制作において重要なのは技術力そのものよりも、情報設計と文章であるということです。何を、どの順番で、どう伝えるかという設計が、最終的な伝わりやすさを大きく左右します。

現在は、掲載する情報量が増えたこと、就活用の資料からブランディング目的のサイトへと役割が変化したこと、そしてMarkdownで記事を追加できる構成に変更したかったことなどを理由に、新しいプロフィールサイトへリニューアルしています。

旧サイトはこちら