転職活動を始める前にポートフォリオを作成しないと！
でも、どういうものを作ったら選考を通過するのかな……？
実際に転職活動していたポートフォリオを実例に
ポイントを解説していくよ！
こんにちは！システムエンジニアからWebデザイナーへ未経験転職したうめにこです。
Webデザイナーへ転職するには、『ポートフォリオ』が必須になります。
私も転職活動する前に作成しましたが、色々な方のポートフォリオを探して参考にしていました。同じ境遇にある方の少しでも参考になればと思い、実際に使用していたポートフォリオを使ってポイントを解説していきます！
使用していたポートフォリオはコチラです↓↓↓
ポートフォリオとは？
ポートフォリオは、自分のデザイン実績を載せる作品集です。
「自分はこんな作品作れます！」「こんなスキルがあります！」と面接官にアピールするためのサイトです。
そもそも未経験だから載せる作品がないよ……
まだ、デザイン実績がない方は、作ることから始めましょう。自分で考えて作る仮想サイト、もしくはクライアントワーク※を通して実績を作りましょう。
※クライアントワーク…知り合いのサイトや、クラウドワークスなどお客様がいる制作
自分で設定を考えて作るのが難しい方は、スクールに通うこともおすすめです！
ポートフォリオ作成の流れ
私は、ポートフォリオは1ヶ月程で作成しました。
１．自己分析を行う
２．デザインを考える
３．コーディング
４．サーバーへアップ
詳しく順番に解説します。
１．自己分析を行う
ポートフォリオを作るにあたり、自分がどういったことをアピールできるのか、いわば『強み』を洗い出します。
どんな情報を載せるか、配色やフォントなどデザインするときのベースとなります。例えば、私の自己分析結果からポートフォリオの構成要素へ変換した流れは以下の通りです。
配色
「笑顔人と接する明るい性格」「継続した努力ができる真面目なところ」
→配色「黄色」「グレー」
サイトの方向性
「自主的に考え行動する力」
→動きのあるサイトに。実績もなるべく多く載せる。
「初対面の人に大人しく見られやすいので、自分をよく知ってもらいたい」
→笑顔の写真やイラストの配置。好きなものを載せる。
時間短縮のため正式なワイヤーフレームは作成していませんが、自己分析を通して載せたいコンテンツと配置を考え、手書きで簡易的なワイヤーフレームは作っておきました。
ターゲットとして「企業の採用担当者」を設定していたので、忙しい人が見やすい構成を考えました。
２．デザインを考える
簡易的な構成が決まったら、次はデザインです。
デザインはなるべく、本物のWebサイトに寄せることをおすすめします。なぜかというと、実績が少ない人は、ポートフォリオも1つの実績としてアピールポイントになります。
ポートフォリオで「この人はWebデザインの基本がわかっているな」と面接官に思わせることができます。
でも、Webサイトらしいポートフォリオってどうやって作ればいいの？
自分の作りたいイメージに近い参考サイトをいくつか見つけてくることが大切です。企業のWebサイトやポートフォリオサイトなど、プロが作ったサイトを参考にしましょう。
実際に作成したコンテンツは以下です。
①制作実績
TOPページに見てもらいたい作品をWebとグラフィックで各3つ抜粋して載せています。多数の応募がある中で、すぐ作品を見てもらえるようにと考慮したからです。
作品の詳細ページには主に以下の説明を載せています。サイトの意図というものは面接時にも聞かれるので、説明できることは大切です。
①制作範囲
②使用ツール
③制作時間
④サイトURL
⑤概要
⑥制作の目的
⑦ターゲット
⑧情報設計（グラフィックはレイアウト）
⑨デザインについて
詳しくはこちらのサイトをご覧ください。
各作品のイメージは、モックアップを使用しています。もし、使用するならば『PC モックアップ フリー』などで検索しましょう。
また、サイトのURLに遷移しなくてもサイトのデザインが見れるように、説明の後に載せています。ページ数の多いものはスライドして見れるようにしています。
②プロフィール
載せているコンテンツは以下の通りです。
①プロフィール
②強み
③スキル
④お気に入り（好きなもの）
②強みについては、前職で培った強み ✕ Webデザイナーに求められる強みを考えて記載することをおすすめします。『上記１.自己分析』の内容を元に考えるとよいでしょう。
③その他
Contactは、メールアドレスのみにしました。お問い合わせは重要ではなかったからです。
SNSとして、note、ツイッターへのリンクをフッターに配置しました。noteは、サイト分析をしていたので、ついでに見てもらえれば……ぐらいの気持ちで載せました。
なにか実績としてアピールできるものがあれば載せることをおすすめします！
３．コーディング
基本的に企業の方に見ていただくものになるので、PCコーディングは必須。念のため、モバイル対応もしておくと安心でしょう。
コーディングは複数のブラウザで確認しておきましょう。Chrome、Safariは必須でPC、モバイル両方確認しておきましょう。
４．サーバーへアップ
コーディングまで完成したら、サーバーへアップしましょう。私は、ロリポップでアップしました。
サーバーへの上げ方は、後日別記事で詳細に説明します。
最後に
ポートフォリオはWebサイトのみ作成しました。20社程応募しましたが、PDFや紙での提示を求められる会社はありませんでした。
もし、個人情報等が気になる場合は、ポートフォリオにIDとパスワードを設定して問題ないです。職務経歴書にポートフォリオのURLとID、パスコードを記載しておきました。
転職活動中にサイトを更新しても問題ないので、作品を作ったら実績として掲載し、更新してOKです。
皆さまのポートフォリオづくりのお力になれれば、幸いです！