Web初心者でも３時間で完成できるポートフォリオサイト #1
ポートフォリオのつくりかた
Web制作が初めてでも、無料で簡単にポートフォリオサイトをつくることができます。この記事では、環境構築からサイト公開まで、３時間でポートフォリオサイトをつくる方法を紹介します。
以下のようなポートフォリオサイトが完成します。
サイト作成のおおよその時間配分は以下の通りです。
- ポートフォリオの内容を考える (60分 )
- VSCodeのHTML開発環境を整える (15分)
- HTMLを作成する (45分)
- Bootstrapで見た目を整える (45分)
- GitHubPagesに公開する (15分)
今回は「1. ポートフォリオの内容を考える」について紹介します。
ポートフォリオに必要なこと
「ポートフォリオサイト」で検索してみると、おしゃれなサイトがたくさん見つかります。以下のようなデザイナーのポートフォリオサイトはとても美しいです。
一方で、無駄なアニメが入っていたり、色がちらかっているサイトもいくつか見受けれれます。下手にデザイナーのサイトを真似ても、ろくなモノになりません。また、内容がポエムばかりのサイトも多いですね。
ちなみに、自分が考える理想のポートフォリオはこれです。
参照元：http://14diarydeden.hatenadiary.jp/entry/2018/08/25/025226
このポートフォリオは、以下の点がとても素晴らしいです。
- 事実だけが書かれている
- 客観的な指標（数値）が書かれている
- 現在のスキルと経験が書かれている
- 簡潔で、ひと目でわかる
ポートフォリオサイトに、本人の考えやポエムは必要ありません。淡々と事実が分かりやすく書かれていることが重要です。
サイト作成に必要なスキル
Webサイト作成に特別なスキルは必要ありません。ポートフォリオサイト作成サービスを使う必要もないですし、ましてや有料のテンプレートを購入する必要もありません。
素直にHTMLを書いて作るほうが早いですし、カスタマイズ性も高く、出来上がりも良いものになります。
ポートフォリオの構成
ポートフォリオの構成は以下の通りです。
この構成に従ってサイトを作成していきます。
サイトを作成するにあたって、まず以下の素材を用意してください。
- 自分の紹介画像
- 経歴
- スキル・資格
- 制作物の画像
- 連絡先
おそらく、今回のポートフォリオサイトの作成において、ここが一番時間が掛かります。サイトを作りながら徐々に素材を用意しても構いませんが、最初の段階である程度どういうことを載せたいかを決めておくと、このあとの作業がスムーズになります。
まとめ
ポートフォリオサイト作成の第１回でした。まだサイト作成に取りかかれていませんが、今回の内容がポートフォリオサイト作成において一番重要なところで、一番時間がかかるところになります。
次回は、VSCodeでHTML開発環境を整えていきます。