1. TOP
  2. フリーランス
  3. 【初心者必見】Webデザイナー・コーダーのポートフォリオの作り方を徹底解説。載せる項目や注意点など
詳しくはこちら
フリーランス
 | 

【初心者必見】Webデザイナー・コーダーのポートフォリオの作り方を徹底解説。載せる項目や注意点など

目次

ポートフォリオとは

ポートフォリオとは、Web制作などにおける自身の制作実績やスキルをアピールするものです。

仕事をもらったり、Web業界へ転職したい方は必ずポートフォリオが必要です。その理由は後ほど解説します。

 

▼ポートフォリオの例

https://itd-creative.netlify.app/

 

今回は、Web制作（Webデザインとコーディング）の勉強を始めて1, 2年以内の方に向けて、ポートフォリオの作り方を解説していきます。

なぜポートフォリオが必要？

ポートフォリオを作るのは面倒くさいと思ったり、「ポートフォリオなんて無くても営業スキルだけでどうにかなるでしょ」と思う方はいると思います。

しかし、ポートフォリオは絶対に作りましょう。その理由をこれから解説していきます。

ポートフォリオは最強の営業ツール

ポートフォリオには、自身の制作実績やスキルを載せます。良いポートフォリオなら、それを見たクライアントや発注者が「この人なら仕事を任せてもいいかな」「一度話してみたいな」のように思ってくれます。

つまり、自分で営業をしなくても、SNSなどにポートフォリオを公開しておけば、自然と仕事の相談が舞い込んできます。

これがポートフォリオを作る最大のメリットです。

自分のスキルを一瞬で伝えられる

しっかりとしたポートフォリオを作れば、自分ができること、できないことを一瞬で相手に伝えられます。

もしポートフォリオがなかったら、文章のみで相手に対して毎回説明しなければいけません。

「文章のみで説明する」と「ポートフォリオで文章や画像などを使って説明する」を比べれば、どっちが相手に伝わりやすいかは言うまでもありません。

 

▼ポートフォリオのスキルのコンテンツの例

https://itd-creative.netlify.app/

転職時や仕事の応募には暗黙の了解でポートフォリオが必要

そもそも、転職時や仕事の応募をする時に「ポートフォリオ必須」を条件にする企業がほとんどです。体感だと9割以上です。

ポートフォリオが無いと、これらに応募することすらできません。

ポートフォリオの必要性は伝わったでしょうか？

ここからがこの記事の本題です。

ポートフォリオはただ作ればいいわけではありません。しっかりとした、クオリティの高い、相手に伝わるポートフォリオを作らなければいけません。変に作ると逆効果で、相手に対してマイナスなイメージを与えてしまいます。

これからは、ポートフォリオに載せる項目、注意点などを解説していきます。

ポートフォリオに載せる項目

ポートフォリオに載せる項目は、「デザイナー」「コーダー」によって多少変わりますが、基本は同じです。

  • 制作実績
  • スキル
  • 自己紹介
  • 連絡先

基本的には、上記の4項目を載せます。他者と違う、圧倒的なアピールポイントがあるならそれを載せてもいいでしょう。

では、順番に載せる項目の解説していきます。

項目その1：制作実績

最も重要な項目です。「デザイナー」「コーダー」に分けて解説していきます。

制作実績の「一覧ページ」と「詳細ページ」を作りましょう。

実績一覧の参考。基本的な構成は「サイトイメージのサムネイル画像」＋「プロジェクト名」＋「担当内容（デザインorコーディングなど）」になります。

デザイナーの場合

  • どのようなサイトやプロジェクトなのかの説明
    会社名だけを載せても、それがコーポレートサイト制作なのかLP制作なのかは伝わりません。どのようなサイトをデザインしたのかをしっかりと説明しましょう。
  • 「サイトデザインのスクリーンショット」もしくは「公開されているURL」
    Webサイトは日々変わるものなので、制作当時の状態のまま残っているとは限りません。できればURLのほうが望ましいですが、自分が携わった時からデザインが変わっていたら意味がありません。どちらを載せるかは柔軟に対応しましょう。
    自分が作ったサイトのデザインが相手に伝われば、どのような方法でも大丈夫です。
  • 制作期間や担当箇所など
    これらの細かい情報も可能であれば載せたいです。しかし、プロジェクトによっては掲載NGなどもあると思うので、細かい情報を載せる場合は細心の注意をはらいましょう。
  • 一言
    どのような意図でデザインをしたかなどをしっかりと説明しましょう。意外と重要な項目です。

コーダーの場合

基本はデザイナーの項目と同じです。

コーダーで最も重要なのは「コード」です。どのような設計でコーディングしたのか、開発規模、担当箇所などは明記しましょう。

可能であればサイトのURLを載せて、コードを見れる状態にしておきましょう。

項目その2：スキル

スキルも重要な項目のひとつです。

デザイナーの場合は、使えるソフトや得意なデザイン手法なども載せましょう。

コーダーの場合は、どの言語を書けて、どのくらいの知識があるかを載せましょう。

 

注意点
私が担当者なら、即不採用にするスキルの書き方があります。それは、星マークを使って自身のスキルを表している書き方です。
星5ならどのくらいのスキルがあるの？星4との違いは？のようにツッコミどころ満載の書き方です。
自身のスキルは具体的に書くようにしましょう。

項目その3：自己紹介

自己紹介には「学歴、職歴など」仕事に関することを記載しましょう。趣味や抽象的なメッセージ（精一杯取り組みます のような文章）は不要です。

また、他者と圧倒的に違うアピールポイントがあればそれを載せるのもありだと思います。

注意点
自己紹介に趣味などを仕事と全く関係ないことを載せているポートフォリオをよく見かけます。
クライアントや採用者の立場に立って考えてみましょう。
その方たちがあなたの趣味を知っても何もメリットはありません。知りたいのはあなたの「スキル」です。
なので、自己紹介には仕事に関することを中心に書くようにしましょう。

項目その4：連絡先

ポートフォリオの目的が転職ならこの項目はあってもなくてもどちらでも大丈夫です。しかし、仕事をもらう目的なら連絡先は必ず載せましょう。

一番の理想はお問い合わせフォームです（連絡するのが楽なので）。次にメールアドレスやSNSのDMへのリンクです。

お問い合わせフォームを使う場合は、メールがちゃんと送受信できるか必ずチェックしましょう。いざお問い合わせを受けたのにメールが届かないともったいないです。

お問い合わせフォームの実装は、WordPressを使っていればプラグイン一択でしょう。普通のサイトであればフォームランなどのお問い合わせフォームサービスを利用するのも一つの選択肢です。

お問い合わせフォームはちゃんと動くかが一番重要なので、個人的にはGoogleアンケートでも問題ないと思っています。もしコーダーならちゃんと実装してほしいですが...

ポートフォリオの作り方

ポートフォリオを作る手段はいくつかあります。「全て自分で作成する」「ノーコードやポートフォリオサービス（STUDIOやforio）を使う」などが挙げられます。

STUDIO

デザイナーであれば、ノーコードなどのサービスを使うのはありだと思います。デザイナーはあくまでデザイン実績を見せたいので。

しかし、コーダーの場合は自分でコードを書いてポートフォリオを作りたいところです。コーダーはコーディング力をアピールしなければいけないので、ノーコードなどのサービスを使うのはよろしくないです。

なのでここからは、自分でポートフォリオを作る手順を解説していきます。

 

ポートフォリオを作るには、主に3つの作業が必要です。

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

1. デザインデータを作る

まずはデザインデータを作ります。XDやPhotoshop、Figmaなどを使います。

この工程はデザイナーであれば問題ないと思いますが、コーダーの方がデザインを作るのは大変だと思います。そこで、コーダーの方におすすめの方法がいくつかあります。

  • 配布されているデザインデータを使う
  • デザイナーに依頼する

配布されているデザインデータを使う

ポートフォリオ用のデザインデータ（XDやPhotoshop形式）を配布・販売しているサイトがあります。

そこからデザインデータを手に入れれば、それをもとに文章などを考えるだけでデザインデータの作成は完了です。

デザイナーに依頼する

初心者のコーダーでやりがちなのが、自分でデザインしてしまうことです。デザイン経験の無い人が作ったポートフォリオはとても見づらく、それだけで選考から外される可能性があります。

なので、コーダー専門の方は、素直にデザイナーに依頼するのをおすすめします。

自分と同じくらいの学習歴のデザイナーをTwitterなどで見つけてデザインを依頼してみましょう。デザインしてもらう代わりに、その人のポートフォリオのコーディングを行うなど、Win×Winの関係を提案するのも良いと思います。

2. コーディングをする

デザインデータをもとにコーディングを行います。HTML、CSS、JavaScript（jQuery）、WordPressなどの知識が必要です。

デザイナーの場合は、コーダーに依頼するか、ノーコードツールなどのサービスを使うのも選択肢のひとつです。

自分でコーディングする場合は、以下の点を注意しましょう（特にコーダーの方）。

  • 表示崩れは絶対にNG（横スクロールなど）
  • スマホでも見れるようにする（レスポンシブ対応）
  • お問い合わせフォームの動作チェック
  • 綺麗なコードで書く

3. サーバーにアップロードする

コーディングが終わったら、最後にサーバーにサイトをアップロードして公開します。ローカルにしかサイトがないと、自分のPCでしか見れません。

サーバーは、レンタルサーバーを契約しましょう（同時にドメインも）。

レンタルサーバーは、「エックスサーバー」か「ロリポップ」が使いやすくておすすめです。

エックスサーバー

 

サーバーにアップロードするにはFTPを使います。他にもFTPSやSFTPなどもありますが今回は割愛します。

実務では、自分でサーバーにアップロードする場合もあるので、「自分でデザイン・コーディング→サーバーへアップロード」の作業をある程度はできるようになっておきましょう。自分でドメインとサーバーの契約、設定などができるようになれば一安心です。

レンタルサーバー以外にもサーバーはたくさん...
エックスサーバーなどのレンタルサーバー以外にも、AWSやGCP、Firebase、また、SSHでアップロードするなど高度な知識や特別な操作が必要な場合もあります。
仕事を受注する際、納品形式がサーバーへアップロードの場合は、サーバーの種類などをちゃんと聞いておきましょう。

ポートフォリオを作る際の注意点

ポートフォリオを作る際に一番大事なのは、相手目線で作ることです。

  • スキルを★で表しても、具体的なスキルは相手は分からない
  • 自分の趣味を書いても相手は興味ない

 

また、SNS系のリンクを載せるかどうかはしっかりと考えましょう。プライベートなアカウントで普段よくわからないことやゲームのリツイートばかり呟いているのであれば載せないほうがいいです。

自分に明確なメリットがある場合のみSNSのリンクは載せましょう。

 

サイトの表示速度も遅すぎるのもマイナスポイントです。特にコーダーの場合は表示速度は絶対に意識しましょう。

よくある質問

Q. ポートフォリオのコードは見られる？

コーダーであれば見られる可能性が高いです。綺麗なコードでコーディングしましょう。

デザイナーであればコードは気にしなくて大丈夫です。

Q. ポートフォリオのサービスを使うのはダメ？

Adobeなどが提供しているサクッとポートフォリオを作れるようなサービスを使っていいかどうかは、正直人によって変わります。

ベテランで実績がたくさんある人は、そのようなサービスを使っても問題ないと思います。しかし、初学者レベルの場合はマイナスに思われることがやや多い印象です。

最初のうちはポートフォリオを作るのも勉強の一貫だと思って、しっかりと自分で作るようにしましょう。

Q. 載せる実績がない...

デザイナーであれば、ランサーズなどのクラウドソーシングサービスのコンペでお題を見つけて、そのデザインを作ってポートフォリオに載せましょう。

架空のサイトを作るより、実際に存在する依頼をお題にしたほうが勉強にもなるし、アピールポイントにもなります。

 

コーダーの場合は、XDやPhotoshop形式のデザインカンプを配布しているサイトを見つけて、そのデータをコーディングしたものをポートフォリオに載せましょう。

個人的には、サイトの模写は評価できません。結局は模写なのでその人の本来のコーディングの力が判断しにくいです。

そもそも実務ではほぼ100%の確率でデザインカンプからコーディングをするので、デザインカンプからコーディングをするということに慣れておきましょう。

Q. スクールや学校のことは載せないほうがいい？

企業によっては○○スクール卒業の人は採用しない...というケースもあります。

自分が所属する団体の評価を調べて大丈夫そうなら載せてもいいですが、基本的には載せなくていいと思います。

まとめ

Webデザイナー・コーダーのポートフォリオの作り方を解説しました。

まず、ポートフォリオの役割を自分で明確にしましょう（転職用なのか仕事をもらうためなのか）。そして、役割に応じた内容をポートフォリオに載せて、作る際は常に相手目線になることを忘れないでください。

Twitterなどで色々な方のポートフォリオを見ると、自分にしか伝わらないような表現や、全く意味のないことを載せているのをよく目にします。とてももったいないです。

 

ポートフォリオは、自分をアピールするための一番の営業ツールです。ポートフォリオひとつで自分を良くも悪くも見せれます。将来への投資だと思って、しっかりと時間をかけてポートフォリオを作りましょう。

 

TwitterでWeb制作に関することを呟いています。デザインやコーディング、フリーランスについてなど内容は多種多様です。よろしければフォローしてください！

 

関連記事