エンジニアとしてのポートフォリオサイトを作る上で参考にしたサイトまとめ
先日初めてポートフォリオサイトなるものを作成しました。
エンジニアとして生きていく上で、持っておくべきだ、とよく言われるポートフォリオサイト。
いざ作り始めてみると、デザインにもこだわりたくなり、地味に時間がかかってしまいました。笑
そんな中で、参考にしたサイト、利用した便利なサービス、ライブラリなどをまとめてみました。
今からポートフォリオサイトを作ってみる方のご参考になれば幸いです！
- 参考になるデザインが見たい
- かっこいいヘッダー画像が欲しい
- おしゃれなフォントを使いたい
- スクロールするとコンテンツがふわっと現れるアニメーションを加えたい
- 「もっとみる」機能を追加したい
- デプロイしたい
- 最後に
参考になるデザインが見たい
ポートフォリオサイトを作るにあたり、まず悩むことは、そもそもコンテンツとして何を盛り込むべきなのか、どのようなサイト構造にすればいいのか、ってことだと思います。
そんな時は、まず他の方のポートフォリオサイトを参考にしてみましょう！
僕は実際、この2つのサイトを参考にしてみました！
勿論プロの作品なので、真似できないような超ハイレベルの技術も多いです！笑
ただ、これらのサイトを見ていただくと大枠の構造のイメージは掴めると思います！
かっこいいヘッダー画像が欲しい
ヘッダー画像って大事ですよね。まずページを開いた瞬間に目に入ってくる部分ですし。やっぱりおしゃれな感じで高画質なものを使いたい。
ただ、それをgoogle検索するのがなかなか難しい。。
そんな時に役に立つのが、こちらのサイトです！
無料の会員登録のみでたくさんのおしゃれな素材を使うことができます。
検索窓で"Facebookカバー"を選んでいただくとちょうどいいサイズ感のテンプレートが得られるかと思います！
文字入りの画像も作ることはできるんですが、保存して自分のページに使うと、若干画像の荒さが出てしまうので、個人的には画像部分だけを保存して使うのがオススメです！
なおその際に、HTMLとCSSで画像上に文字をおしゃれに載せる場合は、こちらのサイトをご参照ください。
おしゃれなフォントを使いたい
フォントも非常に大事です！
フォント一つでページ全体の印象も大きく変わります！
これも他のサイトで良い感じのフォントを探して、その名前を調べてみるのが一番早いかなと思います。
chromeやfirefoxなどブラウザの開発者ツールを使ってfont-familyを調べてみましょう！
このようにして使いたいフォントのフォント名が分かったら、それをWebフォントサービスのGoogle フォントで探してみましょう！
・Webフォントとはフォントは通常、ローカル環境（自分のPC）にあるフォントを使用する仕組みとなっており、ユーザーによって見えるフォントが変わってしまうのですが、webフォントはフォントデータをサーバーから読み込み、ページに表示させることができるのでどの端末でも同じフォントが表示されるようになります。
・デザイン性が上がる
・どの端末でも同じフォントで表示されるといったメリットがある一方で、
・たくさんのwebフォントを使用しすぎると表示速度が遅くなる
・日本語に対応しているwebフォントが少ない
といったデメリットもあります。
Googleフォントも以下のサイトをご参考いただくと非常に簡単に使うことができるかと思います。
スクロールするとコンテンツがふわっと現れるアニメーションを加えたい
最近多いシングルページのレイアウト。
その中でもスクロールしていくと同時にコンテンツがふわっと表示されるアニメーションがかっこいいなと思っていたので今回取り入れてみました。
こちらについてはjQueryを利用したdelighterというライブラリを使って実装しました。
こちらも非常に導入しやすいですし、自分でのカスタマイズも簡単なので、ぜひトライしてみてください！
「もっとみる」機能を追加したい
自己紹介部分など、書きたいことはあるけれど、あんまり長くなってしまうとデザイン的にあまりかっこよくない、って時にはjQueryでボタンで開閉できるようにしましょう！
こちらもシンプルかつおしゃれなボタンのコードがありましたので紹介します。
ぜひ使ってみてください！
デプロイしたい
ポートフォリオサイトのデプロイはfirebaseがオススメです。
理由は、何より簡単だからです！
( と言いつつ、僕は若干エラーが出ました。後日別記事にて説明します。笑)
僕はドットインストールの「Firebaseでウェブサイトを公開してみよう」のレッスンを参考にしてデプロイをしました。
最後に
ポートフォリオサイトを作ろうと踏み出すのってなかなか勇気がいると思います。
ただ、ポートフォリオサイトを一個作っておくだけで、相手に自分という人間、自分が現在持っている能力をすぐに理解してもらえるようになります。
ちょっと大げさかもしれないですけど、エンジニアとして生きる上での１つの資産になるんじゃないかなと思っています。
今回の記事で、今踏み出そうとしている人の背中を少しでも押せたら幸いです。
