Webサイト制作実績をまとめたポートフォリオの作り方を徹底解説!

【担当者目線】で伝わる ポートフォリオの作り方


Webサイト実績をまとめたポートフォリオの作り方がわからない…
必要な項目やクオリティを高めるコツも具体的に知りたいな…

サイトのURLやコンセプトなどはメモしていても、魅力的に見せるポートフォリオを作っている方は意外と少ないです。転職時に必要なことはわかっていたけど、忙しくて手が出せなかった……という方もいるかもしれませんね。

こんにちは! フリーランスエンジニア兼テックライターのワキザカです。

この記事では、Webサイト制作実績をまとめたポートフォリオの作り方を解説します。

ポートフォリオに必要な項目だけでなく、クオリティを高めるコツについても解説しているので、ぜひ参考にしてみてくださいね。

この記事はこんな人のために書きました。

  • Webサイト制作実績をまとめたポートフォリオの作り方を知りたい
  • ポートフォリオに必要な項目やクオリティを高めるコツを知りたい

Webサイトの実績をまとめたポートフォリオの作り方とは?

Webサイトの実績をまとめたポートフォリオの作り方は、大きく分けて以下の2つです。


ポートフォリオの作り方

  • 方法1:無料サービスを使って作る
  • 方法2:自分で設計・コーディングして作る


ひとつずつ詳しく解説しますね。

①無料サービスを使って作る

ポートフォリオと聞くと身構える人もいるかもしれませんが、無料サービスを使えば簡単に作れます。たとえば以下のようなサービスがあります。

サービス名特徴
WIX(ウィックス)・誰でも簡単にホームページが作れるWebサービス
・ドラッグ&ドロップで簡単かつ自由に作れる
・簡単な質問に答えるだけで、サイトの元を作れる
RESUME(レジュメ)・おしゃれなポートフォリオ作成に特化したWEBサービス
・作ったアプリのポートフォリオだけでなく、Web版の履歴書も載せれる
・開発時のストーリーを載せるページを作れる

『WIX』は無料でホームページが作れるWebサービスです。ポートフォリオサイトのような簡単なWebサイトであれば、簡単に作れます。

また、『RESUME』はウェブデザインメディア『サルワカ』の管理人が作った、ポートフォリオ作成サービスです。デザインがおしゃれなので、ポートフォリオの作成に打ってつけです。

また、実績ごとに子ページを作れるため、より詳細な作成過程も残せます。

転職でポートフォリオを活用するときは、「出来上がったサイト + 作った経緯」が重要です。作った経緯を残せるサービスは少ないので、最初からあるのは便利ですよね。

②自分で設計・コーディングして作る

事前にある型をつかって作るWIXやRESUMEは、オリジナリティが出しづらいです。ポートフォリオサイトも実績として活用するなら、自分で設計・コーティングすることもひとつの手です。

たとえば、『STUDIO』を使えば、設計したデザインから自動でコードを出力できます。以下はフリーランスデザイナーの方のポートフォリオですが、STUDIOで作成されています。

参考:奥貫あずさポートフォリオ

オリジナリティのあるサイトを作れるため、ポートフォリオサイトも一つの実績として訴えやすくなりますね。

ポートフォリオサイトには何を載せればいいの?


ポートフォリオの作り方はわかったけど、
具体的に何を載せればいいんだろう……

と思っている方もいるのではないでしょうか。ポートフォリオは、大きく分けて以下の2つを載せることが重要です。


ポートフォリオで必須の項目

  • 本人のスキルが可視化されたページを用意する
  • 今まで作った実績を載せる


「当たり前じゃないか」と思った方もいるかもしれませんが、作った実績と一口に言っても色々見せ方はあります。ひとつずつ詳しく解説しますね。

①本人のスキルが可視化されたページを用意する

ポートフォリオの実績がいかに優れていても、誰が作ったのかわからないサイトは信頼できないですよね。

たとえば以下の2人だと、同じ実績が載っていても印象が変わってきます。


ベテランエンジニアの例


フロントエンジニア歴5年で、HTML、CSS、JavaScript、jQueryなど言語全般使えます。

また、Sketchでデザインモックを作ってから、コーディングに落とし込むこともできるので、デザイナーとのコミュニケーションコストも抑えられます。

PhotoshopやIllustratorもひと通り使えるため、画像加工なども自分で用意できます。



駆け出しエンジニアの例


フロントエンジニア歴半年です。HTML、CSS、JavaScriptを使って、Webサイトが作れます。

Bootstrapのテンプレートを使ったサイト制作であれば、3日程度で納品も可能です。低価格&スピード重視で依頼したい方に、おすすめです。


ベテランエンジニアの場合は、Webサイト制作スキルが「コーディング」だけでなく「デザイン」もあることが伝わりますよね。そのため、実績を見ても自分でデザインもしたことが伝わりやすいです。

また、駆け出しエンジニアの場合でも、自分のスキルに合わせてサイト制作ができるスキルが伝わります。何かを依頼したときに、自分でできる/できないの判断ができるため、コミュニケーションの取りやすいです。

ただ、何も書いていない場合は、上記どちらか判断できません。実績以上のスキルを伝えたり、成長意欲をくみ取ってもらえなくなってしまいます。

正しく自分のスキルを伝えるためにも、スキルを可視化したページは必要なのです。

②今まで作った実績を載せる

ポートフォリオで重要なのは、「今までどのぐらいの実績があるか?」「サイト制作実績のスキルとして何を持っているか?」です。

そのため、以下の2つのページを用意しておくのがおすすめです。

  • Webサイト制作一覧が見れるページ
  • Webサイト制作実績ごとの詳細ページ

それぞれ詳しく解説しますね。

Webサイト制作一覧が見れるページ

Webサイト制作一覧が見れるページは必須です。

ポートフォリオサイトを見る人は、「今までどんな実績があるの?」と疑問に思っていますよね。その疑問を解消するページです。

以下のような項目を載せた実績を、作った分だけ載せるイメージです。


Webサイト制作実績一覧ページで載せる項目一覧

  • 実績のイメージ画像
  • サイト名
  • 使用言語
  • コンセプト
  • 詳細ページへのリンク



Webサイト制作実績一覧ページの例

画像で成果物の実績をわかりやすく見せて、使った言語やコンセプトを併せて載せます。「どんなジャンルに強いのか?」「今までどんな実績があるのか?」がパッと見てわかりますよね。

また、実績ごとの詳細ページに移動するボタンも、用意しておくのがおすすめです。

Webサイト制作一覧実績ごとの詳細ページ

Webサイト制作実績一覧ページができたら、制作過程や詳細がわかるページを用意します。

以下を参考に、詳細ページを用意しましょう。


詳細ページに用意しておくとおすすめの項目一覧

  • どんな言語で作ったか
  • どのぐらいの期間で作ったか
  • 工夫点
  • 制作ストーリー
  • GitHubの情報


どんなスキルがあるのか?作るにあたって工夫したポイントなどを、詳細に載せていきます。また、GitHubの情報も載せておくと、「コードレベルでスキルを見たい人」に正確に情報を伝えることができます。

いくらWebサイトの見た目が綺麗に見えても、コードの書き方を見ればレベルは伝わるものです。

面接で質問されたときにあたふたするよりも、今の自分の実力を見せたほうが、転職活動も進めやすいですよ!

ポートフォリオサイトのクオリティを高めるコツ

ここまで、ポートフォリオ作成方法や具体的な作り方について解説しました。ただ、同じようにポートフォリオサイトを作ったつもりでも、人によってクオリティに差は出てきます。

そこで次に、ポートフォリオのクオリティを高めるコツについて解説します。クオリティを高めるコツは、大きく分けて以下の3つです。

  • コツ1:企業の人事が知りたいことを載せる
  • コツ2:自身で試行錯誤して作った経緯を載せる
  • コツ3:ポートフォリオ作成実績のある人に相談する

①企業の人事が知りたいことを載せる

ポートフォリオは、転職活動で使うことが多いですよね。そのため、見せる人(企業の人事)が欲しい情報を載せると、クオリティが上がります。

たとえば「スキル」を伝えるときも、以下のように書き方によって伝わり方が変わってきます。

  • Aさん:HTML、CSS、JavaScriptなどの言語全般使えます
  • Bさん:デザインデータからサイトを作った経験が10つあります
  • Cさん:毎月10件、累計50件以上のサイト作成実績があります。全てデザインデータから、サイト作成しています。

伝える内容によって、スキルの伝わり方は変わってきます。

また、採用担当側からすると、コミュニケーションスキルも重要です。「スキルは高いけど、意思疎通が取りづらい人」は採用したくないですよね。

このように、採用者目線で必要なスキルが伝わるように、ポートフォリオを用意しておくとクオリティがグッと上がります。

たとえば、以下の項目に応えるような、内容です。


採用者が知りたいことの例

  • 採用しても、うちで仕事出来る人かな?
  • 自分の役割をこなすためのスキルは持っているかな?
  • 自分でスキルを高めていくような意欲のある人かな?


②自身で試行錯誤して作った経緯を載せる

「①企業の人事が知りたいことを載せる」に近いですが、熱意を持って試行錯誤した痕跡がポートフォリオに載っていることは、とても重要です。

目的を満たすだけのコンテンツは、時間をかければ誰でも作れますよね。ただ、熱意をもって細部まで妥協せず、コンテンツを作り上げられる人は少ないです。

Webサイト制作のテンプレを使いまわして作っている人を除き、何かしらこだわりがあるはずです。その過程を残しておくと、ポートフォリオが実績を見せるだけのサイトではなく、作り手の意図も読み取れるようになるのです。

「どんな人が作ったか?」がより伝わりやすくなるので、試行錯誤の過程は残しておきましょう。

③ポートフォリオ作成実績のある人に相談する

今まで解説した方法を意識しても、慣れないうちはクオリティを上げることが難しいです。

なぜなら、「クオリティの高さ」の判断が難しいからです。また、自分で作った時は、ダメな点を見極めづらいです。

そのため、ポートフォリオ作成実績のある人に相談することがおすすめです。

侍エンジニアでは、Webサイト制作の実績を作るだけでなく、ポートフォリオサイトの作り方も相談することができます。転職時に採用担当が見ている視点もより詳しく相談ができるので、転職活動も捗ります。

以下から無料レッスンが受けられるので、予定を合わせて相談してみてはいかがでしょうか。

侍エンジニア塾
無料体験レッスンを受ける

まとめ

今回は、Webサイト制作実績をまとめたポートフォリオの作り方について解説しました。

せっかくサイト制作実績があるなら、魅力的にまとめたポートフォリオを作りたいですよね。

デザインが苦手ならWIX、RESUMEなどの無料サービスでまずは作ってみて、デザインもできるようになったらSTUDIOを使ってオリジナルデザインのポートフォリオを作るのがおすすめです。

ぜひ、ポートフォリオサイトを作ってみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説