2021年版！Web制作(コーダー向け)で今すぐ実践できるポートフォリオの作り方を徹底解説！

こしば、営業資料になるポートフォリオを作ろうと思うんだ。
Web制作のお仕事がほしいし、制作会社の面接にも挑戦してみたい！

でも、ポートフォリオって具体的にどう用意すればいいのかわからないんだよね。

フリーランスになるためにWeb制作の勉強をしたら、ポートフォリオを用意するのが一般的です。

ポートフォリオを用意するなんて面倒だな…と感じるかもしれません。
しかし、ポートフォリオをしっかりと用意するだけで周りと差をつけることができます。

ポートフォリオを面倒で作っていない人や、作っていても依頼主や制作会社の面接担当者に上手くアピールできない人もいるからです。Web制作フリーランスとして、お仕事をいただくにしてもWeb制作会社に面接に行くにしても、ポートフォリオは必須です。

せっかく作るなら、あなたの実力や熱意を十分アピールできるポートフォリオを作りたいですよね。そこで本記事では、失敗しないポートフォリオの作り方を解説します。

【当記事の監修者】
ショーへー(@showheyohtaki)
合同会社東京フリーランスCOO。
フリーランス時代にTwitterでWeb制作の学習ステップを発信し、のべ10万人以上に読まれてスクール化。2020年受講生数たぶん日本一（約5000人）のオンラインスクールデイトラを運営。
Webマーケティングとプログラミングが好き。フリーランス支援を通して楽しく仕事できる人を応援しています。

今ならLINE限定であなたにピッタリのスキルがすぐに分かる「Webスキル診断」を実施してるよ！ 下のバナーをタップして一生使えるWebスキルを30秒で診断してみてね！

こちらから今すぐ無料で受け取る▼

どうしてWeb制作でポートフォリオが重要なのか

なぜ、Web制作ではポートフォリオが重要なのでしょうか。結論を言うと

「Webサイトの制作を依頼したい人（依頼主）が安心して、仕事を依頼できるようにするためです。」

え？こしば、毎日ちゃんとWeb制作の勉強したし、Webサイトを作ったこともあるよ。
ポートフォリオよりも人柄の方が大事だよ！

もちろん、仕事をお願いされる決め手に人柄や熱意はあります。
しかしWeb制作ではポートフォリオはとても重要なのです。

Webサイトは作ってもらう人からすると、決して安い買い物ではありません。
たとえば、一枚のランディングページ制作を格安Web制作会社に依頼しても20万円前後することは、ざらにあります。

決して安い買い物ではない…
ちゃんと、こちらが求めるWebサイトを作ってくれる人じゃないと不安で仕事は依頼できないな…

お金を出す依頼主の目線で考えてください。

これまで、どんなWebサイトを作ってきたのか分からない人に仕事を依頼するのは不安になるのも当たり前ではないでしょうか。過去にポートフォリオを見ずに仕事を依頼して失敗してしまった方もいるかもしれません。

お仕事をいただくなら、依頼主の不安を取り除かなければ、案件を獲得するのは難しいのではないでしょうか。

たしかに、こしばがWebサイトを作ってもらうとしたら、どんなサイトを作ってくれるか確認したい…

依頼主はあなたが、どんなWebサイトを作れるのかを知りたい

もしも、こしばがポートフォリオなしで営業に行ったらどうなるでしょうか？

ポートフォリオは用意していませんが、毎日、Web制作の勉強をしてきました！こしばに、お任せください！

え・・・。どんなWebサイトを作ってくれるか分からないし不安ですよ。

こしばのポートフォリオです。参考にしてみてください。

なるほど。これ位のWebサイトを作ってくれるならお任せしてもいいかな！

Web制作の仕事を発注する人は、あなたがどんなWebサイトを作れるのかを知りたいのです。どんなWebサイトを作れるのかも分からない人に、仕事を依頼するのは不安ですよね。

いくら口頭でWebサイトを作れると説明されても、実際の制作事例を見るのと見ないのとでは、依頼主の安心感が違います。

もちろん、ポートフォリオを見せただけで仕事を必ずいただけるわけではありません。

しかし、ポートフォリオを見せることで事前に、依頼主が求めている制作物を提供できるかどうかを確認しておくことで、ミスマッチを防げます。

コーダーとして仕事をするなら、どんなコーディングができるのか確認できるようにしよう！

コーダー希望のこしばです。ポートフォリオをご覧ください！

え？このポートフォリオ、画像データだよ。検証ツールやエディターでコードを確認できないよ。

え！？画像データのポートフォリオじゃ駄目なの？

コーダーとして仕事をするなら、ポートフォリオはコーディングの実力をアピールできる形式にしましょう。つまり、実際にコーディングしたWebサイトを見られるようにしなければいけません。

Web制作の中でも特にコーダーの場合、コーディングのレベルをアピールしなければいけません。
特にWeb制作会社に応募する際は、Webサイトの見た目だけでなく中身の見えない部分も見られます。

たとえば、元のデザインを再現できているか、ハンバーガーメニューやスライドショーなどの機能を実装できるのかどうかなどアニメーションも見られます。

さらに、Webサイトの見た目や挙動だけではなくHTMLのマークアップやCSSのクラスのつけ方なども差がつくポイントです。

Web制作で使うポートフォリオサイトはどんなものを作ればいい？

こしば、もうポートフォリオサイト作りに失敗したくない…!!

Web制作で使うポートフォリオサイトは、どんなものを作れば良いのでしょうか。そしてポートフォリオサイトをつくる上でやってはいけないことは何なのでしょうか。せっかくポートフォリオサイトを作るのですから失敗はしたくないですよね。

Web制作（特にコーダー向け）のポートフォリオで用意するべきサイトの種類をご紹介します。

デザインカンプからコーディングしたサイト

Web制作でも特にコーダーとして仕事をしたいなら、デザインカンプからコーディングしたWebサイトをポートフォリオにしましょう。

そしてHTMLやCSS、Sass、jQueryでコーディングしたりアニメーションをつけたりして、Webサイトを実際にブラウザーで表示できるところまで完成させます。

デザインカンプからコーディングしたポートフォリオを見せることができれば、実務に沿ったコーディングができる証明にもなりますね。

実案件でよく作るコーポレートサイトやランディングページ(LP)をポートフォリオにしよう

実案件でよくつくるタイプのWebサイトをポートフォリオにしましょう。Web制作の現場でよく作られるのはコーポレートサイトとランディングページ(LP)です。

（コーポレートサイト：株式会社蒼 ）

（ランディングページ：デイトラWeb制作コース）

Web制作の学習では一般的にコーポレートサイトやランディングページを制作することになります。

特にフリーランスならば、あなたが売りこみたい市場に沿ったタイプのコーポレートサイトやランディングページをポートフォリオにすると良いでしょう。

たとえばHTMLとCSSで作った静的な１枚のランディングページ、複数ページのコーポレートサイト 、WordPressで制作したオリジナルテーマのサイトの最低３つは用意しておくと、仕事を依頼する側も、あなたの技術レベルを確認しやすくなります。

そして、独立して実績と経験を積み掲載できるサイトが増えたら、ポートフォリオをアップデートして充実させましょう。

【注意！】模写のポートフォリオを避けよう

少し前に流行した実際のWebサイトをブラウザーの検証ツールで確認しながら、コーディングする模写コーディングは避けましょう。なぜなら、実務では模写コーディングはせず、デザインカンプを再現するコーディングであるため、模写は実務に沿っていないからです。

そして、許可なく実在するWebサイトを模写コーディングして、ポートフォリオに載せると著作権の侵害になる恐れもあります。

え！？模写コーディングしても、あんまり良いことないの！？
前までコーディングの力をつけるのに、みんな、おすすめしてたのに。

Webサイトを模写して練習すること自体は、コーディングの練習方法としては有効です。しかし、今では無料で配布されたデザインカンプもあるため、無理に模写をする必要はありません。

Web制作(コーダー向け)で使うポートフォリオサイトの具体的な作り方

こしば、コーディングメインで仕事をしたいと思っているんだ。
コーダー向けのポートフォリオの具体的な作り方を知りたい！

Web制作（コーダー向け）未経験だと、ポートフォリオの具体的な作り方ってよく分からないですよね。特にコーダーとして仕事をするなら、コーダーとして出来ることをアピールできるポートフォリオ作りをするべきです。

コーダーとして仕事をしたいのに、ノーコードツールでポートフォリオを作ってもコーディングの実力を依頼主側は評価できませんよね。

Webデザイナーでコーディングを担当しないつもりなら、WiXやSTUDIO、Webflowなどでノーコードツールでポートフォリオを作ることはあるかもしれません。しかし、コーダーとして仕事をすることを希望するならコーディングしたWebサイトで実力をアピールしましょう！

Googleドライブにpngやjpgの画像データでポートフォリオを見せるのも、おすすめできません。Webサイトの中身のHTMLやCSSが画像データでは確認できないからです。

そこで以下より、Web制作で使うポートフォリオサイトの作り方を大きく3ステップに分けて紹介していきます。

1. デザインカンプを用意する
2. コーディングする
3. レンタルサーバーにアップロードする

STEP1：デザインカンプを用意する

まずはデザインカンプを用意しましょう。ポートフォリオとして掲載できるデザインカンプが色んな方から配布されているので、使わせていただきましょう。

デイトラのWeb制作コースにも、ポートフォリオサイトに使える課題が用意されています！

また、Webデザインを自分で出来る人やデザイナーの知り合いがいる人は、オリジナルのデザインカンプからコーディングしてみるのもおすすめです。制作会社や依頼主によっては何度も目にするデザインカンプよりもオリジナルのデザインを好むこともあるからです。

STEP2：コーディングする

用意したデザインカンプからHTMLやCSS、jQueryやSassなどを使ってコーディングしていきましょう。そして、ただ何となく再現するだけでなくピクセルパーフェクトを心がけましょう。

そして、今はマルチデバイスの時代です。パソコンだけでなくタブレットやスマートフォンなど、様々なデバイスでWebサイトは見られます。そのためレスポンシブ対応にも十分、気をつけましょう。

Googleのブラウザーで検証してみることはもちろん、実機で見え方を確認したりブラウザーの種類ごとにどう見えるかも確認したりすると、コーダーとしての実力をアピールできます。

ちなみにデイトラのWeb制作コースでは、実務に沿ったカリキュラムを意識しており、ピクセルパーフェクトの具体的な確認方法や、コーディング後にチェックするべきことも勉強できるように作られています。

STEP3：レンタルサーバーにアップロードする

Webサイトをレンタルサーバーにアップロードしましょう。実案件でもWebサイトを作ったら、サーバーにアップロードします。サーバーにアップロードをする手順などで、実案件で不安になったりつまずいたりすることがあります。

ポートフォリオサイトを制作する際に、実際にサーバーにアップロードする練習もしておきましょう。実際の仕事でも、自前のレンタルサーバーがないと、Webサイトをうまくアップロードできるかどうかを確かめるテストもできません。

コーダーはサーバーにアップロードするまで、担当することが多いためサーバーにも慣れておくのがおすすめです。

RESUMEやGoogleドライブの活用法

Web制作（コーディング）でも、知り合いのお店や会社のWebサイトを作る機会もあります。実際にWebサイトのオーナーになる顧客をエンドクライアントと呼びます。

エンドクライアント向けならばRESUMEやGoogleドライブにWebサイトの画像を入れてポートフォリオにしても良いでしょう。特にWebデザインだけでコーディングは外注するフリーランスならば、無理にレンタルサーバーにWebサイトをアップする必要はないかもしれません。

また、コーダーでも掲載できるポートフォリオサイトが増えたら、レンタルサーバーだけでなくRESUMEやGoogleドライブなどの活用を検討してみても良いでしょう。レンタルサーバーにも容量などの限りがあるため全てのポートフォリオを、サーバーにあげるのは現実的ではないからです。

ちなみにWebサイトを画像化するのに、おすすめのGoogle Chromeの拡張機能、GoFullPageがあります。

GoFullPageを使うとWebサイト全体を画像データで保存できます。

ポートフォリオサイトの制作で気をつけたいtips

こちら、こしばの自信作のポートフォリオ。
『デイトラ最終課題マハーバーラタ』です！

デイトラ最終課題？何それ…
デイトラってそもそも何なの？

【駆け出しWeb制作者のためのTips👨‍💻】
ポートフォリオや営業メールに『デイトラ最終課題』みたいなタイトルで作品を載せてる方をよく見るんですが、絶対やめたほうがいいですよ❗️

まず相手に伝わらないであろう固有名詞を使って自己紹介する時点でコミュニケーション上よくないです😅続く#デイトラ

— ショーヘー@デイトラ運営 (@showheyohtaki) December 23, 2020

え！？ポートフォリオの名前、『デイトラ最終課題』って書いちゃ駄目なの！？

ポートフォリオサイトの制作で注意するべきポイントを、デイトラのWeb制作コースの制作者であるショーへーさんがツイートしてくれています。

注意点をまとめると

この３点に、気をつけましょう。

Web制作を勉強したい人や一部のWeb制作会社の間でデイトラは、広く知られるようになりました。しかし、Web制作やコーディングの仕事を依頼したい人が、必ずしもデイトラのことを知っている訳ではありませんよね。

それに仕事を依頼したい人の全てがスクールの課題をポジティブに評価してくれるとは限りません。

スクールの課題？
ただ、学校でやらされただけのポートフォリオで本当に、ちゃんと仕事できるの？

とネガティブな反応をされてしまうこともあります。

もちろんデイトラのことを知っていてくれて、好意的な反応をしてくれる依頼主もいるかもしれません。
それでも、最初は独学で教材を買ってポートフォリオを作ったという説明を依頼主にした方が無難です。

そっか。デイトラって言っても知らない人だっているもんね。
教材を買いメンターをつけて独学して作ったポートフォリオサイトです！って今度からは答えるようにしようかな。

それから、注意点として、Web制作会社やクライアントによってはコーディングの力だけでなく、デザインのスキルを見たいケースもあります。デザインもコーディングも合わせて、お願いしたいケースです。

実際に営業活動をしてみて、ポートフォリオサイトでデザインもオリジナリティを求められているなと感じることもあるかもしれません。その場合は臨機応変にデザインカンプを自作したり、デザイナーにオリジナルのデザインカンプを作ってもらったりするなど工夫をしてみましょう。

また、フリーランスはいつ、どこで、どんな出会いが仕事につながるか分かりません。
だからこそ、名刺だけではなくポートフォリオもすぐに出せるような状態にしておきましょう。

せっかく良いポートフォリオを作るのですから、沢山の人に見てもらいたいですよね。

せっかくポートフォリオを作るんだから、色んな人に見てもらえるようにするよ。
普段、持ち歩いているスマートフォンやパソコンから、すぐに「こんなWebサイト作ってます！」って見せられるようにしておくよ！

デイトラのWeb制作コースは進めるだけでポートフォリオサイトができる！？

デイトラのWeb制作コースは、実際にWebサイトを作りながら手を動かしてスキルが身につくようになっています。しかもデイトラのWeb制作コースで作ったサイトはポートフォリオとして掲載することが可能です。

つまりWeb制作コースを完走したら、掲載できるポートフォリオサイトも出来上がっていることに。

実際に制作するWebサイトも様々で、LP、Bootstrapを使ったWebサイト、WordPressのオリジナルテーマサイトなど多岐に渡ります。

しかも

あ！あと上級編の卒業制作の課題も増やします❗️
いまはマハーバラタ１パターンだけですが、あと３パターンほど増やして『実案件レベルの4つの課題から好きなものを選んで制作できる』ようにしようと思います👍

ぜひポートフォリオに利用してください👨‍💻

— ショーヘー@デイトラ運営 (@showheyohtaki) February 5, 2021

デイトラWeb制作コースは積極的にアップデートしていて、卒業課題のパターンも増える予定です。

『マハーバーラタ』はコーディングからWordPress化まで出来ればコーダーとして実案件でも十分、通用する位の難易度に設定されています。

おかげさまで、デイトラに取り組んでくださる方が増えたため、依頼主やWeb制作会社の人が何度もポートフォリオサイトで『マハーバーラタ』を目にするという現象まで起きました！

裏話ですが、営業する人の中にはオリジナリティを出すため『マハーバーラタ』のデザインをベースに文字や写真、色を変えてオリジナルのデザインカンプを作ってから、ポートフォリオ にするなど工夫をしていた人もいたそうです。

デイトラ卒業課題のパターンが増えると、ポートフォリオサイトのバリエーションが豊かになりますね。

またデイトラのWeb制作コースでは、実際にポートフォリオサイトを制作する際にも使えるテクニックが紹介されています。

デイトラのWeb制作コースでは実務に必要なのに、書籍やWebスクールであまり取りあげられない実践的な課題を設けています。未経験からでも完走すれば仕事にできることにデイトラのWeb制作コースがこだわっているからです。

まとめ

Web制作（コーダー向け）のポートフォリオ制作について解説しました。コーダーとして活躍したい場合は、仕事の依頼主やWeb制作会社に、コーディングの実力を上手にアピールすることが欠かせません。そのため、依頼主がコーディングの実力まで分かるポートフォリオを制作しましょう。具体的には

１、デザインカンプを用意する
２、コーディングをする
３、レンタルサーバーにアップロードする

この３ステップで実務でもよく制作するLP、コーポレートサイトのポートフォリオを制作しましょう。そして、ポートフォリオに掲載できるサイトが増えてきたら、サーバーの要領にも限りがあるので、GoogleドライブやRESUMEなどのポートフォリオサービスを利用してみてください。

ポートフォリオはWeb制作フリーランスにとって、なくてはならない営業ツールです。依頼主にとってWebサイトは決して安い買い物ではありません。そして、依頼主は新しいサービスをリリースするために、必要なランディングページや会社の顔となるコーポレートサイトは信頼できる人に制作を依頼したいと思うのではないでしょうか。

Web制作フリーランスは、そんな依頼主の不安を取り除いてあげる必要があります。見ず知らずの人から高い買い物をするのは不安になるのが一般的です。依頼主は、どんなWebサイトを作れるのか？コーディングを任せるなら、どれ位の技術力があるのか？を知りたいのです。

依頼主のためにも、仕事を獲得したい自分のためにも、ぜひ、ポートフォリオを作っておきましょう！

みなさんのポートフォリオ楽しみに待ってます！
素敵なWebサイトを作ってくれる人なら歓迎です！

お客様が安心して仕事の依頼をできるように、こしば頑張ってポートフォリオを作るよ！

【PR】Web制作を勉強するならデイトラがおすすめ！

東京フリーランスは未経験でも完走すれば、Web制作の仕事ができるレベルになるオンラインスクール”デイトラ”を運営しています。デイトラはWeb制作を本気で自分の仕事にしたい人のためのオンラインスクール。

作っていてワクワクする制作課題やSlackを通じた学習コミュニティ、分かりやすい動画など楽しく続けられる工夫が詰まっています。

Web制作を実際に仕事をする際に求められる実践的なスキルを学べます！

実案件と同じようにデザインデータからコーディングする課題や、WordPressのブロックエディター を使った新しい制作方法までフリーランスで仕事をする際の、実案件から考えだされた実践的なカリキュラムは他のスクールにはないデイトラの強みです。

さらに、挫折させないメンター陣、アップデートされ続けて無期限で視聴できる講座内容、活発に活動しているオンラインの学習コミュニティなどデイトラの魅力は多岐に渡ります。

Web制作のポートフォリオの作り方に悩んでいる、あなたもデイトラをチェックしてみてくださいね！