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開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

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

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

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

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

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

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

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

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

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

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

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

    一番上へ