で
この記事でわかること
- Webデザイナーの実績の作り方
- ポートフォリオサイトの作り方
- 実績をポートフォリオに載せる際に気をつけること
- Webデザイナーがポートフォリオで参考にできるサイト
未経験のWebデザイナーは、どのように実績を作ればいいか難しいでしょう。
そこで本記事では未経験Webデザイナーの実績の作り方を紹介します。
またポートフォリオを載せるサイトや実績を載せる際の注意点を解説するので、ぜひ参考にしてください。
【初心者必見！】Webデザイナーの実績の作り方
Webデザイナーは学歴や職歴よりも「今何ができるか」の実績が重要です。
しかし、未経験からWebデザイナーを目指す場合、実績がないのでどのように仕事を獲得するか悩むでしょう。
そこでここでは、未経験からWebデザイナーとして確実に実績を作る方法を紹介します。
クラウドソーシングサイトに応募する
クラウドソーシングサイトには、多くのWebデザイン案件があります。
その中でもおすすめなのがバナー作成やロゴ作成の案件です。
バナー作成やロゴ作成は、Webデザイン未経験でも1〜2か月でスキルを磨けるからです。
単価は低くなりますが小さな案件で実績を作り、次の仕事につなげていくと高単価の仕事に応募できます。
実績を作り大きな案件の獲得を繰り返すことで、仕事の依頼が増えていきます。
ただ、はじめは採用される可能性は低いでしょう。
なぜなら、ひとつの案件に10〜100件近く応募が来るため、実績が豊富な人材から採用されるからです。
未経験や初心者の頃は実績を積み上げるのが大変ですが、スキルを磨き続ければ採用される可能性は高まります。
架空のサイトを作成する
実績がない場合は、架空のWebサイトを作成してクライアントにスキルを提示をしましょう。
企業のコーポレートサイトや、好きなお店のWebサイトを真似するのがおすすめです。
以下のように「クラウドワークス」などで募集されている案件から選ぶのもいいでしょう。
- Webデザインスクールのホームページ
- 美容クリニックのホームページ
- カフェのホームページ
次にユーザーをイメージするため、「ペルソナ」と呼ばれるユーザーの情報を設定します。
【健康食品のWebサイトを作成する場合】
- 20代後半〜30代前半の女性
- 健康志向が強い
- オーガニック食品に興味がある
最後にワイヤーフレームを使用してWebサイトの設計図を作成していきます。
ワイヤーフレームとは、Webサイトのページ毎のレイアウトを仮に決める設計図です。
ワイヤーフレームがあると、目的や用途から離れずにWebサイトが作成できます。
架空のWebサイトをポートフォリオにして、スキルをアピールしましょう。
ポートフォリオサイトの作り方
ポートフォリオサイトとは、実績を掲載するためのWebサイトです。
無料で使用できるものから、自作する方法を紹介するので、ぜひ参考にしてください。
無料ホームページやブログを作る
無料ホームページやブログを作り、ポートフォリオを掲載しましょう。
おすすめのサイトは以下のとおりです。
- WordPress
- WIX
- RESUME
ポートフォリオを掲載する際のヒントにしてください。
WordPress
WordPressは、CMS（コンテンツマネジメントシステム）と呼ばれており、プログラミング言語を使用せずに、サイトやブログを簡単に作れます。
Webサイトを作成するには、HTMLやCSS・PHPのようなWebサイトを作成するコンピューター言語が必要です。
しかしWordPressは、Web技術のスキルがない方でも数時間でサイトを立ち上げられます。
また多くのユーザーが利用しているため、解決策がすぐに見つかるのも魅力のひとつです。
WIX
WIXは、簡単にWebサイトが作成できるサービスです。
ドラック&ドロップや無料のテンプレートを使用するだけで、デザイン性の高いホームページが作成できます。
簡単にポートフォリオサイトを立ち上げられるので、Webデザイナーの間でも人気です。
WordPressでサイトを作成するには、ドメインやサーバーなどの複雑な手続きを自力で行う必要があります。
WIXはサーバーの立ち上げなども含まれているので、Web関連の知識が少ない方でも、ポートフォリオサイトを作成できます。
RESUME
RESUMEは、年間3000万PVを超えるWebサイト「サルワカ」を運営する管理人らで作成された直感的な操作でポートフォリオサイトサービスです。
RESUMEには大きく分けて「RESUME」と「Works」の2つのサービスがあります。
- RESUME：ポートフォリオのプロフィールページ
- Works：制作物にサムネイルをつけて表示
RESUMEは、自身の経歴を時系列順に表示したり、自分のスキルをアイコンで視認性高く表示したりできます。
また、Worksは制作物の詳細ページには、制作過程や作品のポイントを説明できるページがあります。
クライアントに作品の意図や経緯を伝えやすいサイト設計となっています。
HTMLやCSSを使用して設計する
HTMLやCSSのコーディングを使用することで、オリジナルなデザインでポートフォリオサイトが作成できます。
HTMLやCSSでポートフォリオサイトを作成すると、2つのメリットがあります。
- プログラミング言語を学べる
- プログラミング言語のスキルをアピールできる
ひとつは、プログラミング言語を学べる点です。
Webデザイナーは、HTMLやCSSのようなコーディングスキルや画像の編集・イラスト作成をするグラフィックデザインスキルが求められます。
ポートフォリオサイトを自作することで、コーディングスキルを習得できます。
ふたつめは、プログラミング言語のスキルをアピールできる点です。
デザイン性の高いWebサイトを作成できれば、それがポートフォリオになります。
実績がないときは、ポートフォリオサイトの出来をアピールポイントにするのもいいでしょう。
実績をポートフォリオサイトに載せる際の注意点3つ
実績をポートフォリオサイトに載せる際に気をつける点が3つあります。
ぜひ、参考にしてください。
クライアントに確認する
納品物を実績としてポートフォリオサイトに載せる際は、クライアントに確認しましょう。
案件によっては納品物の著作権はクライアントに帰属しているため、ポートフォリオサイトに掲載できない可能性があります。
未経験の頃は、実績になる案件を選ぶのがおすすめです。
クライアントが知りたい情報を載せる
実績をポートフォリオサイトに載せる際は、クライアントの知りたい情報を優先しましょう。
具体的におすすめの情報は以下のとおりです。
- 使用したスキル
- 制作した経緯
- 作成期間
とくに制作した経緯は、クライアントに説明する機会が多いので詳しく記載しましょう。
ポートフォリオを添削してもらう
ポートフォリオを添削してもらうのもひとつの手段です。
ポートフォリオの添削は『ココナラ』で依頼するのがおすすめです。
Webデザインの添削依頼を受けることで、プロの目線で自身では気づかない点を伝えてもらえます。
添削サービスを利用するのもおすすめです。
『PORTFOLIO SENSEI』と呼ばれるサービスでは、プロのクリエイターからあなたのポートフォリオの良い点とそうではない点の指導をしてもらえます。
クライアントに提出する前に1度添削を受けて実績とするポートフォリオに磨きをかけましょう。
ポートフォリオを作り始める前の工程などの詳細は下記の内容をチェックしてみてください！
Webデザイナーがポートフォリオで参考にできるサイト
参考になるおしゃれなWebデサントで作られたポートフォリオサイトをご紹介します。
- S5 Studios：田渕将吾さん
- 佐藤 タカアキ：Webデザイナー兼カメラマンの佐藤タカアキさん
- KATOSHUN.com：Webデザイナー加藤俊司さん
一つ一つリンクを貼っておくので、ぜひチェックしてみてください。
S5 Studios
Webデザイン、空間デザインなど、多方面で活躍している田渕将吾さんのポートフォリオです。
こちらのポートフォリオは画面全体がアニメーションになっているため、スクロールするたびに動きがあり、見ているだけでもわくわくしますよ！
TAKAAKI SATO
Webデザイナー兼カメラマンとして活躍している佐藤タカアキさんのポートフォリオです。
シンプルながら、一つ一つの目を引くデザインが魅力的なサイトです。
KATOSHUN.com
Webデザイナーとして活動している加藤俊司さんのポートフォリオです。
一見とてもシンプルな画面に見えますが、メニューバーからリンクに飛ぶことで一気に知りたい情報がピックアップされて映し出されます。
これらはプロのWebデザイナーさんの作品例です。目標として参考にするために見てみると勉強になるでしょう。
Webデザイナーの実績作りは仕事を獲得するために重要！
Webデザイナーにとって実績作りは、仕事を獲得するための第一歩です。
はじめは提案文が通らないことがありますが、小さな案件からステップアップしていけば、大きな実績が得られるでしょう。
Webデザイナーを目指す方は、ぜひ挑戦してください。
この記事のまとめ
- Webデザイナーに実績は重要
- ポートフォリオサイトにはクライアントの知りたい情報を載せる
- ポートフォリオを添削することでグレードアップする
- ポートフォリオを作る時にはWebデザイナーのサイトを参考にする
