この記事でわかること
- ポートフォリオとは
- 未経験からでも始められるポートフォリオの作り方
- ポートフォリオに入れる項目
- 未経験からでも簡単に作れるおすすめポートフォリオサイト
- 今すぐ聞きたいポートフォリオに関する疑問について
この記事の目次
ポートフォリオとは?
ポートフォリオとは「制作物をまとめた作品集」のことです。 自分が作ったサイトをまとめておくことで転職活動などで自己PRする際に使うことができます。 Webデザイナーなどでは提出が必須になっていることもありますよ。未経験でも大丈夫!ポートフォリオの作り方
「ポートフォリオは何か分かったけど、作り方は知らない」「まとめる作品がない」と手を付けられずにいる方も多いのではないでしょうか。 作品づくりの流れを把握してしまえば、簡単な作業になります! 一つ一つ説明していきます。①載せる作品を作る
Webデザイナーを目指している方であれば- Webサイト
- バナー
- デザイン
②作品の説明を考える
相手に作品の魅力が伝わるように説明文を考えていきます。- 手順の工程
- 特徴の表現方法
③ポートフォリオサイトを作成する
載せる作品が完成してきたところで、ポートフォリオ制作を始めます。 作り方や載せる情報については下記で詳しく解説していきます!④ポートフォリオサイトをサーバーにアップして公開する
ポートフォリオを制作するのみでは、誰の目にも止まりません。 作ったものをサーバーにアップしていきます! そのために下記の手続きが必要になります。- 独自のドメインの取得
- レンタルサーバーを借りる
- エックスサーバー
- ロリポップ!
- ConoHa WING
ポートフォリオを作り始める前の工程
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/lauren-mancke-aOC7TSLb1o8-unsplash-1.jpg)
- 項目を考える
- 素材を決める
- 参考サイトを見つける
- 構成を決める
- サンプルを作る
- コーディングをする
どのような項目を入れるか考える
まずはポートフォリオに入れる内容や項目を書き出しましょう。 たとえば以下のとおりです。- 名前
- 顔写真
- 実績
素材や掲載する方法を決める
ポートフォリオに掲載する素材や方法を決めていきます。 はじめにピックアップした内容や項目を参考にしながら、どのようなコンテンツが必要なのかを考えていきます。 クライアントから許可を得ていないけど、実績に載せたいWebデザインなどがあれば連絡をしておきましょう。 掲載する方法はテンプレートが使用できるポートフォリオサイトを使用するのか、自作で作成していくのかを決めていきます。 未経験の場合は、テンプレートを使えるサイトがおすすめです。参考にするポートフォリオを見つける
ポートフォリオに掲載する素材や掲載方法が決まれば、参考になりそうなサイトを探していきます。 有名なWebデザイナーや好きなWebサイトを参考にして作っていきましょう。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
見やすさや情報の伝わりやすいサイトを見つけ、自身のポートフォリオに加えてみてください。
サイトの構成を決める
ポートフォリオのサイト構成を考えていきます。 ポートフォリオを見る人が、どのような導線をたどっていくと見やすいのかを考えてみてください。 手書きで作成することも可能ですが、PhotoshopやCacaoのようなデザイン作成ツールを使用してもイメージがまとまりやすいです。サンプルを作る
ポートフォリオのサンプルを作る際にはワイヤーフレームを使用します。 ワイヤーフレームとは、Webサイトの設計図のことです。 ボタンの位置や掲載するコンテンツを配置する枠を使って大まかな作成イメージをしていきます。 先ほど紹介したCacooなどの無料ツールを使用することもできますし、本格的に作りたい方は有料のツールを使用するのがおすすめです。コーディングをする
ワイヤーフレームが完成したら、実際にコーディングをしていきます。 コーディングとは、Webサイトを作るために必要なプログラム言語です。 具体的には以下のようなスキルがあります。- HTML
- CSS
- JavaScript
【具体例】ポートフォリオに入れる項目
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/luca-bravo-9l_326FISzk-unsplash.jpg)
- 自己紹介
- 写真
- 過去の作品
- 対応可能な業務
- 単価
- クライアントからの評価
- 連絡先
自己紹介
自己紹介に入れる内容は以下のとおりです。- 名前
- 生年月日
- 経歴
![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
ポートフォリオは自己紹介がメインではなく、実績や過去の作品の内容を重視するべきなので、文章は簡潔でわかりやすい内容を意識しておきましょう。
写真
ポートフォリオはWebデザイナーにとって履歴書のようなものなので顔写真を掲載します。 なるべく実写の顔写真がおすすめですが、似顔絵などのアイコンでも問題ありません。 風景画像やペットの画像は、ダメではないですがおすすめはできません。 とくに企業に提出する場合は、顔がわかりやすく写っている写真にしましょう。過去の作品紹介
ポートフォリオで最も重要なのが過去の作品です。 どのような実績があるか、過去にどのような作品を作ってきたのかを掲載しましょう。 ただ作品を掲載するだけでなく、こだわった部分やデザインのコンセプトを簡潔に説明しておくとクライアントも確認しやすいです。 「未経験で実績がない人はどうすればいいのか?」と考えている方は、今できるスキルを掲載しておくのがおすすめです。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
サンプルでWebサイトを作成して見てもらうのもクライアントに作品のイメージやスキルが伝わりやすくなります。
対応可能な業務
どこまでが対応可能な業務なのかを明記しておくと、クライアントや面接官も仕事を依頼しやすくなります。 Webデザインの場合は以下のとおりです。- コーディングができるか
- グラフィックデザインができるか
- デザインツールが使えるか
単価
副業やフリーランスで活動する場合は、単価も明記しておくのがおすすめです。 単価交渉をする場合に値段を提示しやすくなるので、スムーズに提案できるからです。 値段設定についてはむずかしいですが、Webデザイナーの相場や自分のスキルを確認したうえで決めてみるといいでしょう。クライアントからの評価(経験者の場合)
経験者の方はクライアントからの評価を載せられる範囲で記載しておきましょう。 たとえばクラウドソーシングサイトでの評価を掲載しておくのも一つの手段です。 クラウドソーシングサイトとは、インターネット上で仕事が受発注できるマッチングサイトです。 クラウドソーシングサイトで仕事を請けると、クライアントからのコメントや評価がもらえます。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
他人からの評価はあなたのスキルや実績の信頼性につながるので、クライアントの個人情報などはわからないように配慮しつつ掲載しましょう。
連絡先
ポートフォリオを確認した方から連絡が来るかもしれないので、連絡先を明記しておくのがおすすめです。 SNSを経由して連絡がくることもあるので、アカウントを載せておくのもいいでしょう。 SNSから発注を検討している方は、どのような発信をしているかを確認する場合があるので、日頃からWebデザインに関する投稿を意識しておくと案件獲得につながります。テンプレートが使えるサイト【未経験者におすすめ】
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/edho-pratama-T6fDN60bMWY-unsplash-3.jpg)
WordPress
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/スクリーンショット-2022-10-29-21.38.42-1024x484.png)
Portforio Box
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/スクリーンショット-2022-10-29-21.42.59-1024x469.png)
Wix
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/スクリーンショット-2022-10-29-21.45.41-1024x431.png)
![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
テンプレートも豊富なのであなたのイメージに合ったポートフォリオサイトが作れるでしょう。
ポートフォリオについての疑問
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/question-mark-g2787f0ebf_640.jpg)
Q.ポートフォリオはなぜ必要?
Webデザイナーは技術職なのでスキルや実績が重要視されますが、それを証明するために必要なのがポートフォリオです。 作品のクオリティを実際の目で確認し、あなたのレベルをチェックします。 副業やフリーランスで活動する場合、案件に応募する都度ポートフォリオを作成するのは大変なので、業務を効率化するという意味でも重要です。Q.ポートフォリオは紙かWeb?何で作る?
基本的にはWeb上で準備しておけば問題ありません。 企業に面接に行く場合は、紙での提出を余儀なくされることもあるので、就職や転職活動をしようと考えている方は、紙のポートフォリオを用意しておきましょう。 副業やフリーランスの方は、Web上でほぼ大丈夫です。![https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg](https://digital-hacks.jp/blog/wp-content/uploads/2022/09/man_04-300x300.jpg)
デジハク編集長
紙のポートフォリオをそのままスキャンし、PDF化しておくのもおすすめです!
Q.Webデザイナーのポートフォリオに載せる作品例は?
参考になるおしゃれなWebデサントで作られたポートフォリオサイトをご紹介します。- S5 Studios:田渕将吾さん
- present.:プランニング・ディレクター、デザイナーの宇都宮勝晃さん
- 佐藤 タカアキ:Webデザイナー兼カメラマンの佐藤タカアキさん
- KATOSHUN.com:Webデザイナー加藤俊司さん
Q.ポートフォリオが学生の就活に役立つって本当?
はい、必ず役に立ちます! Web業界に就職を考えている方は、就活にポートフォリオは欠かせません。 就活の際に「自分の制作スキル」「実務スキル」と伝えるために必要になります! 「一度作ったらOK!」ではなく、ブラッシュアップして改良を重ねていくことで完成度を挙げていくことも大切です。ポートフォリオを作って営業していきましょう!
![](https://digital-hacks.jp/blog/wp-content/uploads/2022/10/firmbee-com-gcsNOsPEXfs-unsplash-1.jpg)
この記事のまとめ
- ポートフォリオを作るときはまずは情報を整理する
- コーディングやテンプレートを活用して作成する
- ポートフォリオはスキルや実績の証明になる
- ポートフォリオは営業ツールにもなる