Webの最新トピックを配信中!

最強ポートフォリオの簡単な作り方


学校や独学でWebデザインの基礎スキルを習得したら、ポートフォリオを制作します。
制作実績を水増しする秘策も紹介します。

ポートフォリオとは、自分の作品集です。
学校や独学の過程で制作したサイトデザインやコーディングの実績を掲載します。
就職エージェントに共有したり、面接を受ける企業に渡すことになります。

6ヶ月間の求職者支援訓練に通っている場合は、だいたい5ヶ月目にポートフォリオ制作の授業が始まります。

「そうは言っても、学校で作るサイトなんて1つか2つだよ!ぜんぜん実績なんてないよ!」と、心配しなくても大丈夫です。
実績を水増しする方法を後で紹介します。

ポートフォリオ作りなんて簡単です。サクッと作っちゃいましょう。
僕は3日ほどで完成させました。

実際のポートフォリオはこんな感じ

まず、紙版とWebサイト版のどちらのポートフォリオを作ればいいか迷うと思います。

人材紹介会社のサポタントさんに取材で聞くと、「Webサイト版のみでOK」とのことでした。Webサイト版なら企業がポートフォリオ自体のソースコードを見ることもでき、どのような書き方をしているかチェックできるのもWebサイト版の良さの一つです。

ただ、僕の場合は、デザインをやりたい!という意志が強いので、その点で紙のポートフォリオを制作しています。イラレを使って紙の制作物を作れることも一応アピールしたいからです。
コーディングに比重を置いたWebデザイナーになりたい場合や、最終的にフロントエンドエンジニアを目指している方は、ポートフォリオサイトのみでも大丈夫です。

もちろん、紙版のみでも大丈夫です。これは僕自身で実証済みです。結局PDFにしてGoogleドライブに上げたりするのでWeb上で見れますし。掲載するサイトのキャプチャにはリンクは添えてください。デザイン重視のWebデザイナーになりたい!という場合は、紙のポートフォリオを作りましょう。
両方のポートフォリオがあれば理想ですが、Webデザインの勉強で忙しく時間が限られていると思うので、とりあえず、最低限、Webサイト版のポートフォリオだけは制作してください。

ポートフォリオサイトのテンプレートは、本サイトで無料で配布しているので、時間が無い方は、良かったら使ってみてください。
ポートフォリオHTMLテンプレート

今回は、紙のポートフォリオの作り方を紹介します。


こちらが僕の紙版のポートフォリオです。


1ページずつイラレで制作します。各ページを印刷し、一枚ずつクリアファイルに収納して、冊子にしています。

紙のポートフォリオは、この冊子版とPDF版の2つを用意します。PDF版は、レンタルサーバーやGoogleドライブ等にアップロードし、就職エージェントや企業がネット上で見れるようにしておきます。

ポートフォリオの構成

まず、各ページをイラレで制作します。僕のポートフォリオは表紙と裏表紙を合わせて14ページです。

イラレでアートボードをページ数分の14個用意し、1ページずつ作り込んでいきます。

ポートフォリオの構成は、下記のようになっています。

表紙
p2:写真(すごく笑顔)付き自己紹介/保有スキル
p3:企業におけるデザイン制作実績
p4:同上
p5:同上
p6:同上
p7:企業におけるコーディング制作実績
p8:同上
p9:フリーランスの制作実績
p10:同上
p11:架空のサイトデザイン
p12:趣味のサイトや電子書籍制作
p13:趣味のイラスト
p14:裏表紙

僕の場合はWeb業界が3年以上なので、企業における実績も含んでいます。
p2の自己紹介&保有スキルでは、過去の職歴と保有資格、得意分野を短く記載し、職務経歴書の役割も兼ねています。
p12では、電子書籍やイラストも趣味レベルですが掲載しています。

実績を水増ししちゃおう!

「自分は未経験だから掲載することが無い!」と心配しなくても大丈夫です。
上のポートフォリオの構成の赤字の箇所『架空のサイトのデザイン』ついて解説します。

そうです!ファーストビュー(サイトを開いた時に見える箇所)のみのデザインを量産してしまいましょう。

僕の場合、存在しない架空のサイトのデザインをこのように4つほど作り、コメントを加えた上で、ポートフォリオに掲載しています。

右上のサイトは美容院ですが、お客さんは目隠しをしてヘアカットされるという設定です。
……楽しいですよ、こうやって妄想をWebサイトにするというのは。

ファーストビューのみ作ればいいので、1サイト3時間もあれば完成します。
慣れれば30分くらいでシンプルなサイトはできちゃいます。

ファーストビューはサイトの印象を決める最も重要なデザイン箇所です。
はっきり言って、この箇所だけを見れば、デザインの良し悪しがわかります。
企業側もこの部分をうまく作り込める能力が求職者にあるか判定できれば満足するのです。

実績水増し講座『30分で1サイト作っちゃおう』

実際に、今、30分で架空のサイトのデザインを作ってみますね。

「Kujo Park」というアジア人女性が経営する小さなデザイン会社のサイトです。
なんだその名前?って感じですが、適当に思いついたんです。それっぽければいいのです笑。

素材は、無料写真サイトのUnsplashで見つけてきます。


真ん中の、卵から木が生えた意味ありげな画像を使ってみます。
メインビジュアルに使えそうです。

他にも、デザイン会社の経営者の写真がほしいので、「Asian」で検索して、


この画像を見つけました。使えそうです。

あとは、いかにもな感じでレイアウトしていくだけです。

もう背景は卵画像にあわせて単色にしちゃいましょう。
こんな感じ↓

右上にメニューを配置し、写真の横には英語でそれっぽいメッセージを適当に書いて、肩書きは最近よく見る縦書きで配置すれば、

はい!完成!ちょうど30分!

もちろん、ポートフォリオの作品が全部この単色テイストじゃダメですよ。
でも、いくつかある作品の内、一つぐらいこれくらいシンプルなものがあっても良いでしょう。

ぜひ、ファーストビューのデザインを量産してみましょう!
8サイトほど作れれば、もう立派なWebデザイナーです!本当に。

経験者のポートフォリオになってくると、全体の構成やUI/UXが問われることもあるため、ファーストビューだけ見せても「あ、デザインがちょっとできるだけで、構成とかは練れない人なのね」となり不採用になるケースもありますが、未経験のWebデザイナーの場合は、この手法でも許されます。最低限のデザイン力が見えれば、「あ、この人有望かも」と思ってもらえます。デザイン力の蓄積やUIを考える能力はは会社に入った後に働きながら身につけていけばいいのです。

ポートフォリオの中身、他には?

他の水増し(という言い方は良くないですね)方法としては、

  • 自分のサイトやブログのアクセス解析報告
  • 自分が好きなサイトのデザイン分析
  • サイトやバナーの模写と分析

これらが一般的な水増し方法です。Webデザインに対する分析や情熱が見える内容であれば、ぜひポートフォリオに追加してみるといいと思います。素敵なコンテンツになりえます。

紙のポートフォリオの作り方

イラレで各ページを作り込んでいくのですが、背景色が白なら単純にA4サイズのアートボードで制作し、それを印刷すればOKです。

ただ、僕のポートフォリオのように全体に背景色を敷いている場合は、A4より大きめのB4サイズでアートボードを作り、トンボを設定し、印刷後に余分な上下左右をカッターで切り取る必要があります。


上下左右にトンボ(十字などの線)を含めて印刷します。これに沿ってカッターでカットしてA4サイズにします。


印刷すると、どうしても上下左右に白い枠がついてしまうので、背景色がある場合はこうやって裁ち落としをする必要があるのです。
ちなみに僕はキンコーズで印刷&カットの作業をしました。

この作業は面倒なので普通に背景色は白で作ることをオススメします……。
その場合は、サイトデザインに薄い灰色の枠をつける等して、背景色とサイトデザインの境界がはっきりわかるようにしておきましょう。


ふぅ~全部カットし終えました。


クリアファイルに入れて完成です!
ファイルは『hiktas 10P』を使用しています。ページが増えたらファイル部分を補充できるので気に入ってます。

自信を持って、転職エージェントや面接先に持参しましょう。
面接では1ページずつ解説します。14ページくらいのポートフォリオなら、だいたい5分くらいで説明できればOKです。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

“最強ポートフォリオの簡単な作り方” への2件のフィードバック

  1. はる より:

    ねこぽんさん初めまして。
    26歳未経験でwebデザイナーを目指している者です。
    心が折れそうになったときはいつもこちらのサイトを見て、ねこぽんさんの優しい言葉で力を頂いております。ありがとうございます。

    ポートフォリオ用のサイトについて質問なのですが、リキッドレイアウトにすべきでしょうか?
    最近のサイトはどのサイトもファーストビューが画面いっぱいに広がってコンテンツも横幅に応じて可変するデザインを採用しているように思うのですが、リキッドレイアウトは難しそうで自分にできるのかと不安に感じています。
    また、リキッドレイアウトのサイトのデザインカンプを制作する場合、想定する最大限の横幅でデザインカンプを制作したらよいのでしょうか?
    お忙しいところ申し訳ありませんが、ねこぽんさんの意見が頂けましたら幸いです。よろしくお願いします。

    • ねこポン より:

      はるさん、はじめまして。
      このサイトが少しは力になれているようで嬉しいです!

      リキッドレイアウトは%指定やmax-widthなどを使ったりするので少しややこしく感じますが、
      いまはスマホ時代なので、いろんな端末で快適に見られるようにするため、メディアクエリー同様に大事なテクニックかと思っています。
      検証する端末(Chromeのエミュレーターでもいいですが)が多くなって、やや面倒にはなりますが。

      >ポートフォリオ用のサイトについて質問なのですが、リキッドレイアウトにすべきでしょうか?
      そうですね。幅に応じてコンテンツが縮小or拡大しても違和感なく見えるレイアウトが良いと思います。

      「想定する最大幅」については、フルHDだと1980pxになりますが、それでは幅が大きすぎて単純にPhotoshopで作業しづらいので、、
      僕は横幅1600pxくらいでいつもカンプは作っています。

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ