転職

【簡単】ポートフォリオサイトの作り方

エンジニアやwebデザイナーを目指して勉強中の方、転職活動中の方の中には、「自分のポートフォリオサイトを作る」を1つの目標にしている方も多いのでは?

フリーランスとして活動していくにも、ポートフォリオサイトは必要ですね。

過去の記事でも「フリーランス準備の一つとしてポートフォリオサイトの作成が必要!」と触れました!

有言実行!実際にポートフォリオサイトを作成したので、これからポートフォリオサイトを作る方に役立てば嬉しいです!

私が作成したポートフォリオサイトはこちら▶︎https://staku62.com/

ポートフォリオサイトとは

自分が作った作品をまとめたWEBサイトのことで、スキルや実績をアピールすることができます。

いわゆる、「自分の作品集」です。

また、そのポートフォリオサイト自体も実績になります。

内容は人それぞれですが

  • トップページ
  • 自己紹介、経歴
  • 過去の作品
  • スキルの紹介
  • お問い合わせフォーム

といった構成が多いと思います!他にも自身のSNSリンクを埋め込んだり。

決まりがないので基本的には自由です!だからこそ「どうやって作るの?」って迷ってしまう人が多いのですが。

どうせなら自分のお気に入りになるポートフォリオサイトを作っちゃいましょう!

ポートフォリオサイトの作り方

HTMLテンプレートを使う

themeforest公式HP

私は「themeforest」のテンプレートを使って作りました!

「themeforest」はwebサイトテンプレート、ワードプレステンプレートを販売しているサイトです。

有料ではありますが、すでにコーディングが完成しているので文字や写真を置き換えるだけですぐにポートフォリオサイトとして使えます!

海外サイトのため英語表記ですが、諦めないで!

おしゃれなデザインからシンプルなものまで、用途もざまざまに対応したテンプレートが手に入ります。

たとえ購入しなくても、眺めているだけでデザインの勉強にもなり、楽しいです。

また無料テンプレート違い、有料ということもあり、アニメーションやボタンをクリックした時の仕掛けが設置されているなど、既にリッチな作りになっています!

「ゼロから自作する」だと間違いなくコーデング技術も身につきますが

  • スマホ表示に対応していない
  • どこかでエラーやバグが発生している
  • 制作時間が掛かりすぎる

などといった場合もあるので、私は「初めてのポートフォリオサイト」であればテンプレート利用をおすすめします!

また、商品として販売されているプロのコーディングに触れられるのでクラス名の付け方やディレクトリ構造などの勉強にもなります!

最後に

ポートフォリオサイトが完成したら、ぜひサーバーに載せて皆にみてもらえるよう、公開しましょう!

ローカル環境だけで完結するのはもったいないし、誰にもみてもらえません。

レンタルサーバーを契約する必要がありますが、月に1,000円ほどなので積極的に公開してみましょう!

おすすめのレンタルサーバーはこちらです。

数ヶ月のプランよりも、年契約のプランの方が月々の料金は安くなるので私は年契約にしています!

ここまで読んでいただきありがとうございました!

この記事が少しでも役立てば嬉しいです!早速ポートフォリオサイト作りに役立ててください。

それでは、また!