ポートフォリオサイトの作り方解説【写真付き】

ポートフォリオサイトの作り方解説【写真付き】

こんにちは、たっきー(@ryutoblog)です。今回は、プログラミング初心者向けにポートフォリオサイトの作り方を解説します。

ポートフォリオってなに?
どうやって作るの?

こんな悩みを解決していきます。

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

プログラマーにとってのポートフォリオサイトとは、エンジニア志望の人が就職・転職時に自分のスキルを見せるための履歴書のことを言います。

ポートフォリオサイトを作っておくことで、口頭だけでは伝わりにくいスキルを相手に見せることができたり、自分のスキルの保証の役割を果たしてくれます。

自分が本気でプログラミングをしていることを相手に理解してもらうためにはポートフォリオサイトの作成が必須です。

ポートフォリオサイトに書くべき内容

ポートフォリオサイトに最低限書くべき内容は以下の通りです。

  1. 自己紹介
  2. 作品(サービスやWebサイト)の名前・写真
  3. 作品の概要(作った理由・作った目的・ターゲットは誰か)
  4. 自分なりに工夫したポイント

面接官は、丁寧に自分の履歴書を読んでくれているとは限りません。ポートフォリオサイトにも、改めて自分がどういう人間か知ってもらうため簡単な自己紹介ページを作りましょう。

また、ポートフォリオサイトは自分の制作物の集大成であるため、一つ一つに自分の思いが込められています。なので、作品ごとにその内容をアピールする必要があります。よって、各作品の基本的な説明(上のリスト通り)を記述した上で、どこを自分なりに創意工夫したかをアピールできるとなお良いでしょう。

見やすいデザインを心がけたとか、丁寧なコーディングを心がけたとか、どんな些細なことでもたくさんアピールしましょう。

ポートフォリオサイトを作る方法は2パターン

ポートフォリオサイトの作り方は2パターンあります。

  1. ポートフォリオ作成サービスを使う
  2. 自分でサイトのデザイン、コーディングをして一から作る

の2パターンです。各々の方法のメリット・デメリットを説明します。

①ポートフォリオ作成サービスのメリット・デメリット

✔︎ メリット

  • 誰でも手軽に見栄えのいいポートフォリオサイトが作れる
  • 無料で利用できる

✔︎ デメリット

  • ポートフォリオサイトは手を抜いて作ったことが相手に伝わる
  • コーディングの練習にならない

といった感じですね。もちろんポートフォリオ作成サービスは便利です。デザイン・コーディングが苦手な方でも誰でも同じようにおしゃれなサイトが作れます。

一方で、就職・転職の際のことを考えるとデメリットが大きいです。もし私が面接官だとしたら、「この人はポートフォリオサイトには力を入れずに手を抜いたんだな」という印象が残ります。少なくとも好印象ではありません。

ポートフォリオサイトはせっかく自分の作品をアピールする土台の場所です。それならば、その土台にも自分の創意工夫を散りばめることで、より面接官の興味を引くことができます。

②自分でデザインとコーディングをするメリット・デメリット

✔︎ メリット

  • 自分好みにサイトのカスタマイズが出来る
  • 面接官からの印象が良い
  • サーバーやドメインの仕組みについて学べる

✔︎ デメリット

  • ポートフォリオ作成サービスよりも時間がかかる
  • ポートフォリオ作成サービスよりもお金がかかる(一部無料あり)

といった感じですね。自分でデザインからコーディングまでを行うことにより、就職・転職の際に面接官に自分のやってることの本気度を示すことができます。

面接官は、「この人はポートフォリオサイトも自分で制作したんだな」という好印象を持ちます。仮にそのサイトのデザインが良くなくても、自力で作ろうとするその姿勢が相手に伝わることが肝です

また、エンジニアになるならサーバー・ドメインに関する知識は必須です。自分で1からサイトを作成すると、その過程でサーバーやドメインに関する記事をたくさん読むことになるので自ずと知識がついてきます。

デメリットとして上記の二つが挙げられますが、お金は大してかかりません(だいたい毎月500円~)。相当時間のない人でない限りは、自分で1からポートフォリオサイトを制作するようにしましょう。

【実践】ポートフォリオ作成サービスを使って作る手順

1, どのポートフォリオ作成サービスにするか選ぶ

おそらくポートフォリオ作成サービスを使って作ろうと考えた方は、出来るだけ費用を抑えてサイトを作りたいと思います。なので、無料で使用できて使い勝手の良いポートフォリオサイト作成サービスを3つ紹介します。

✔︎ PORTFOLIOBOX (ポートフォリオボックス)

PORTFOLIOBOXのトップページの画像

PORTFOLIOBOX (ポートフォリオボックス)とは、2012年にサービスが開始したポートフォリオ作成サービスです。htmlやcssなどの専門知識がなくても直感的にポートフォリオが作成できるようなシステムになっています。

また、現在1,000,000人以上の人々がPORTFOLIOBOXを使ってWebサイトを作っています。基本的に無料で利用することができ、有料会員になるには毎月約7ドル(700円)の費用がかかります。有料会員になると、あとで説明しますが独自ドメインというものが取得できます。

まずは無料会員から始めて、機能が気に入ったら有料会員になる流れで良いですね

✔︎ Wix (ウィックス)

Wixのトップページの画像

Wix (ウィックス)とは、イスラエルのとある企業が設立したクラウド型のポートフォリオ作成サービスです。こちらもPORTFOLIBOXと同様、直感的な操作で初心者でも簡単にサイトを作れることが特徴です。

ほとんどの機能が無料で利用できますが、無料版だと広告が入ってしまうのが難点です。実際に面接をする際に広告が入っているのはよろしくないので、こちらもPORTFOLIOBOX同様無料で試してみて気に入ったら後々課金することをおすすめします。

✔︎ MATCHBOX (マッチボックス)

matchboxのトップページの画像

MATCHBOX (マッチボックス)とは、マイナビクリエイターが運営するポートフォリオ作成サービスです。あらかじめ型が用意されていて、そこに画像や文を入れていくことで簡単にポートフォリオサイトが完成するようになっています。

マイナビの運営するサイト内に自分の作品が羅列されているという形になるので、上記二つのサービスよりもオリジナリティが出しづらい点が難点です。

逆に、時間がなくて手っ取り早く自分の作品を見せるためだけに使いたいという方にはもってこいのサービスです。

✔︎ WordPress (ワードプレス)

wordpressのポートフォリオ作成ページの画像

WordPress (ワードプレス)は、ポートフォリオサイトだけでなく、ブログやWebサイトも作成できるサービスです。あらかじめ用意されている型をインストールすることによって、サイトを好きな形にデザインすることができます。また、自分で型のコードをいじることによって、自分好みのデザインに作り変えることも可能です。

しかし、カスタマイズをするためにhtml, css等の基礎知識が必要なので、あまり詳しくない方にとっては上の3つのサービスの方が使い勝手が良いです。

また、ワードプレスを使用するにはドメイン取得・サーバーの契約が必要ですドメインの取得方法・サーバーの契約手順に関してはこちらを参照してください。

当サービスでは、第三者があらかじめカスタマイズしてくれた型を使用する際にお金を払って型を買うシステムになっています。なので、自分でカスタマイズできるという方にとっては、無料で使えて一番自由にサイトのカスタマイズができるので一番おすすめです。

【実践】自分で1からサイトを作る手順

自分で一からデザイン・コーディングをしてポートフォリオサイトを作る場合は、ドメインとサーバーに関する知識が必要です。

各々の意味を簡単に説明すると、

・ドメイン → インターネット上の住所
・サーバー → インターネット上での土地

といった感じです。ドメインとサーバーに関する詳しい説明は後日記事にします。

1, サーバーの契約をする

ますは、インターネット上の土地であるサーバーの契約をします。サーバーには無料のものと有料のものがありますが、就職・転職用のポートフォリオサイトを作る場合には、必ず有料のサーバーにした方が良いです。

理由は、無料のサーバーだと自動で広告が挿入されてしますからです。面接時に面接官から無料のサーバーを使ってるんだな、と広告から伝わってしまうのはあまりよろしくないので勧めません。

一部広告の入らない無料サーバーはありますが、海外で運営されているものだったりサポートが手薄なものが大半なのでいざという時のために有料のものを契約しましょう。

有料とは言えども、ポートフォリオサイトを作るレベルでしたら多機能かつ高速通信のできるサーバーを契約する必要はないです。 ロリポップ のライトプラン(月250円)程度の機能で十分ポートフォリオサイトとしての役割を果たせます。

その他の用途に合わせたサーバーのおすすめに関してはこちらの記事を参考にしてください!

【初心者向け】WordPressのレンタルサーバーおすすめ15選

2, ドメインを取得する

サーバーの契約ができたら、次はドメインの取得をします。

独自ドメインを取得できるサイトはたくさんありますが、私は ムームードメイン というサイトをおすすめします。理由は、ロリポップとムームードメインはどちらも同じ会社が運営していて、会社が同じだとWebサイトの初期設定やその後の管理が楽だからです。

>> ムームードメイン の公式サイトへ

独自ドメイン取得にかかる費用はピンキリです。安くて月1円のようなものもあります!。一方で、「○○○.com」や「○○○.jp」のような有名なものだと月数千円かかります。

取得するときは、どんな末尾のドメイン(トップレベルドメイン)にしても検索順位には関係ないので好きなものを選びましょう。後ろの名前が何であろうと、SEOに関係ないということは Google のSEO担当者が公言しています。

気になる方は、下のSEO担当者のミュラー氏のインタビュー動画 で確認してください。

ところでドメインってなに?なんで取得しなきゃいけないの?

実は、サーバーだけ契約すれば一応サイトとして機能します。それは、各WebサイトにはIPアドレスというものが割り振られているからです。IPアドレスとは、「192.168.0.1」みたいなやつですね。これを検索ボックスに入れて検索すればサイトは表示できます。

ですが、みなさんはサイトを検索するときにこんな数字を打ったことはないですよね。それは、ほとんどのサイトが「独自ドメイン」というものを取得しているからです。独自ドメインを取得することで、作ったサイトのIPアドレスに自分の好きな名前をつけることができます。google.comやyahoo.comがその例です。当サイトだと「ryuto.work」がこのサイトの独自ドメインにあたります。

※独自ドメインは早いもの順です。すでに取られてしまっているドメインは自分は使用することができないので早めに取得しておくことをおすすめします。

3, ドメインをサーバーと結びつける

ドメインとサーバーを契約しただけでは、サイトは表示できません

契約しているサーバーに、「私はこのドメインを使いますよ」と理解させる作業が必要です。この作業をDNS設定(ネームサーバー設定)と言います。

この一連の作業は、契約しているサーバーとドメインのサイトにマニュアルが用意されているのでそれに従って作業していただければ完了します。

ロリポップをご契約いただいた場合は DNS設定のマニュアル からご覧いただけます。

まとめ

今回は、プログラミング初心者向けにポートフォリオサイトの作り方の2パターン解説をしました。

では今回は以上です。