IT業界の志望者必見！最強の自己紹介「ポートフォリオサイト」簡単な作り方

はじめに

就職活動中に，自己紹介をする場面に遭遇することは多いかと思います．
私の就職活動はコロナ禍(？)収束後であり，IT企業をメインで見ていたことから面接は全てオンラインで開催されました．

HP（ポートフォリオサイト）を作成した理由

情報科学出身であることから，ホームページを作成しそれに基づいて自己紹介することができれば技術面+積極性or好奇心旺盛などなど色々な面から評価してもらえると考え，自己紹介用のHPを作成しました．

メリット（経験に基づいて）

1. 就職活動において有利

   • 就職活動中に自己紹介HPを用いた回数はおよそ5回程度で，その全てで次の選考に進めることができ，結果として，大手Sier会社・通信会社などから内定を頂きました．
     採用担当の方からも，このようなアピールをする学生は少ないこと，また長所として好奇心を活かした挑戦力を謳っていたため，それが具体的に証明されていたことを評価したコメントを頂いたこともあります．

2. 楽しい

   • 個人的に自分のサイトを作り，なおかつ自分の好きなようにサイトをカスタマイズできることは楽しいです．

3. 技術力が身に付く

   • 自分でサーバをホスティングしたり，HTML/CSS,JavaScriptsを用いてコーティングすればある程度の技術力は成長したはず・・・です

使用するツール・サイト

1. Mac PC（もちろんWin,Linuxでも可．今回はMac環境で進めていきます）
2. VScode（好きなエディターで大丈夫です）
3. Firebase
4. お名前ドットコム
5. HTML5UP
6. TemplateParty

制作手順

1. テンプレートをダウンロード
2. VScodeで編集
3. Firebaseでホスティング
4. お名前ドットコムでドメイン取得
5. Firebase consoleからDNS設定

テンプレートをダウンロード

一からコードを書いてHPを作ることもできますが，テンプレートを用いることでより簡単に綺麗なサイトを作成することができます．
私のおすすめは，HTML5UP，TemplatePartyです．
どちらも利用規約を確認し，利用可能か確認してください．
参考程度に2024年6月での利用規約です．

HTML5 UPでは，デザインのクレジットを表示する（サイトのどこかに「Design by HTML5 UP」という文言を含めるなど）必要がありますが，個人利用が可能です．

TemplatePartyでも利用が許可されていることが確認できます．

好きなデザインのサイトを探し，ダウンロードしましょう．

ダウンロード（HTML 5UP）

今回はHTML5UPの中から，Massivelyを選択しダウンロードします．

Zipファイルを解凍するとこのような構成になっていると思います．

エディターに展開

VScodeでダウンロードしたファイルを展開します．

index.htmlが1番最初にサイトに表示されるファイルです．

Chromeの開発者ツールを活用

index.htmlを右クリックし，Show in Browserを選択するとGoogle Cromeにて確認することができます．

ここからは自分の好きなように編集していきましょう．

Cromeの開発者ツール(Option+Command+i)でどの部分がサイトに反映されているのか確認できるため，うまく活用して編集していきます．

コードを編集

この工程が1番大変ですが，やりがいのある部分です．
自分のHPに表示したい項目になるように修正し，内容を書いていきましょう．
参考程度に自分が作成した項目を記します．

• 学歴
  • GPAも書き，学業に力を入れたことをアピール
• 趣味
  • 就活ではリラックス方法などパーソナルな質問もありました
• 研究
  • 参加した学会や論文を一覧表にし，研究内容の概要などを誰でも理解しやすいように書きました．
  • まだ学会等で発表していない研究は，新規性担保のため，あまり詳細に書かないことを推奨します．
• プログラミング経験
  • 扱ったことのある言語をイラスト付きで視覚的に理解しやすく書き，授業で〇〇に取り組んだ・個人で〇〇を開発した．など書くのが良いと思います．
• 資格
  • 取得した資格やTOEICのスコアなどを表にして載せました．

最近ではChatGPTに聞けばHTML/CSSは高精度で修正してくれるため，非常に便利です．
私の場合はJavaScriptsも用いて写真を動的にスライドショーにしました．

Firebaseに繋げる

サイトの素材が出来上がりましたら，サーバを立てて，誰でも閲覧可能な状態にしましょう．

Firebaseに自身にサイトを登録し，ホスティング（サーバを借りること）は複雑であるため，正直難しいです．
こちらのサイトなどを参考に行ってみてください．

もし，この工程が難しかった場合，面接時には画面共有で自身のフォルダ内のファイルをブラウザで開いて説明するのでも良いと思います．
ES(エントリーシート)には，載せられないのが残念ではあります．

お名前ドットコムでドメインを取得

無料でカスタムドメインを取得できると思いますので，利用可能なドメインで好きなものを取得しましょう．

Firebaseを利用している場合は，元々　「〇〇．firebaseapp.com」などで提供されるはずです．
気にならない方はスキップして良いです．
拘りのある方は，ぜひとも自分オリジナルのドメインを設定してみてください．
以下の記事が少し参考になるかと思います．

終わりに

以上です．
Firebaseの説明は割愛しましたが，一度登録することができれば，その後は楽であるため，ぜひ挑戦してみてください．

就活中の自己紹介とは＆ちょっと持論（付録程度の独り言）

そもそも就活における自己紹介は企業によって聞かれ方が異なります．例えば，シンプルに「あなたについて簡潔に教えてください」と聞かれる場合や「1分間であなたの長所と短所を含め挨拶をしてください」といわれる場合も．恐らく最も多いのは，「名前と大学・学部について教えてください」でしょう．

面接の1番最初に聞かれることだけに，あなたの印象を最も感じやすい瞬間であると思います．そのため，自己紹介には力を入れた方が絶対にお得ですよね．

オンライン面接が主流である現在では，zoomなどを用いて開催されることがほとんどです．そのため，自己紹介において面接官の許可が得られた場合，画面共有をすることができます．実際に私も本選考やインターンシップ選考において，画面共有をしてポートフォリオサイトを写しアピールした経験があります．

これの何が強いって，IT業界に興味をもち自分で行動していることのアピールになるんですよね．文系でなんとなくITに魅力を感じている，でも資格も経験もない．そんな方も多いんじゃないでしょうか．

そんな方こそ，この方法を使えば簡単に誰でもある程度のクオリティ（に見える）サイトを作れるはずです．

よくLINEのオープンチャットでは資格のない未経験文系にIT企業は無理ですか？と問いかけている人を見かけます． 正直，無理ですと言われて諦める程度なら向いていないと思いますが，資格が全てではないと考えます．

何か自分で主体的に行動して，ITに興味がある証拠を具体的に説明できればいいのではないでしょうか．
そんな感想を残して，まとめとさせていただきます．

謝辞

最後までお読みいただきありがとうございます．
これからも投稿を続けていけるよう頑張っていきますので，是非ともいいねとコメントお願いします．