webデザイナーの転職に必要な「ポートフォリオ」って何？
未経験者だけど、作れるの？
どうやって作ればいいの？
私は未経験からwebデザイナーになり、現在はフリーランスで活動しています！
webデザイナーへの転職で必須なのが「ポートオリオ」。
条件覧に必ずと言っていいほど「ポートフォリオ提出」と書かれていますよね。
ネットで調べれば現役webデザイナーたちの素晴らしいポートフォリオを見つことができますが、ぶっちゃけ未経験者にそんなクオリティ作るの無理…って愕然としていませんか？
今回は未経験からwebデザイナーになった私が、一番最初に作ったポートフォリオの内容と、会社員時代採用担当として人のポートフォリオを見ていた経験、フリーランスになってポートフォリオを改めて作り直した経験を生かして、webデザイナー未経験の転職で使えるポートフォリオの作り方をご紹介します。
ポートフォリオとは？webデザイナーが作らなきゃいけない理由
ポートフォリオとは自分のスキルをアピールするための、webデザイナーの作品集です。
面接時にはほぼ１００％ポートフォリオの提出を求められます。
採用する側としては、やはりどのぐらいの事ができるのかと言うのは一番重視する点です。どんなに人柄だよくても、どんなにすごい経歴を持っていても、実際働いてみて役に立たなかったら元も子もないので（笑）
ポートフォリオはwebデザイナー未経験でも作れる？
ポートフォリオサイトはもちろん未経験でも作れます！
とはいえ、「未経験なのだから作品なんてない！！」と思いますよね。スクールに通っていれば、在学中に作ったデザインを作品集の中に入れればいいです。
関連記事【厳選】おすすめwebデザインスクール！プロ視点で選んでみた
独学でwebデザイナーの勉強をしているなら、ポートフォリオサイトを作ることを学習のゴールにしましょう。
自己紹介サイトとして作ります。学習過程で、模写したデザインがあればそれも掲載しましょう。
ポートフォリオサイトを作るには、ホームページの構造理解からデザイン、コーディングまで全ての基本的な知識が必要とされます。
そのため、web上にポートフォリオサイトが公開されていること自体が、あなたのスキルをアピールするためのツールになります。
私が採用担当をしていたときに、ポートフォリオサイトを紙に印刷してきてくれる人がいました。
印刷してファイリングすること自体はとても良いのですが、中身がコーディングしたタグでした。
正直、紙にコードを書かれても何も判断できません。コードはweb上にあって初めて正しい見た目になっているか、正しく動いているかがわかるので、コードだけなら紙に印刷してくる必要はありません。
逆に、私が転職活動していたときや、フリーランスのwebデザイナーとして活動するようになってからのポートフォリオは、PDFで提出しています。なぜかというと、私はコーディングを担当することがほとんどないデザイナーだからです。
見た目のビジュアルを作るのが専門なので、コーディングも専門だと誤解されないようにIllustratorでポートフォリオを作り、PDFに出力しています。
このように、自分が何を専門としているのか明らかな場合は、web上にポートフォリオサイトが無くても良い場合もあります。
とはいえ、未経験であればプロ並みのビジュアルデザインをできる人はいないし、採用された際に任されるのはコーディングになるので、web上に公開されたポートフォリオサイトは必須です。
ポートフォリオはwebデザイナーの転職でどう役に立つの？
役に立つというより、ないと転職できない可能性大です。
上記でも言いましたが、ポートフォリオサイトは、採用側があなたのスキルを知るための唯一の方法です。webデザイナーは専門職なので専門的な知識やスキルがないと仕事になりません。
未経験者とはいえ、基礎的な知識がない、自分で学習する意欲のない人を、マイナスから育てるようなボランティアをしてくれる企業はありません。未経験であっても、できる限りのことは自分で学ぶことができるという意欲を見せるためにもポートフォリオの作成は必須です。
関連記事【2021年】Webデザイナーになりたいなら登録すべきおすすめ転職サイト
webデザイナーのポートフォリオの作り方
①サーバー、ドメインを契約する
②WordPressをインストールする
③サイト設計(サイトマップ)
④ワイヤーフレーム
⑤デザイン
⑥コーディング
大雑把にいうとこんな感じですね。
①サーバー、ドメインを契約する
ポートフォリオはインターネット上に作る物なので、インターネット上の住所と家的な役目を果たすサーバーとドメインがまず必要です。
安い物だと、
サーバー：ロリポップ！
ドメイン：ムームードメイン
があります。
ポートフォリオぐらいだったら、上記でも十分なのですが、サポートがあまりないのがデメリットです。
私が使っているのは、
サーバー：エックスサーバー
ドメイン：Xserverドメイン
です。
ちょっと高いのですが、以前勤めていた会社でもエックスサーバーを使っていて、セキュリティもしっかりしているし、サポートも手厚いのでもう5年以上使っています。
サーバーを選ぶときのポイントとして、簡単にWordPressがインストールできることに注目してください。
WordPressについては、このあと詳しく話しますが…
サーバーによっては、WordPressのインストールが面倒で、初心者には荷が重い場合もあります。
上記で紹介した、ロリポップ！やエックスサーバーは、初心者でも簡単にWordPressがインストールできるようになっています。
サーバーを選ぶときには、WordPressの簡単インストールに対応しているかチェックしましょう。
②WordPressをインストールする
WordPressというのは、CMSの一種です。
「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
アメブロなどのブログサービスを使ったことのある人ならわかると思うのですが、ブログを書くには管理画面から任意のIDとパスワードでログインして、記事を書く画面からテキストを打ち込んで、ちょっと目立たせたい文字は太字やマーカーをつけたり…と言ったことが、webの知識がなくても誰でもできますよね？
WordPressは上記のようなことを、自分のサーバーで再現できます。
何より、今はホームページ制作といえばWordPressと言われるぐらい、webデザイナーにとっては１００％関わることになる物なので、ポートフォリオではWordPressを使って作っておいた方が面接でもアピールポイントになります。
WordPress自体は無料で使えます。（サーバーとドメインがないと使えません。）
③サイト設計(サイトマップ)
まずは、ポートフォリオに必要なページを考えます。サイトに必要なページや構造を作ったものをサイトマップと言います。手書きでいいのでノートに書き出しましょう。
必要なページは、ポートフォリオをなんのために作るのかを考えると自ずと分かりますよ。
例えば、転職のためにポートフォリオを作るのであれば、自分のスキルと人柄や経歴がわかるといいですよね。もしかしたらポートフォリオを見て自分に興味を持ってくれる人もいるかもしれないので、お問い合わせがあると親切です。
なので、
・TOPページ
・自己紹介
・経歴
・スキル
・お問い合わせ
が必要だな！と考えられます。
自己紹介と経歴は、長くなりすぎないのであれば1ページにまとめてもいいですね。
すでに制作実績があるなら、「実績」ページを作って、今ままでに作った作品を掲載しましょう。
本採用担当としておすすめなのは、ポートフォリオサイトを作った時の考え方や手順を記載するページを作っておくことです。
「このサイトができるまで」のようなページを作り、ここで紹介している、サイトマップを作ってワイヤーフレームを作ってデザインをして…という工程をそれぞれ写メやキャプチャーにとって、その時にどういうことを考えて、何に気を配り注意したのかなどの考え方を書いておくと「お！この人、未経験だけどちゃんと頭は使えるな！成長が早そう！」と思ってもらえる可能性があります。私だったら思います（笑）
なので、ポートフォリオの制作中には過程をメモったりして記録に残しておきましょう。
④ワイヤーフレーム
次に、サイトマップで作ったそれぞれのページにどういったコンテンツを入れていくか詳細に決めていきます。
TOPページは全ページの要約的なページになるのでその他のページから決めていくのがおすすめ。
例えば、「お問い合わせ」ページの項目は、
・名前
・メールアドレス
・問い合わせ内容
は必要。
さらにそれぞれ、必須項目にする必要があります。
入力項目だけあっても送信できないので、送信ボタンも必要ですね。
コンテンツだけあっても、ユーザーは使いづらいので、ヘッダーやフッターにリンクメニューが必要です。さらに、今どこのページにいるのかユーザーにわかりやす方がいいので、ヘッダーにページ名を書いたり、パンクズリストがあると親切です。
こう言ったことを、ワイヤーフレームでは細かく書き出していきます。
ワイヤーフレームは手書きでもいいですし、デザインソフトを使って作ってもいいです。
私の場合は、そのままデザインに移行できるようにAdobe XDを使って作ることがほとんどです。
⑤デザイン
ワイヤフレームを元にデザインをしていきます。
デザインをする前に必ずして欲しいのが、参考サイトを探すことです。どんなサイトにしたいのか、色彩や装飾などのイメージを自分の中で固めておいた方がいざ手を動かしたときに迷わず作業できます。
私は現在フリーランスとして活動していますが、今でもデザインを作るときは必ず参考サイトを探します。参考サイト探しのために、最低でも20サイトぐらいは見るようにして、その中から5サイトぐらいを参考にしながらデザインを作ります。
参考サイトは、
・Pinterest
・縦長
などを使っています。
⑥コーディング
最後に、デザインを元にコーディングをしていきます。
コーディングの際には、０からオリジナルテーマを作ってもいいのですが、時間がかかるしかなり面倒なので、既存のテーマで自分のデザインに近いものを見つけて必要な部分を書き換えるのがおすすめです。
そのほうが時間も短縮できるし、エラーも起こりづらいです。
まとめ：ポートフォリオはwebデザイナーとして働くための準備
ポートフォリオ制作の過程を経験すると、どういうふうにホームページが作られるのかが理解できるようになります。
規模は違いますが、擬似webデザイナー体験ができたってことですね。
ポートフォリオは転職時に自分のスキルや人間性をアピールするための必須アイテムでもありますが、ポートフォリオを作る過程でwebデザイナーとして働くための準備をする機会にもなります。
初めてのことはわからないことばかりで大変ですが、ポートフォリオを作ることで自分の自信にもなるし、逆にもっと勉強が必要なスキルも浮き彫りにすることができる、重要な経験です。
何事も自分で実践してみないとわからないものですからね！
ポートフォリオのアドバイスがもらえる！転職サイトを活用しよう
webデザイナーに転職するなら、転職エージェントを活用しましょう！
転職エージェントは、面接対策や履歴書チェックだけではなく、ポートフォリオのアドバイスまで無料でしてくれるのでめちゃくちゃ役に立ちます。使わないてはありませんよ！！
