自分のポートフォリオサイトを作りました↓
https://progstudy-trace.github.io/
シンプルなデザインですが、これはあるテンプレートを元にコーディングしたものです。
また、サーバーも借りてません。全て無料で作れます。
自分のポートフォリオサイトってどうやって作ればいいんだろう？
という方向けに、作り方を解説していきます。
自分のポートフォリオサイトのテンプレート。
私が使ったポートフォリオサイトのテンプレートは、このサイトの「ポートフォリオサイト」のやつです。
このデザインを見ながらコーディングして作りました。
このサイトはたぶん模写コーディングの定番だと思うので、このテンプレでポートフォリオサイトを作っている人は結構多いと思います（私は見たことがあります）。
シンプルなので簡単に作れるし、見た目もきれいです。
これを固定ヘッダーにしたり、スマホ画面をハンバーガーメニューにしたり、ホバーアクションをつけたり、動きをつけてみるのもいいでしょう。
「Skill」項目を追加。
ポートフォリオサイトには「Skill」項目はあった方がいいと思うので、追加しましょう。
アイコンはフォントオーサムで取れます。
スクロールすると要素が下からふわっと現れる。
私はシンプルに作りましたが、唯一動きを付けたのは「スクロールすると要素が下からふわっと現れる」やつです。
これ、色々なサイトでよく見かけて「やってみたいな」と思っていたからです。
スクロールすると「Skill」や「Works」の一つ一つのアイテムが下からふわっと出てきます。
この実装は簡単で、このサイトに書いてあるコードをコピペで出来ました。
お問い合わせフォームを設置。
やっかいなのはお問い合わせフォームです。
WordPressで作ったサイトならプラグインで簡単にお問い合わせフォームを設置できますが、そうでない場合は自分でPHPでお問い合わせフォームを実装しなければなりません。
それはちょっと敷居が高いですよね。
でもご安心下さい。フォーム作成サービス「formrun」を使えば、無料で簡単に作れます。
私も「formrun」で作りました。そのやり方はこの記事に書いてます。
サーバーレンタルは必要なし。GitHub pagesでサイトを公開。
サイトを公開するのに難関なのがサーバーのレンタルですよね。
でも今回はその必要はありません。GitHub pagesでサイトを公開できます。
しかも一つではなく複数。
GitHub pagesとは簡単に説明すると、GitHubが提供しているサービスで、無料でサイトを公開できます。
ただし制限があって、アップロードできるのはHTML/CSS/JavaScriptのファイルのみです。
メインのサイト（User Site）は一つしか作れませんが、サブのサイト（Project Site）は複数作れるので、
自分のポートフォリオサイトをメインにして、カフェサイトや企業サイトを作ったらサブにしてリンクを貼るというやり方がいいと思います。
詳しくはドットインストールの「GitHub pagesでウェブサイトを公開しよう」にあります。
これはめちゃくちゃわかりやすくて、私はこれを見ながら進めました。
有料プランにしないと全て見れませんが、1000円程度なので安いものでしょう。是非見てみてください。
（これで「全て無料」というわけではなくなりますが、これくらいはいいでしょう(^^;））
GitHubにアカウントを作る必要はあります。英語のサイトでちょっとわかりづらいですが頑張ってアカウント作ってください。
製作物はどうやって作る？
ポートフォリオサイトに載せる制作物を一から作るのって大変ですよね。
だから、今まで模写コーディングしたものを画像を変えたり文章を変えたりデザインをちょっと変えたりして、チョコっといじればOKです。
そうすれば今までの模写が無駄になりませんよね。
私の制作物も、書籍を見ながら作ったやつや模写コーディングしたやつをいじったものです。
つたない作品ですが、完璧に作る必要はないと思います。
ちなみに「みなとみらい」は「PAS-POL」というサイトを模写したやつをいじったものです。ロゴはAdobeXDで作りました。
まとめ。
いかがでしたでしょうか？今回は自分のポートフォリオサイトを作る方法についてご紹介しました。
手順としては、
- テンプレートを元に自分のポートフォリオサイトをコーディング。
- 「Skill」項目を追加する。
- formrunでお問い合わせフォームを設置する。
- GitHub pagesでサイトを公開。
という感じです。
参考にしてみてください。
