この記事でわかること
- 未経験からでも始められるポートフォリオの作り方
- ポートフォリオに入れる項目
- 未経験からでも簡単に作れるおすすめポートフォリオサイト
Webデザインのポートフォリオの作り方はさまざまです。
人によって入れる内容や情報が違いますし、Webデザインの職種によっても変わります。
そこで本記事では、すべてのポートフォリオ作成に共通する作り方を解説します。
「Webデザインのポートフォリオの作り方に悩んでいる」「ポートフォリオはどうやって作るの？」など未経験の方でもすぐにポートフォリオが作れる内容になっているので、ぜひ参考にしてみてください。
未経験でも大丈夫！ポートフォリオの作り方
ポートフォリオを作るうえでの必要な流れを紹介します。
具体的には以下のようになっています。
- 項目を考える
- 素材を決める
- 参考サイトを見つける
- 構成を決める
- サンプルを作る
- コーディングをする
未経験の方でも作成できる手順を紹介しているので、ぜひ参考にしてみてください。
どのような項目を入れるか考える
まずはポートフォリオに入れる内容や項目を書き出しましょう。
たとえば以下のとおりです。
- 名前
- 顔写真
- 実績
ポートフォリオを作り出してから決めると、内容が重複してしまったり必要な情報を入れ忘れてしまったりします。
ポートフォリオに入れるべき詳しい項目には後で解説します。
素材や掲載する方法を決める
ポートフォリオに掲載する素材や方法を決めていきます。
はじめにピックアップした内容や項目を参考にしながら、どのようなコンテンツが必要なのかを考えていきます。
クライアントから許可を得ていないけど、実績に載せたいWebデザインなどがあれば連絡をしておきましょう。
掲載する方法はテンプレートが使用できるポートフォリオサイトを使用するのか、自作で作成していくのかを決めていきます。
未経験の場合は、テンプレートを使えるサイトがおすすめです。
参考にするポートフォリオを見つける
ポートフォリオに掲載する素材や掲載方法が決まれば、参考になりそうなサイトを探していきます。
有名なWebデザイナーや好きな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上でほぼ大丈夫です。
ポートフォリオを作って営業していきましょう！
ポートフォリオはスキルや実績を証明するためにも、営業ツールとしても役立ちます。
未経験でWebデザイナーを目指している方は、「どのように作ろう」と悩むかもしれませんが、サンプルサイトや今現在でできることを記載すると、目にとまるポートフォリオになるでしょう。
ぜひ実践してみてください。
この記事のまとめ
- ポートフォリオを作るときはまずは情報を整理する
- コーディングやテンプレートを活用して作成する
- ポートフォリオはスキルや実績の証明になる
- ポートフォリオは営業ツールにもなる
