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サイト制作実績一覧ページができたら、制作過程や詳細がわかるページを用意します。
以下を参考に、詳細ページを用意しましょう。
- 詳細ページに用意しておくとおすすめの項目一覧
-
- どんな言語で作ったか
- どのぐらいの期間で作ったか
- 工夫点
- 制作ストーリー
- GitHubの情報
どんなスキルがあるのか？作るにあたって工夫したポイントなどを、詳細に載せていきます。また、GitHubの情報も載せておくと、「コードレベルでスキルを見たい人」に正確に情報を伝えることができます。
いくらWebサイトの見た目が綺麗に見えても、コードの書き方を見ればレベルは伝わるものです。
面接で質問されたときにあたふたするよりも、今の自分の実力を見せたほうが、転職活動も進めやすいですよ！
ポートフォリオサイトのクオリティを高めるコツ
ここまで、ポートフォリオ作成方法や具体的な作り方について解説しました。ただ、同じようにポートフォリオサイトを作ったつもりでも、人によってクオリティに差は出てきます。
そこで次に、ポートフォリオのクオリティを高めるコツについて解説します。クオリティを高めるコツは、大きく分けて以下の3つです。
- コツ1：企業の人事が知りたいことを載せる
- コツ2：自身で試行錯誤して作った経緯を載せる
- コツ3：ポートフォリオ作成実績のある人に相談する
①企業の人事が知りたいことを載せる
ポートフォリオは、転職活動で使うことが多いですよね。そのため、見せる人（企業の人事）が欲しい情報を載せると、クオリティが上がります。
たとえば「スキル」を伝えるときも、以下のように書き方によって伝わり方が変わってきます。
- Aさん：HTML、CSS、JavaScriptなどの言語全般使えます
- Bさん：デザインデータからサイトを作った経験が10つあります
- Cさん：毎月10件、累計50件以上のサイト作成実績があります。全てデザインデータから、サイト作成しています。
伝える内容によって、スキルの伝わり方は変わってきます。
また、採用担当側からすると、コミュニケーションスキルも重要です。「スキルは高いけど、意思疎通が取りづらい人」は採用したくないですよね。
このように、採用者目線で必要なスキルが伝わるように、ポートフォリオを用意しておくとクオリティがグッと上がります。
たとえば、以下の項目に応えるような、内容です。
- 採用者が知りたいことの例
-
- 採用しても、うちで仕事出来る人かな？
- 自分の役割をこなすためのスキルは持っているかな？
- 自分でスキルを高めていくような意欲のある人かな？
②自身で試行錯誤して作った経緯を載せる
「①企業の人事が知りたいことを載せる」に近いですが、熱意を持って試行錯誤した痕跡がポートフォリオに載っていることは、とても重要です。
目的を満たすだけのコンテンツは、時間をかければ誰でも作れますよね。ただ、熱意をもって細部まで妥協せず、コンテンツを作り上げられる人は少ないです。
Webサイト制作のテンプレを使いまわして作っている人を除き、何かしらこだわりがあるはずです。その過程を残しておくと、ポートフォリオが実績を見せるだけのサイトではなく、作り手の意図も読み取れるようになるのです。
「どんな人が作ったか？」がより伝わりやすくなるので、試行錯誤の過程は残しておきましょう。
③ポートフォリオ作成実績のある人に相談する
今まで解説した方法を意識しても、慣れないうちはクオリティを上げることが難しいです。
なぜなら、「クオリティの高さ」の判断が難しいからです。また、自分で作った時は、ダメな点を見極めづらいです。
そのため、ポートフォリオ作成実績のある人に相談することがおすすめです。
侍エンジニアでは、Webサイト制作の実績を作るだけでなく、ポートフォリオサイトの作り方も相談することができます。転職時に採用担当が見ている視点もより詳しく相談ができるので、転職活動も捗ります。
以下から無料レッスンが受けられるので、予定を合わせて相談してみてはいかがでしょうか。
まとめ
今回は、Webサイト制作実績をまとめたポートフォリオの作り方について解説しました。
せっかくサイト制作実績があるなら、魅力的にまとめたポートフォリオを作りたいですよね。
デザインが苦手ならWIX、RESUMEなどの無料サービスでまずは作ってみて、デザインもできるようになったらSTUDIOを使ってオリジナルデザインのポートフォリオを作るのがおすすめです。
ぜひ、ポートフォリオサイトを作ってみてくださいね！
