未経験者Webデザインナー向けポートフォリオの作り方から公開まで

Webデザイン

2022年7月31日

未経験者Webデザインナー向けポートフォリオの作り方から公開まで

こんにちは、WebデザイナーのYukiです。

本記事では、Webデザイナー初心者でも、転職や副業で通用するポートフォリオの作り方から公開までを網羅的に解説します。

これから勉強を始める方は ≫ webデザインの勉強は何から始めればいいの？挫折しない独学勉強法 で解説していますので参考にどうぞ。

未経験から独学でWebデザインの勉強をされてきた方はこんな悩みがあるはずです。

例えば下記の通りです。

「転職や副業で通用するポートフォリオを作りたいけど何から始めたらいいのかわからない、、、それに、Webデザイン未経験だから作品がない、どうすればいいの？」

「模写コーディングしたサイトでもいいのかな？」

「なんとかポートフォリオは作れたけど、作ったポートフォリオの公開方法を知りたい」

過去の私も思っていました。
今回はこう言った悩みを持つ方向けに書きました。

私が完全未経験から独学でWebデザイナーとして転職でき、副業でお仕事を受注できたのもポートフォリオがあったからです。

この記事を読むことのメリット
未経験者でも転職や副業でライバルに差を広げるポートフォリオを作ることができます。

では早速、見ていきましょう！

目次

ポートフォリオの必要性について

post_sub6

そもそもポートフォリオとは

ざっくり言うと下記の通りです。

自分の過去作品を集めた「作品集」

例）コーポレートサイト、LP、バナー、写真etc

ポートフォリを作る目的とは

ポートフォリオを作る目的は、

相手に自分のスキル感や実績をアピールするためです。

例えば、転職活動をすると必ず面接がありますよね。

その時、ただ「デザインからコーディングまでできます。」と言っても相手には、どれくらいのクオリティーで、できるのか伝わりません。

逆にポートフォリオを見せながら、
「この作品はデザインからコーディングまで私1人で作りました。」
と伝えるとどうでしょう。

説得力が違いますよね。

採用側の視点からみて、ポートフォリオがあると求めているスキルの人材か判断ができ、採用後のミスマッチを防ぐことができます。

私の経験からポートフォリオがないと書類選考で落とされます。

副業、独立であれば、新しく仕事を受注する際に営業トーク＋ポートフォリオが武器になります。

ポートフォリはWebと紙どっちがいいの？

結論、Webです。

WebデザイナーならWebで作るのが基本です。

    Webで作るメリット

  • 共有しやすい
  • いちいち紙で印刷しなくてもいい
  • URL送るだけで作品をアピールできる
  • 企業もURLを求めている

基本的に応募をする際は、Webを使いますので、PDFかURLを事前に送ることになります。

企業としても紙で郵送されるより、応募書類（履歴書等）とポートフォリオをPDFとURLで、一緒に送ってもらった方が楽ですよね。

未経験者でも通用するポートフォリオの作り方

post_sub5

ポートフォリオ自体の見た目も超重要ですが、さらに重要なのがポートフォリオに入れる作品の質です。

ここでは、ポートフォリに入れる作品を重点的に解説していきます。

ポートフォリに載せるべき内容

下記の通りです。

  • 自己紹介（簡単なプロフィール）
  • 自分のスキル
  • 作品（3つでOK）＋デザインコンセプト【重要】

以上です。

さっそく、見ていきましょう。

自己紹介（簡単なプロフィール）

相手に何者なのか伝える必要があります。
自己紹介で載せるべき内容は下記の通りです。

  • 名前（本名）
  • 生年月日
  • 所在地
  • メールアドレス＋SNSアカウント
  • スキル（HTML/CSS…）
  • 自己PR

以上が最低限必要な項目です。

スキルについては「HTML/CSS/JavaScript…」など単語を並べるだけで、OKです。

後ほど詳しく説明します。

自己PRは、未経験者なら力を入れるべき項目です。
企業に向けて、自身の仕事に対する熱意や成長へのポテンシャルを、どんどんアピールしましょう。

自分のスキル

自己紹介でも書いているのに必要な訳とは

ただ、スキルを並べているだけでは相手に伝わりません。
ここでは自分のスキルをさらに深掘りつつ説明しましょう。

例えば下記の感じです。

例）デザインのスキルがある場合

常にユーザビリティを意識して、デザインをします。
ユーザーが求めていることを理解し、その上でどんな情報を伝える必要があるのかを、意識するように心掛けています。
サイトに訪れた人が迷わず、目的を達成できるようなデザインを提案します。

使えるデザインツールやプログラミング言語を並べ5段階評価をするのもありです。

作品（3つでOK）＋デザインコンセプト

ここが今回一番知りた内容ですよね。
さっそく、みていきましょう。

ポートフォリオに載せる作品は3作品あればOK

ポートフォリオは最低でも、3作品あれば充分です。

採用担当者は基本忙しいです。

さらに多くの応募者のポートフォリオを見る訳ですから、
自分が作った作品を全て見てもらえる可能性はかなり低いと考えていいです。

ならば中途半端の作品を何個も作るより、
質いい作品を3つ作る方がコスパがいいですよね。

質のいい作品とは、実案件に近い作品のことです。
↓詳しく解説します。↓

質のいい作品の作り方・手順

ざっくり下記の流れです。

  • 手順1：クラウドソーシング等で実案件の仕事詳細を見る
  • 手順2：サイトの目的・ペルソナ選定をまとめる
  • 手順3：素材集め（フリー素材）
  • 手順4：ワイヤーフレーム作成
  • 手順5：デザインカンプ作成
  • 手順6：コーディング

具体的に解説していきます。

手順1：クラウドソーシング等で実案件の仕事詳細を見る

例えばこんな感じです。

ブログ写真 案件詳細

（仕事詳細欄に不足箇所があれば自分で足す。）

※必ずフリー画像を使用すること、仕事詳細も自分なりに少しアレンジしてください。

架空サイトを作るより実案件を自分なりにやり、それをポートフォリオの作品にした方が他の未経験者と差別化ができ採用率が上がります。

手順2：サイトの目的・ペルソナ選定をまとめる

上記の案件を見て、サイトの目的や具体的なターゲットをまとめ
デザインコンセプトを考えます。

この段階で考えたデザインコンセプトは作品を説明する上で必要になりますので、必ず文章化しましょう。

手順3：素材集め（フリー素材）

サイトを作る上で写真は必要になりますので、サイトに応じて掲載する写真を選定しましょう。
基本、無料で使えるフリー画像でOKです。

手順4：ワイヤーフレーム作成

ワイヤーフレームとは

Webページのレイアウトを決める設計図

TOPページの構成や下層ページの構成を決める作業です。
「この項目が足りない」など後から苦労しないようにしっかり設計しましょう。

ワイヤーフレームの作成ツールはAdobe XDがおすすめです。

手順5：デザインカンプ作成

ワイヤーフレームが完成したらデザインをしていきます。
この作業では完成形までもってきます。

参考サイトを見つつ、「文字サイズ」「画像の位置」「色合い」など細かいところまで決めていきます。

デザインカンプの作成ツールもAdobe XDがおすすめです。

デザインは真似してOK？

結論、OKです。むしろ真似しましょう。

ベテランデザイナーでもいきなり0→1でデザインを作ることはできません。
ベースとなるデザインが一つあって、必要に応じてそれを自分なりにアレンジしています。

参考デザインを何個かピックアップして「ここ良いなぁ」って思った部分を真似するのです。
参考のデザインはPinterestから探すのがおすすめです。

そのまま真似るのはNGです。

真似しつつ、自分なりにアレンジしましょう。
良いデザインは盗んで、自分で実践してみることが、デザインが上達する1番の近道です。

手順6：コーディング

HTML/CSSはなるべくコピペせず、自分でコードを書きましょう。
わからなければググりつつ、一歩一歩進めていきます。

というわけで、以上です。

3作品はポートフォリオの中でもかなり重要箇所です。

とりあえず、1本渾身の作品を作ってみてください。

けっこう重労働になりますが、1本作れたら後は楽です。

参考ポートフォリオ3選

サブ画像4

未経験者にハイレベルなポートフォリオを求める企業は少ないですが、クオリティの高いサイトを参考にすることで自分の引き出しを増やし良いと思ったデザインを自分のポートフォリオにどんどん入れる事で他と差をつけれます。

ポートフォリオの公開方法

続いて、ローカル環境で作成したポートフォリオを世界中に公開する方法について解説します。

    具体的な解説をすると長くなるので、ざっくり言うと下記の流れです。

  • ① レンタルサーバーの契約
  • ② ドメインの取得
  • ③ SSL設定
  • ④ FTPソフトでデータをアップロード

レンタルサーバーの契約は エックスサーバー をおすすめします。

    理由は下記の通りです。

  • 日本国内で1番利用者数が多いサーバーだから
  • サポートの品質が良いから
  • サーバー関係のエラーが出た時、ググればXサーバーの情報が多い
    なぜなら、シェア率がNO.1だから

ドメインの取得はお名前.com をおすすめします。

    理由は下記の通りです。

  • ドメインの取得料金が国内最安値（取得費用1円）
  • 管理画面が見やすい
  • WordPressと相性がいい

作成したポートフォリオを公開する具体的な方法は改めて記事にします。
誰でも簡単にできるので楽しみにしててください。

最後に

というわけで、以上です。

いかがでしたでしょうか。

ポートフォリオを作る理由からまわりと差をつけれる作品の作り方まで網羅的に解説しました。

ポートフォリオは重要という話をしましたが、サクッと早めに終わらせることを意識してください。
作成するのに時間をかけすぎてはいけません。

ゆっくり時間をかけてやっている人がいますが、目的と手段を間違えています。

転職者は、転職するためにポートフォリオを作ります。
ここで言う「目的」とは転職です。転職をするために「手段」としてポートフォリオを作ります。

あくまでもポートフォリオは手段にすぎないのでちゃっちゃと終わらせましょう。

最後まで読んでいただき誠にありがとうございます。

今後のキャリアプランを相談したい方向け

≫ テックキャンプ（無料カウンセリング）

本記事と一緒に読みたい記事

関連記事

Read Later LINE