- HTML,CSSの学習が一通り終わって、そろそろ自分の作品や武器となるポートフォリオサイトを作ってみたい！
- けど０からどうやって作るのだろう・・・
今回の記事ではプログラミング初心者向けに、かっこいいポートフォリオサイトの作り方〜公開までの方法をご紹介します！
ポートフォリオはIT企業の就職活動の際や、案件獲得の際に自分の名刺代わりとして必要なので、作っておく必要があります。
しかし、「ポートフォリオ 例」などと調べてもクオリティーが高いものばかりで、今の技術じゃ到底真似できないと言う初心者の方もいっらしゃることでしょう。
今回は特別に、僕が１からコーディングしたポートフォリオをそのまま真似していただいてOKです！
✔︎作れる方の目安
- HTML,CSSを使ってある程度模写ができる人
- jQueryの知識がある方
- 何か制作物がある方（模写作品、オリジナルサイトなど）
僕のポートフォリオを参考に本記事では解説していきます。
1.ポートフォリオサイトに必要な物を準備しよう
まず始めに ポートフォリオサイトに必要になってくる画像ファイルやファイルをアップする環境を準備しましょう！
✔︎ポートフォリオサイトに必要なもの
- 画像（顔が写っているとなお良い）
- 制作物の画像データ
- Googleアカウント（お問い合わせフォーム、firebaseアップの為）
- SNSのアカウント（あったほうがベター）
必要な画像データを準備
まず始めにポートフォリオのメインとなる、FV画像（ファーストビュー画像）を用意しましょう！
FVに表示される画像は、自分の個性がよく出ている画像を使用すると良いです。
なるべく自分の顔が写っている写真を選ぼう！
制作物の画像データ
ポートフォリオに欠かせないのが、自分が今までどんなものを作ってきたか作品例が必要です。
プログラミング初心者の方は仕事をこなしたことが無く、制作実績がない方がほとんどなので、自分で架空のサイトを作ったり、模写コーディングをして制作物を作る必要があります。
僕の場合は、、、
- 模写コーディングした物のキャプチャ画像
- 架空のサイトの画像
- WordPressのオリジナルテーマの画像
これらを自分のポートフォリオに載せています。
最低でも3つは制作物を作るようにしましょう！
Googleアカウント
ポートフォリオサイトにはお問い合わせフォームが必要になってきます。
PHPの学習をしていない方が多いと思うので、Googleフォームを使って簡単にお問い合わせフォームを作ってみましょう！（作り方は後ほど）
またポートフォリオを作った後には、全世界中の人が見れるようにデータをアップする必要があります。
本来はドメインをサーバーやドメインを取得して公開しますが、お金がかかるので、今回は無料で自分のポートフォリオを公開できるGoogleのfirebaseを使った方法をご紹介します。（後ほど後述）
SNSのアカウント
ポートフォリオにさらなる信頼感を与える場合は、SNSのアカウントリンクをつけると良いでしょう。
僕の場合は、Twitter、Instagram、YouTube、ブログのURLをポートフォリオにリンクしています。
2.ポートフォリオの構成を考える
ポートフォリオサイトには書かなくてはならない項目がいくつかあります。
- 自己紹介文（名前、経歴、肩書きなど）
- 持っているスキル（HTML,PHP,JavaScript）どの程度のレベルか具体的に
- サービス内容（金額、何を売りに出しているのか、納期など）
- 制作物、実績一覧
- お問い合わせフォーム
最低限これらの項目はポートフォリオサイトには入れておきましょう！
サイトの構造はこんな感じでOKです。
ページをいくつも作っている方もいっらしゃいますが、初心者の方はLPのように縦長の一枚ページで十分です。
HikoPro portfolio 僕のポートフォリオをみても同じ構造になっているかと思います。
3.HTML,CSSでコーディングしていく
準備物、構成が決まった所で早速コーディングしていくのですが、コーディングの方法については書くときりがないので、割愛します！
「コーディングに自信がない！」「サクッとポートフォリオを作りたい！」
と思われている方は僕が１からコーディングしたポートフォリオのソースコードを丸々コピペしてもらってOKです！
レスポンシブ対応も忘れずに実装しましょう！
4.jQueryを使ってサイトを華やかに！
HTML,CSSでコーディングをしてやっと完成した！と思っても「なんだか華やかさが足りないなぁ」と感じることがあるかと思います。
僕のポートフォリオではjQueryを使ってアニメーションを少し実装していますが、アニメーションありと無しとでは大きな差が生まれます。
僕が実装したアニメーションは以下の通りです
たったのこれだけで華やかなポートフォリオに早変わりします！
5.Google フォームを使ってお問い合わせフォームを作る
次にポートフォリオサイトには必須のお問い合わせフォームの設置をします。
お問い合わせフォームを設置しないと、仕事の依頼を受ける事ができないので必ず設置する様にしましょう！
お問い合わせフォームの作り方はPHPの学習をしていないと実装できません。
PHP勉強した事ないからお問い合わせフォーム作れない〜
どうしよう〜〜〜！！
PHPの知識がなくても誰でも簡単に作れる方法をご紹介します！
お問い合わせフォームはHTML,CSSでフォームのデザインを作った後に、Googleフォームと連携させる事で簡単に実装できてしまいます。
↓詳しい解説記事はこちらからどうぞ↓
✔︎Googleフォームを使うメリット
- 面倒なPHPコードを書く手間が省ける
- プログラミング初心者でも簡単にお問い合わせフォームを作れる
- 運用面でも万能→お問い合わせリストをスプレッドシートに反映できる
- 自動返信も実装可能
- Googleと言う安心感
6.firebaseを使ってポートフォリオを公開
これまでの5つのステップを参考に、ポートフォリオが完成したら、実際に全世界の人があなたのポートフォリオにアクセスできるように公開しましょう！
基本的に作ったサイトを公開するには、ドメインを買ったり、サーバー費が必要になってきますが、「お金をかけたくない！」という方もいらっしゃるでしょう！
そこで利用するのがfirebaseというGoogleが提供しているサービスです。
↓firebaseを使ったサイトの公開方法はこちらの記事で↓
✔︎firebaseを使うメリット
- 無料でサイトを公開できる
- SSL認証が組み込まれセキュリティー面で安全
- CSS,HTMLファイルだけでなく、Express.js マイクロサービスや API も公開可能
- コンテンツを高速で配信できる
- 簡単に新しいバージョン（リニューアル）にできる
- 失敗しても簡単にロールバック（元に戻せる）
- Googleの安心感
- 後から独自ドメインに切り替え可能
簡単にまとめると、「安全で高速で簡単に失敗も恐れずサイトを世界に公開することができるサービス」となっているので、ぜひ利用して作ったポートフォリオを公開しましょう！
初心者向けポートフォリオ作り方まとめ
無料でこんなかっこいいサイトが作れるんだね！
いかがでしたでしょうか！
ポートフォリオサイトは、エンジニアとして活動していくには欠かせない物です。
初心者の方はあまり使う場面がないかも知れませんが、仕事をこなしていき、ポートフォリオサイトを充実させて、どんどんカスタマイズしていきましょう！
僕のポートフォリオ参考にページを作った方は、この記事をシェアして頂いたり、Twitterなどで教えて頂けると幸いです！
最後までご覧頂きありがとうございました！
