Webデザイナーのポートフォリオの作り方とは？具体的な例やも紹介【未経験OK】

Webデザインのポートフォリオの作り方はさまざまです。 人によって入れる内容や情報が違いますし、Webデザインの職種によっても変わります。 そこで本記事では、すべてのポートフォリオ作成に共通する作り方を解説します。 「Webデザインのポートフォリオの作り方に悩んでいる」「ポートフォリオはどうやって作るの？」など未経験の方でもすぐにポートフォリオが作れる内容になっているので、ぜひ参考にしてみてください。

ポートフォリオとは？

ポートフォリオとは「制作物をまとめた作品集」のことです。 自分が作ったサイトをまとめておくことで転職活動などで自己ＰＲする際に使うことができます。 Webデザイナーなどでは提出が必須になっていることもありますよ。

未経験でも大丈夫！ポートフォリオの作り方

「ポートフォリオは何か分かったけど、作り方は知らない」「まとめる作品がない」と手を付けられずにいる方も多いのではないでしょうか。 作品づくりの流れを把握してしまえば、簡単な作業になります！ 一つ一つ説明していきます。

①載せる作品を作る

Webデザイナーを目指している方であれば

• Webサイト
• バナー
• デザイン

上記のものは作っておいた方が良いでしょう。 また、自分の趣味に関連するものとして、実際に使うことを装置したWebサイトを作っておくことで「こういうのを作れます」というＰＲに繋がります！

②作品の説明を考える

相手に作品の魅力が伝わるように説明文を考えていきます。

• 手順の工程
• 特徴の表現方法

上記を言語化していくことが必要になります。 作品づくりの際に、想定したものを再度ポートフォリオを作る際には「見た人に伝わるように」と意識してもう一度まとめ直してください！

③ポートフォリオサイトを作成する

載せる作品が完成してきたところで、ポートフォリオ制作を始めます。 作り方や載せる情報については下記で詳しく解説していきます！

④ポートフォリオサイトをサーバーにアップして公開する

ポートフォリオを制作するのみでは、誰の目にも止まりません。 作ったものをサーバーにアップしていきます！ そのために下記の手続きが必要になります。

• 独自のドメインの取得
• レンタルサーバーを借りる

レンタルサーバーは性能や料金が様々。 ポートフォリオ用に最適なレンタルサーバーとして

• エックスサーバー
• ロリポップ！
• ConoHa WING

上記のものが有名なものであり、信頼度が高いです。 サーバーに不具合が生じず、サポート体制が充実しています。 また、電話なメールでのサポート体制がしっかりしていることと、有名であることのメリットとして分からないことがあった際に調べればすぐに情報を出てくることも挙げられます！

ポートフォリオを作り始める前の工程

ポートフォリオを作るうえでの必要な流れを紹介します。 具体的には以下のようになっています。

• 項目を考える
• 素材を決める
• 参考サイトを見つける
• 構成を決める
• サンプルを作る
• コーディングをする

未経験の方でも作成できる手順を紹介しているので、ぜひ参考にしてみてください。

どのような項目を入れるか考える

まずはポートフォリオに入れる内容や項目を書き出しましょう。 たとえば以下のとおりです。

• 名前
• 顔写真
• 実績

ポートフォリオを作り出してから決めると、内容が重複してしまったり必要な情報を入れ忘れてしまったりします。 ポートフォリオに入れるべき詳しい項目には後で解説します。

素材や掲載する方法を決める

ポートフォリオに掲載する素材や方法を決めていきます。 はじめにピックアップした内容や項目を参考にしながら、どのようなコンテンツが必要なのかを考えていきます。 クライアントから許可を得ていないけど、実績に載せたいWebデザインなどがあれば連絡をしておきましょう。 掲載する方法はテンプレートが使用できるポートフォリオサイトを使用するのか、自作で作成していくのかを決めていきます。 未経験の場合は、テンプレートを使えるサイトがおすすめです。

参考にするポートフォリオを見つける

ポートフォリオに掲載する素材や掲載方法が決まれば、参考になりそうなサイトを探していきます。 有名なWebデザイナーや好きなWebサイトを参考にして作っていきましょう。

デジハク編集長

見やすさや情報の伝わりやすいサイトを見つけ、自身のポートフォリオに加えてみてください。

サイトの構成を決める

ポートフォリオのサイト構成を考えていきます。 ポートフォリオを見る人が、どのような導線をたどっていくと見やすいのかを考えてみてください。 手書きで作成することも可能ですが、PhotoshopやCacaoのようなデザイン作成ツールを使用してもイメージがまとまりやすいです。

サンプルを作る

ポートフォリオのサンプルを作る際にはワイヤーフレームを使用します。 ワイヤーフレームとは、Webサイトの設計図のことです。 ボタンの位置や掲載するコンテンツを配置する枠を使って大まかな作成イメージをしていきます。 先ほど紹介したCacooなどの無料ツールを使用することもできますし、本格的に作りたい方は有料のツールを使用するのがおすすめです。

コーディングをする

ワイヤーフレームが完成したら、実際にコーディングをしていきます。 コーディングとは、Webサイトを作るために必要なプログラム言語です。 具体的には以下のようなスキルがあります。

• HTML
• CSS
• JavaScript

これらのプログラミング言語を使用してWebサイトを作成していきます。 コーディングスキルのない未経験の方は、テンプレートが使用できるWebサイトでポートフォリオを作成する形でも問題ありません。

【具体例】ポートフォリオに入れる項目

ポートフォリオに記載する情報や内容を解説します。 具体的には以下のとおりです。

• 自己紹介
• 写真
• 過去の作品
• 対応可能な業務
• 単価
• クライアントからの評価
• 連絡先

それぞれ具体的にみていきましょう。

自己紹介

自己紹介に入れる内容は以下のとおりです。

• 名前
• 生年月日
• 経歴

どのような経緯でWebデザイナーを始めたのか簡単な略歴があるといいでしょう。 また本業なのか、副業なのかを明記しておくのがおすすめです。

デジハク編集長

ポートフォリオは自己紹介がメインではなく、実績や過去の作品の内容を重視するべきなので、文章は簡潔でわかりやすい内容を意識しておきましょう。

写真

ポートフォリオはWebデザイナーにとって履歴書のようなものなので顔写真を掲載します。 なるべく実写の顔写真がおすすめですが、似顔絵などのアイコンでも問題ありません。 風景画像やペットの画像は、ダメではないですがおすすめはできません。 とくに企業に提出する場合は、顔がわかりやすく写っている写真にしましょう。

過去の作品紹介

ポートフォリオで最も重要なのが過去の作品です。 どのような実績があるか、過去にどのような作品を作ってきたのかを掲載しましょう。 ただ作品を掲載するだけでなく、こだわった部分やデザインのコンセプトを簡潔に説明しておくとクライアントも確認しやすいです。 「未経験で実績がない人はどうすればいいのか？」と考えている方は、今できるスキルを掲載しておくのがおすすめです。

デジハク編集長

サンプルでWebサイトを作成して見てもらうのもクライアントに作品のイメージやスキルが伝わりやすくなります。

対応可能な業務

どこまでが対応可能な業務なのかを明記しておくと、クライアントや面接官も仕事を依頼しやすくなります。 Webデザインの場合は以下のとおりです。

• コーディングができるか
• グラフィックデザインができるか
• デザインツールが使えるか

詳しいスキルセットも書いておくとわかりやすいでしょう。

単価

副業やフリーランスで活動する場合は、単価も明記しておくのがおすすめです。 単価交渉をする場合に値段を提示しやすくなるので、スムーズに提案できるからです。 値段設定についてはむずかしいですが、Webデザイナーの相場や自分のスキルを確認したうえで決めてみるといいでしょう。

クライアントからの評価（経験者の場合）

経験者の方はクライアントからの評価を載せられる範囲で記載しておきましょう。 たとえばクラウドソーシングサイトでの評価を掲載しておくのも一つの手段です。 クラウドソーシングサイトとは、インターネット上で仕事が受発注できるマッチングサイトです。 クラウドソーシングサイトで仕事を請けると、クライアントからのコメントや評価がもらえます。

デジハク編集長

他人からの評価はあなたのスキルや実績の信頼性につながるので、クライアントの個人情報などはわからないように配慮しつつ掲載しましょう。

連絡先

ポートフォリオを確認した方から連絡が来るかもしれないので、連絡先を明記しておくのがおすすめです。 SNSを経由して連絡がくることもあるので、アカウントを載せておくのもいいでしょう。 SNSから発注を検討している方は、どのような発信をしているかを確認する場合があるので、日頃からWebデザインに関する投稿を意識しておくと案件獲得につながります。

テンプレートが使えるサイト【未経験者におすすめ】

ここからは、ポートフォリオサイトが簡単に作れるサイトを紹介します。 クリック一つでの操作やテンプレートが用意されているので、Webデザイン未経験の方でも使用できます。 ぜひ参考にしてみてください。

WordPress

画像引用：WordPress WordPressは、Webコンテンツを制作できるサイトです。 ブログ作成に使用されているイメージが強いですが、コーディングを加えることでオリジナルのデザイン設計が可能です。 テンプレートも豊富なので、Webデザイン未経験の方もすぐにプロ級のサイトが作れます。 世界中の8割の方が使用していることもあり、困ったときの解決方法が検索をすれば出てくるのでWebデザイン未経験の方にはおすすめです。

Portforio Box

画像引用：Portforio Box Portforio Boxはポートフォリオサイトとしての機能もありますが、オシャレな写真が使えたり、ECサイトが運営できたりといったサービスを展開しています。 有料ですが、フォントやテンプレートを選択するだけで簡単に作れるのが特徴です。 プランは3つから選べるので、ぜひお好きなものを選択し運営してみてください。

Wix

画像引用：Wix Wixは、クリック一つでホームページ制作ができるサイトです。

デジハク編集長

テンプレートも豊富なのであなたのイメージに合ったポートフォリオサイトが作れるでしょう。

Wixのいいところは無料で使える点です。 ホームページ作成や基本機能は無料で使用できます。 サイトを検索上位表示するために必要なSEO対策や独自ドメインを獲得するには、有料プランに登録する必要があります。

ポートフォリオについての疑問

Q.ポートフォリオはなぜ必要？

Webデザイナーは技術職なのでスキルや実績が重要視されますが、それを証明するために必要なのがポートフォリオです。 作品のクオリティを実際の目で確認し、あなたのレベルをチェックします。 副業やフリーランスで活動する場合、案件に応募する都度ポートフォリオを作成するのは大変なので、業務を効率化するという意味でも重要です。

Q.ポートフォリオは紙かWeb？何で作る？

基本的にはWeb上で準備しておけば問題ありません。 企業に面接に行く場合は、紙での提出を余儀なくされることもあるので、就職や転職活動をしようと考えている方は、紙のポートフォリオを用意しておきましょう。 副業やフリーランスの方は、Web上でほぼ大丈夫です。

デジハク編集長

紙のポートフォリオをそのままスキャンし、PDF化しておくのもおすすめです！

Q.Webデザイナーのポートフォリオに載せる作品例は？

参考になるおしゃれなWebデサントで作られたポートフォリオサイトをご紹介します。

• S5 Studios：田渕将吾さん
• present.：プランニング・ディレクター、デザイナーの宇都宮勝晃さん
• 佐藤 タカアキ：Webデザイナー兼カメラマンの佐藤タカアキさん
• KATOSHUN.com：Webデザイナー加藤俊司さん

上記はプロのWebデザイナーさんの作品例なので、ここまではレベルを最初から求めずとも目指すところとして勉強になるでしょう。

Q.ポートフォリオが学生の就活に役立つって本当？

はい、必ず役に立ちます！ Web業界に就職を考えている方は、就活にポートフォリオは欠かせません。 就活の際に「自分の制作スキル」「実務スキル」と伝えるために必要になります！ 「一度作ったらOK！」ではなく、ブラッシュアップして改良を重ねていくことで完成度を挙げていくことも大切です。

ポートフォリオを作って営業していきましょう！

ポートフォリオはスキルや実績を証明するためにも、営業ツールとしても役立ちます。 未経験でWebデザイナーを目指している方は、「どのように作ろう」と悩むかもしれませんが、サンプルサイトや今現在でできることを記載すると、目にとまるポートフォリオになるでしょう。 ぜひ実践してみてください。

この記事のまとめ

• ポートフォリオを作るときはまずは情報を整理する
• コーディングやテンプレートを活用して作成する
• ポートフォリオはスキルや実績の証明になる
• ポートフォリオは営業ツールにもなる