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

ポートフォリオサイトの作り方

ポートフォリオサイトの作り方を紹介します。

ポートフォリオを作る際に、Webサイト版と紙版のどちらを作ればいいか迷うと思います。
Webデザイナーなら、とりあえずWebサイト版があれば大丈夫です。僕自身で経験済みなのと転職エージェントの担当者にも確認済みです。

もし、紙版のポートフォリオの制作方法は『最強ポートフォリオの簡単な作り方』の記事を参考にしてみてください。デザインに特化したWebデザイナーになりたいなら、イラレで紙版のポートフォリオも一緒に作ってみることをオススメします。

ポートフォリオサイトの構成

本サイトの「ポートフォリオHTMLテンプレート(ベーシック)」を見ながら、必要なコンテンツを確認しておきましょう。
実際のデモはこちらで見れます。

このテンプレートのように、一般的にはこんなコンテンツになります。

  • Works(作品リスト)
  • Feature(一作品の解説)
  • About(自己紹介)
  • Skill(保有スキル)
  • Contact(連絡方法)

コンテンツの順番も上からこの流れでOKです。ポートフォリオは作品を見せることが最重要なので、WorksとFeatureを一番先頭に持ってきています。Aboutを一番先頭にして、まずは自己紹介から入るのも良いです。

各コンテンツについて解説します。

Works(作品リスト)

サイトデザインならファーストビューのキャプチャを掲載します。バナーならそのまま掲載しましょう。
最低限3〜6作品は掲載しましょう。

「そんなに作品無いよ〜!」という方は『ポートフォリオ作品水増し講座【無料PSD付き】』の記事を読んでみてください!ファーストビューのみのデザインを量産してみましょう。作品量産用のコーポレートサイトやゲーム系サイト、美容院サイトなどのPSDテンプレートを無料で提供しています。

Feature(一作品の解説)

デザインは、明確な意図を持って制作されたかどうかが問われます。
ターゲットユーザー・配色の理由・フォントの選定・コンテンツの存在根拠・メインビジュアル画像の選定理由など、一つの作品については詳しく解説を書きます。この作品についてはがっつりコーディングもしましょう。
しっかり考えてデザインをしていることをアピールしましょう。

About(自己紹介)

現場のデザイナーやエンジニアの方履歴書や職務経歴書を詳しく見るとはかぎらないので、ポートフォリオにも簡単な職務経歴を含めた自己紹介を掲載する必要があります。詳しい書き方は『ポートフォリオの自己紹介の書き方』を参考にしてください。

Skill(保有スキル)

Webデザイナーなら、HTML・CSS・JavaScript・WordPress・Photoshop・Illustrator・XDあたりの保有スキルを書きましょう。
テンプレートでは★でレベルを表していますが、円グラフや棒グラフでもわかりやすければ、表現方法はなんでも良いです。

Contact(連絡方法)

TwitterやFacebook、InstagramなどのSNSをやっているかどうかで、Web系の情報に敏感かどうかがわかります。可能ならアカウントへのリンクを貼っておきましょう。

ポートフォリオサイトは自分で作ろう

現在、ポートフォリオ作成サービスは多いです。作品画像さえアップロードすれば、ポートフォリオサイトがほぼ自動で完成してしまいます。
このようなポートフォリオ作成サービスは使ってはいけません。ポートフォリオサイトは必ず自分でデザインしコーディングをします。

その理由は、ポートフォリオサイト自体が作品の一つだからです。“作品ギャラリーサイト”としてのデザインも問われるし、現場の方はそのサイトのソースコードも見てレベルを判定できます。
また、僕が面接官なら、作成サービスを使う人はやる気がないとみなします。せっかくデザイン&コーディングをするチャンスなのに、外部サービスを利用してラクをしようなんてちょっと考えが甘いです。

ただ、現実は、勉強や作品制作に時間を取られて、ポートフォリオサイトの制作にまで手が回らないかもしれません。
その際は、本サイトの「ポートフォリオHTMLテンプレート(ベーシック)」を使ってみてください。このテンプレートをがっつりカスタマイズして、自分のオリジナルポートフォリオサイトを作ってみてください♪

無料サーバーはダメゼッタイ!

たまに無料のレンタルサーバーにポートフォリオサイトを載せてる人がいますが、ぜったいにやめてください笑
ポートフォリオは名刺のように自分そのものを表すものです。そんなに大事なものを無料のレンタルサーバーに乗せるとか、ちょっと考えられないです。。面接官が見たら、やる気がないと思われます。月額100円程度でサーバーは借りられますので、お金の心配はしなくていいです。

必ず、有料のレンタルサーバー x 独自ドメインの組み合わせにしましょう。
とりあえず安く借りたい!ならロリポップ!さくら大丈夫です。月額100円ちょっとで借りられます。
独自ドメインは、ロリポップなら同系列の『ムームードメイン』で簡単に連携できます。.comなら、価格はよく変動していますが、年間800〜2,000円程度です。まずは、ロリポとムームードメインの組み合わせがラクでいいかもしれません。

今後そのサーバーを長期で使っていくつもりなら、エックスサーバーもアリです。かなり安定したサーバーで、ブロガーやアフィリエイターにも人気のサーバーです。

サーバーの詳しい選び方は、『Webデザイナーのためのレンタルサーバー選び』の記事を参考にしてください。

ポートフォリオサイトの制作、楽しく頑張っていきましょー!

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

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。

『ワークポート』公式サイトへ
コラム②:Webデザイナーを強くオススメする理由

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

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

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

30歳以上の方は、TECH::EXPERT がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

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

“ポートフォリオサイトの作り方” への3件のフィードバック

  1. 北新宿の虎 より:

    ねこポンさん初めまして。北新宿の虎です。

    私は今年まで別業種に就いておりましたが ねこポンさんのサイトを拝見し、
    離職者訓練のwebデザイナーコースに入り勉強しています。

    現在 終業が近づき、就職活動を始める時期になって参りました。
    webサイト制作会社で正社員のwebデザイナーになろうと求人を探しています。

    まだ芳しい結果が得られておらず、是非ねこポンさんにサイトをご覧頂きたいと思い、
    コメントさせて頂きました。お忙しい中恐縮ですが、ダメ出しを頂けましたら幸いです。

    よろしくお願いします!

    • ねこポン より:

      北新宿の虎さん、はじめまして。
      このサイトがきっかけでWebデザイナーを目指してくれて嬉しいです!

      サイト拝見しました。
      箇条書きでフィードバックしていきますが、あくまで一Webデザイナーの意見として参考にしてください。

      東京であれば、今のレベルでもどこかしらの制作会社でアシスタント的なポジションで入れるとは思います。ただ、もっとポートフォリオサイト自体と掲載作品をブラッシュアップすることで、自分が行きたい企業や、より成長できる職場を目指せると思います。

      【ポートフォリオサイト】
      ・サイト名「Kodai Ueshima Portfolio」をもっと大きく
       一番重要な要素なのでもう少し目立つよう大きくしてください
      ・WorksやAboutなどの見出しの修正
       上下の線だけでは少し貧弱に見えます
      ・上記、タイトルと見出しの文字間隔を少し空けて余裕を持たせてください
      ・Aboutの文章の行間(line-height)をもう少し空けて余裕を持たせてください
      ・レスポンシブでの表示崩れを修正してください
       例えば横幅800pxくらいでサイト名が見出しに掛かったり、ジムサイトの矢印位置がズレています
      ・メインで見せる作品を一つ選びましょう
       このサイトでポートフォリオテンプレートを提供していますが、そこで「Feature」という枠を設けて、ひとつの作品を詳しく紹介しています。ここでもfeature枠を作り、ジムサイトか静風サイトを大きく目立たせて紹介してください。今は9つの作品があり、どれをメインに紹介したいかがわからなく目が散ります。キラー作品を一つ決めて、作り込みましょう。たくさんのサイトを紹介する必要はありません。1〜2個のサイトをしっかりと作り込むほうが重要です。
      参考:
      https://webdesigner-go.com/template/portfolio/
      ・差し色(アクセントカラー)を追加しましょう
       現在の配色は白と黒だけで寂しいです。何か差し色を決めて、見出しや背景色に使っていきましょう。

      【ジムサイト】
      ・もっと背景(色やテクスチャ)や配色にこだわりましょう
       白と黒だけの配色だと寂しいです。実際のパーソナルジムサイトを見ると、背景色や背景テクスチャ、背景画像を効果的に使っています。
      参考サイト:
      https://exercisecoach.co.jp/
      ・テキストの行間(line-height)を広げ、余裕をもたせましょう
      ・フォントの選定
       M Plusフォントはあまり現場では使わないので、無難にヒラギノか游ゴシック、欧文はHelveticaを使いましょう
      ・レスポンシブでの表示崩れを修正してください
       例えば横幅800pxくらいでグロナビがメインビジュアルの下に隠れてしまっています

      【静風】
      うちの素材サイトの筆文字を使っていただき、ありがとうございます笑

      ・シンプルで美しくはありますが、もっと作り込みましょう
       アクセントカラーを使用したり、背景画像を用いたり、あともっと要素を足さないと一見して何のサイトなのかがわかりづらいです。

      【全体】
      僕なら、ジムサイトと静風サイトをがっつりと作り込み、その2つをキラーサイトとし、ポートフォリオサイトで大きく紹介します。他のLPやピザサイト、jQuery実習、企業ロゴ制作は、より小さくして目立たないように紹介します。

      よしもとや水商売の経験など、人柄がとても面白そうな方ですね!まだお若いので、こういった特長的な経歴が、会社によってはウケることがあります。そこもかなりアピールポイントです。僕は求職者支援訓練で勉強していた時に、自分専用の出会い系サイトを作ってポートフォリオに載せていました。
      ★恋人探し.com
      http://findlove.chu.jp/
      面接でその後上司となる人に面白いと思ってもらえてWeb制作会社に入れました。
      個性の出し過ぎはキモくなるので注意が必要ですが笑、自分らしさをさり気なく出すことで、自分の人柄を効果的に伝えられます。また、良くも悪くもポートフォリオで個性を出すことで、こんな変なサイトも受け入れてくれるなら優しい会社なんだなぁといった具合に、会社のフィルタリングにもなります。僕の場合はあまり堅苦しい会社は嫌でしたので。なので、ポートフォリオ自体に少しだけ個性を出したり、あるいは面白い掲載作品を用意してみるのもアリだと思います。

      ポートフォリオサイトの添削は箇条書きとはいえ、やや時間が掛かってしまうため、あと一回無償で対応します。もし添削が必要な場合は上記を修正した上で、またいつでもご連絡ください。転職活動、楽しく頑張ってください!

  2. 北新宿の虎 より:

    ねこポンさん

    お返事ありがとうございます。
    構成から細かい部分までアドバイスを頂けて嬉しいです。

    時間はかかりそうですが、もう一度見て頂けるように
    少しずつ改善していこうと思います。
    本当にありがとうございます!

Webデザインのご質問やサイトの感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。* が付いている欄は必須項目です。

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

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

    ★ 僕の20代まるごと黒歴史ストーリー

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

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

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

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

    一番上へ