ポケットラボ

今回はwebポートフォリオのことについてまとめてみました。就職時、独立時、一旦作品整理したい時などにポートフォリオを作りますよね。色んなwebポートフォリオサイトを見ていて、どういうものが必要かなど、どんな物がいいのかなどまとめてみました。

webポートフォリオってなに？

過去に新卒webデザイナーで採用してもらえるような紙ポートフォリオの作り方と、紙のポートフォリオのことに書きましたが、今回はwebポートフォリオについて。
webポートフォリオは簡単に言ってしまうと、webサイトで作る「作品集」です。
今までにどんな物を作ってきたかなど、時にはお客さん、時には面接官、などに自分のスキルやプロフィールなどを評価してもらえるものです。

webポートフォリオに必要なコンテンツ

国内外合わせて色んな方のポートフォリオをみると、多少違いはありましたがこのコンテンツは共通しているかなというところをまとめてみました。
必須コンテンツではところもありますが、どんなコンテンツを入れたらいいか迷っている方に参考になればと思います。

プロフィール

まずは、自分を知ってもらうために、自分のスキルや、自己紹介などを入れたいですね。
経歴、受賞歴、趣味、好きなこと、嫌いなこと、など一般的な自己紹介から
webデザイナーならPhotoshopやIiiustlatorのレベルなど自分のスキル的なところ、自分をもっと知ってもらうためにSNS(Facebook,twitter)など載せてみるのもありますね。

Web Creator Mana

「Webクリエイターボックス」の運営者のmanaさんのポートフォリオ。
自分の写真を使い、自分のスキルをソフトと星のアイコンを用いて表しています。わかりやすい！

Alex Pierce about

コチラも写真を使っていますが、マスクしてます。スキルの一覧もあります。

we6design.com

こういうのも面白いなーと思います！

制作実績

まず一番力を入れたいコンテンツですね！
どのポートフォリオも制作実績は必ずと言っていいほどありますね。

でもただ「こんなサイト作りましたよー」と言ってスクーンショットを載せているだけではあまり評価ができないのではないでしょうか。なので下記の項目も入れることによってそれらしくなると思います。

サイト全体のスクリーンショット

ぱっと見でどのようなサイトがわかるのでスクーンショットは必須ですね。
トップページ、そして下層ページまで用意してあったらいい親切です。

サイトのURL

スクリーンショットでは伝わりずらいところなら、実際に動くサイトで見てみたいと思います。
そのため、現在も公開しているのか、もう公開は終わっているのかも重要ですね。
終わっている場合は、不要ですね。

使用したソフト

Webの制作会社だとPhotshopなどは必須スキルになってくるかと思います。そのためデザインだったらPhotoshop,Iiiustrator、Fireworksや、コーディングならDreamwever等などの使用歴やどの程度ソフトが使えているかアピールできるポイントですね！

使用スキル

HTML5/CSS3だったり、プログラミングなら言語名、CMSだったらwordpressやmovabletypeなどどの程度の理解度などがわかるようなっていればわかりやすいかと思います。

制作期間

制作期間は制作する際にかかった時間などを書いておくと◎
結構、製作時間って重要みたいですよ！

担当箇所

デザインなのか、コーディングなのか、プログラミングなのか、企画なのか、すべてなのか等。

制作する際のポイント

制作する際のポイントなど、見る側の人は結構気になります。
全体的な配色や、動き方、UI/UXだったり、制作したWebサイトのターゲットユーザーとかなど、自分なりにポイントをまとめて書いておくといいですね。

コンセプト

Webサイトを作る際に一番気にしなくてはならないところですね。

コメント

制作した際のポイントや、コンセプトと少しかぶってしまうかもしれませんが、
ちょっと一言ぐらいコメントがあるといいかもしれませんね。

素敵なポートフォリオの例

レモンエコパワー株式会社

トップページ、下層ページのスクリーンショットを３枚使い、説明を付けてあります。

Oliver James Gosling Freelance Web Developer

使用スキル、環境をアイコンを並べています。わかりやすい！

Webポートフォリオのあったらいいかもしれないコンテンツ

ブログ

ポートフォリオと同時にブログをやっているところが多かったです。
ブログの内容は、技術的なことや普通の日記など多種多様でした。
ブログは、技術的なことを書いていれば知識もついてきますし、日常的な日記を書いていれば面接する側からするとどのような人なのか見ることができるのかなーと思いました。
でもただコンテンツの１つとして作ってみたはいいものの全然更新していなければあまり意味ないかなと思います。

SNS

色んな方のポートフォリオも見てみますと、SNSのアイコンが置いてあるところがほとんどでした。
Facebook、twitterを使った就活などがありました。

Facebookが就活に勝つ！？Facebook人事はかなり当てにならない – *ホームページを作る人のネタ帳

コンタクトフォーム

就活の際のポートフォリオサイトなら面接等の連絡等は電話やメールなどでくるのであまりコンタクトフォームを使われないかもしれませんが、フリーでやっている方なら仕事の依頼などがくる場合もあるんじゃないでしょうか！
仕事の依頼以外に、「素敵ですね！」「かっこいいですね！」「可愛いですね！」なんて嬉しいコメントや、「一緒になにかやりませんか！？」なんていう繋がりコメントもくるかもしれないという期待を込めてコンタクトフォームがあるといいですね！

写真

昔作ったポートフォリオ入れていたコンテンツなのですがコンテンツ内容が薄かったので、趣味で撮っていた写真を載せていました。
今回は写真ですが、自分の趣味のページを入れるのもいいかも？！しれませんね！

参考サイト

色々なポートフォリオを見て研究してみるのも手だと思いますので、沢山見てみましょう！
ということでポートフォリオについてまとめているところをご紹介します。

ポートフォリオ参考Webサイト – Gray #c0c0c0
デザイナーなら真似したい、最近の見せ方が素敵なポートフォリオサイトまとめ18個 -W3Q
めちゃめちゃ印象深かったポートフォリオサイトを大量に集めてみた
ビジュアルにインパクトのあるポートフォリオサイト30個まとめ – Photoshop VIP
国内の素敵なwebデザイナーさんのポートフォリオのまとめ – ポケットラボ
国内の素敵なwebデザイナーさんのポートフォリオのまとめ 2012/8/18　- ポケットラボ

■wordpressで作るポートフォリオ
CMSを使ったポートフォリオが最近では多いですね！
その際に参考になりそうなサイト、リンクをご紹介。

WordPressでポートフォリオサイト！(@WordbenchOsaka4) – ツバメヤWEBデザインメモ
どういう手順で作っていくかの考え方をわかりやすく解説されています！素敵！

WordPressをCMSにして、ポートフォリオサイトを構築 – motaraji
構築手順をすっごい細かく解説してくれています。とてつもなく参考になります。

自分らしさをアピール、WordPressポートフォリオテーマ素材35個まとめ -Photoshop VIP
フリーのwordpressのテーマをご紹介してくれています。

まとめ

webポートフォリオについてまとめてみましたが、作ろうと考えてみるだけでワクワクしますね！
是非、作る機会がありましたら参考にしてみてください！