ポートフォリオサイトを作ろう！

INDEX

0. はじめに

a. なぜ今ポートフォリオの話をするのか？

これからWebデザイナーとしてのスキルを学ぶにあたり、重要なことをお伝えします。それはポートフォリオの重要性です。

なぜなら、この教材で学ぶすべての知識やスキルは、最終的に「質の高いポートフォリオを制作し、案件を獲得する」というゴールに繋がっているからです。

Webデザイナーの世界では、「何を作れるのか」が問われます。ポートフォリオは、その問いに対する唯一かつ最強の答えとなります。

b. ポートフォリオとは？単なる作品集ではない！

ポートフォリオとは、自身のスキル、実績、デザインへの考え方などをまとめた「作品集」のことです。しかし、単なる作品集だと捉えてはいけません。

クライアント（案件発注者）や採用担当者は、ポートフォリオを通じてあなたの力量を判断します。つまり、ポートフォリオはあなた自身に関する営業ツールなのです。

優れたポートフォリオは、以下の3つの役割を同時に果たします。

スキルと実力の証明：どんなツールが使え、どのようなデザインができるのかを具体的に示します。
未来のクライアントへの提案：自分が提供できる価値や、一緒に仕事をするメリットを伝えます。
あなたの人柄や熱意を伝えるメディア：デザインの意図や工夫した点を伝えることで、仕事への姿勢や人柄を示します。

重要：ポートフォリオの3つの顔

ポートフォリオは、あなたが何を作れるかを示すだけのものではありません。
以下の3つの側面を持っていることを常に意識しましょう。
- スキル証明：制作物を通して、自身の技術レベルを客観的に証明する。
- 営業ツール：クライアントに「この人に仕事を頼みたい」と思わせるためのプレゼンテーション資料。
- 自己表現：デザインへの情熱や考え方、人柄までを伝えるコミュニケーションツール。

c. ポートフォリオがなければ何も始まらない

もしポートフォリオがなかったら、どうなるでしょうか？結論から言うと、Webデザイナーとして仕事を得ることは極めて困難になります。

例えば、あなたがレストランを探している時、メニューや料理の写真が一切ないお店に入りたいと思うでしょうか？おそらく、ほとんどの人が避けるはずです。ポートフォリオがない状態は、まさにこれと同じです。

注意

ポートフォリオがないと、そもそも案件獲得の選考の土俵に上がることすらできません。
「スキルはあります」と口で言うだけでは、何の証明にもなりません。
制作実績こそが、Webデザイナーにとっての信頼の証です。

この教材を通じて、クライアントから「ぜひあなたにお願いしたい」と言われるような、魅力的なポートフォリオを一緒に作っていきましょう。

1. サイトのデザインイメージを考える

a. サイトデザインは0→1じゃない？

「デザインは、センスがないとできなさそう…」そう思っている方が多くいます。実は、デザインに自信のない人でもあることを意識すれば、それなりのデザインを作成することができるんです。

b. まずはサイトデザインは徹底的に調べるところから！

イケてるWebデザインで作られたポートフォリオサイト20選まとめ | マイナビクリエイター

イケてるWebデザインで作られたポートフォリオサイトを20選にまとめました。ポートフォリオサイトは、転職において、それ自体のWebデザインも評価の対象となります。決して手を抜かず、魅力的なデザインと構成にすることが大切です。参考にしたい魅力的なポートフォリオサイトと併せて、アピール力を増すために押さえておきたい6つのポイントについても確認しておきましょう。

おしゃれなWebデザインのポートフォリオサイト36選。現役デザイナーが厳選！ - Workship MAGAZINE(ワークシップマガジン)

転職活動のためにポートフォリオサイトを作りたい。そのために、有名なWebデザイナーのポートフォリオをたくさん見て勉強したい！という人へ。現役デザイナーおすすめのおしゃれなポートフォリオサイトを35個集めました。Webデザイナーの作品だけでなく、フォトグラファーやエンジニアのものまで網羅しています。ポートフォリオサイトを作るときの参考にしてください。

良いデザインアイデアを出すためには「良いサイトデザインをたくさん見る」というインプットが実は大切です。WEBデザインを無から作り出す必要はありません。ある程度良さそうなWEBサイトを見つけてそれを少し真似たり、複数のサイトのデザインを組み合わせたりしてデザインを考えるのがおすすめです。

上記のサイトには様々なフリーランスの方のポートフォリオサイトが載っています。

一流フリーランスのポートフォリオサイト、同業他社のサイト分析、他業種のイメージに近いサイトの分析などを行うことで新たなインスピレーションが生まれることがよくあります。

2. サイトのターゲット（見て欲しい相手）と目的を明確にする

サイトは常に読者のためにあります。自己満足で書きたいことを書いても意味はありません。

ターゲットを想定し、その相手にどういう行動を起こして欲しいのかを念頭においてサイトを作っていきましょう。

「誰に」「何を」「どう」伝えるのか。それを常に考えて一貫性のあるポートフォリオを作成しましょう。

a. ターゲットを変えるだけで大成功も！

「マーケティングマジック」は実在するか!? 売り方を変えてヒットした商品まとめ｜ferret

マーケティングマジックとは、商品の質自体はそのままで売り方・見せ方を変えるだけで大ヒット商品に変わることを指します。本記事では実際に、マーケティングマジックを起こした商品とその理由を解説します。他社事例を参考に、自社商品のマーケティングのヒントにしてみましょう。

ポートフォリオではないですが、ターゲットを変えただけで売上が爆増した商品をまとめたサイトを掲載しておきます。この記事を読んでいただければ、ターゲットを想定してポートフォリオを作成する重要性が分かるかと思います。

b. ターゲットと目的を明確にしてみる

今回だと、ターゲットは誰になるでしょうか？

例えば、案件を発注する相手を選ぶ依頼主や周囲で発注してもらえる可能性のある友人や知人がターゲットになります。

その相手がどのような情報を求めていて、サイトを見た結果どんな行動を起こしてほしいのか。それらを事前に考え尽くすことが大切です。

3. サイトに載せたい情報をリストアップする

ポートフォリオサイトの場合は以下のような情報を掲載することが多いですが、ここは皆さんご自身で検討して決めましょう！

独自性を出していくことは大切です。

※まずは自分で考えてみてから、以下の内容を確認しましょう

オーソドックスな内容例

プロフィール
- 経歴
- 使えるスキル一覧
ポートフォリオ一覧
各作品の説明
- 工夫したポイント
- 使用した技術など
問い合わせフォーム

4. サイトマップを作成する

a. サイトマップとは?

サイトマップとは、サイト全体のページ構成を地図のように一覧で表示したページのことです。サイトマップは、ユーザーや検索エンジンにサイト内容をわかりやすく伝える役割を担っています。サイトマップを用意しておくことで、ユーザーが目的のページを見つけやすくなります。

b. サイトマップ集

以下に、サイトマップがたくさん載っているサイトを掲載します。

見やすくて使いやすいサイトマップページのデザイン例をご紹介【2024年6月最新版】 | Web幹事

訪問ユーザーに情報を分かりやすく提示するために欠かせないHTMLサイトマップ。きちんと制作することでホームページの利便性がグンとアップします。この記事ではHTMLサイトマップを効果的に活用するためのデザインパターンを紹介いたします。これからホームページを制作する担当者必見の記事です。

c. サイトマップを作ろう

サイト全体でどのようなページを作成するか決める必要があります。これはFigmaやPowerPointなど好きなツールを使って簡単に作成してください。以下はXDで作成した架空のコーポレートサイトのサイトマップの例です。四角が１ページに相当しています。これよりは数が少なくなると思いますが、試しに作ってみましょう。

サイトマップが完成しましたら、下記のテンプレートを参考に、Slackの「 c-【受講ID】-【お名前】」のチャンネルでコーチをメンションし、制作課題を共有してください。

コーチにSlackで共有する際のテンプレート

〇〇コーチ (@メンション)

お世話になっております。
サイトマップの制作が終了しました。
以下のファイルがサイトマップとなっておりますのでご確認いただき、添削をよろしくお願いいたします。

※ ここにファイルを添付

デザインに限らず、調べることによってイメージが湧くことが実感できたのではないでしょうか？これからはロードマップに記載されていないことも自主的に積極的に調べていきましょう！

5. ワイヤーフレームを作成する

a. ワイヤーフレームとは？

WEBページのレイアウトを定める設計図のことです。

WEBサイトの制作現場で聞かない日がないといえるほど、重要な用語であり、サイト制作において決して欠かせない要素です。

些細なことですが、聞き覚えのない用語が出てきたときに都度調べていくことも大切です。

b. ワイヤーフレームを作ろう

ワイヤーフレームの目的は、情報設計、レイアウトを決める、案件の最初に完成図を簡単に作ってクライアントと認識をすり合わせるといったものがあります。

デザインに必要以上に凝りすぎないようにしましょう。

線と文字で情報の配置がわかれば十分です。例えば先程のサイトマップに沿ってTOPページの簡単なワイヤーフレームを作ると以下のようになります。

参考になりそうなものを調べながら実際に作成してみましょう！

6. デザインカンプ作成

a. デザインカンプとは？

デザインカンプとは完成版のデザインのことです。

レスポンシブデザイン対応は必須となるので、タブレット、スマホ版も作成しましょう。

b. デザインカンプを作ろう

デザインカンプを作る際は、Figmaを使うと良いでしょう。

Figma -完成編- で学んだ内容を全て生かして作業にあたりましょう！

7. 実装

a. WIXで実際の機能・デザインを作成

WIX -実践編- で学習した内容を活かして、Figmaで作成したデザインカンプ・必要な機能を実装しましょう！

技術的にわからないことがある場合には、試行錯誤の心得や質問の心得を思い出して、効率的な学習ができるよう「アウトプットしながら学ぶ」を実践してください！

b. 動作確認・テストを行う

テストでは以下の内容を確認すると良いでしょう。また、それ以外にも実際に自分が顧客目線に立ち、疑問点が生じないかを考えることは非常に大切です。

スマホ、タブレット、PC各サイズにおいてデザインの崩れはないか？
マージンに一貫性があるか？
配色に一貫性があるか？色を多用しすぎて見づらくなっていないか？
フォントやサイズに一貫性があるか？バラバラで見づらくないか？
誤字脱字はないか？
各リンクやボタンは正常に動作しているか？
問い合わせは送れるか？

c. 一般公開する

独自ドメインを接続して公開しましょう！

公開の仕方が分からない場合は、まずご自身で調べてみて、どうしても解決しないときはコーチに相談してみましょう。

注意点

独自ドメインを接続してサイトを公開する場合はWIXのアップグレードが必要となり月額料金が発生します。
しばらく案件獲得をする予定のない方は、一旦アップグレードせずに、案件獲得フェーズに入った際に独自ドメインを接続してサイトを公開しましょう。