ポートフォリオ制作時のポイントと参考になるサイトやデザイン

ポートフォリオ制作時のポイントと参考になるサイトやデザイン

最近時期的なこともあってか求人情報などを多く見かけるのと、知人がWebデザイナーになるためにポートフォリオを制作中ということで少し前にいろいろ聞かれたので、前回、前々回とポートフォリオについてのエントリーを書いてきました。両エントリーとも制作時に役立つアイコンや素材のまとめだったのですが、今回はポートフォリオ制作時のポイントや参考になるサイトやデザインをまとめてみました。

ポートフォリオ制作時のポイントと参考になるサイトやデザイン 目次

  1. ポートフォリオとは
  2. ポートフォリオの構成要素
    1. 自己紹介
    2. 制作実績
    3. ブログ
    4. ソーシャルネットワーク
    5. コンタクトフォーム
  3. デザイン参考
  4. 参考リンク・関連リンク

1. ポートフォリオとは

ポートフォリオとは

ポートフォリオとは簡単に説明すると自分の作品集のことを言います。
面接官やクライアントなどに自分のプロフィールやスキルなどを知ってもらうために有効なアイテムで、WebデザイナーやプログラマーなどのWeb業界だけではなく、服飾、建築、写真、ゲームなど、様々な業界でポートフォリオを制作されている方がいます。

ポートフォリオを制作する理由のひとつとして就職活動などで使用するからというのをよく目にしますが、就職活動だけでなくフリーランサーなど独立した時にも活用できます。
既に企業に勤めていたりしてポートフォリオの必要は特にないという人でも、今後フリーなどの計画を考えている場合は今のうちから少しずつでも作っておくと良いと思います。

また、今回は主にWebサイトで制作するポートフォリオについて書いていきますが、ポートフォリオには紙などの印刷物を使用して制作する場合もあります。
Web業界なんだからポートフォリオはサイトだけで良いのではと思う人もいるかもですが、特にこれから就職活動で企業に面接に行く場合などは印刷物のポートフォリオも制作しておくことをおすすめします。
直接見てもらいながら(補足や説明をすることができる)面接を受けたり、相手が忙しい人でも少し空いた時間などで目を通してもらえやすかったり、ポートフォリオの中身だけでなく構成もしっかりしているとそれもアピールポイントに繋がったりなど、印刷物で制作した時のメリットはかなりあるのではないかと個人的に思います。

目次へ

2. ポートフォリオの構成要素

普段からいろんな方のポートフォリオを見ていて、多少の違いはあるものの、個人的に多いなと思うコンテンツを5つにまとめてみました。
どんなコンテンツを取り入れるのかは人によって様々だと思うので、以下の中で自分が取り入れようと思っているコンテンツがあれば、少し参考にしてみてください。

2-1. 自己紹介

まず間違いなくポートフォリオに取り入れるであろうコンテンツで、名前、活動拠点、好きなもの、嫌いなものといった一般的なプロフィールだったり、実務経験、受賞歴、セミナー講師などといった過去の経歴などを紹介します。
また、デザイナーならPhotoshop、Illustrator、Fireworksなどのソフトがどれぐらい使えるか、プログラマーならPHPやJavaScriptなどの言語がどれぐらい理解しているかなどのスキルアピールをするコンテンツでもあります。

以下でプロフィールやスキルの見せ方など参考になりそうなサイトを幾つか紹介します。

itai inselberg

itai inselberg

砂時計の砂が積もっていくのを自分が積んできた経験に見立てていて、教育を受けていた頃は青い砂、雇用されている時は緑の砂という感じに表現しています。良いアイデアですね :)

Website design Tunbridge wells, Kent

Website design Tunbridge wells, Kent

基本的にテキストのみで構成されたシンプルな自己紹介ページですが、右上のQRコードを読み込むことで名前やアドレスなどがわかるようになっています。

Web Creator Mana

Web Creator Mana

Webクリエイターボックス」を運営しているManaさんのポートフォリオサイト。
頭はスキル、口は言語、手はソフトウェアという感じで、自身の写真と組み合わせてスキルアピールをしていて、各スキルのレベルはスターを用いて表現しています。
また、各ソフトや言語にはそれぞれのアイコンも用いているので、そちらもわかりやすいですね。

CWD (Contempoworld Design) – freelance graphic & web designer

CWD (Contempoworld Design) – freelance graphic & web designer

全体的にシンプルな感じで、プロフィールやスキルも基本的にテキストで紹介しており、スキルレベルの部分はスターで表現しています。

Andrew Reifman Graphic Design

Andrew Reifman Graphic Design

各スキルがどれぐらい使いこなせるのかというのを、棒グラフを使用して表現しています。

DEIDRE “DEDA” BAIN: PORTFOLIO

DEIDRE “DEDA” BAIN: PORTFOLIO

自分にとっての必需品やデザインセオリー、スキルなどを様々なグラフやイラストで紹介しています。
全体的にも素敵なデザインのポートフォリオ。

Henry Brown

Henry Brown

自分のスキルはパイチャートを用いており、また、その下には産まれてから今までの自分の経歴をアイコンとツールチップを組み合わせた感じで表現しています。

目次へ

2-2. 制作実績

自己紹介と同様に間違いなく取り入れるであろうコンテンツで、ポートフォリオ内で一番力を入れるべきところではないかなと思います。
たまに各サイトのURLとスクリーンショットを並べて、クリックでLightboxなどのプラグインを使用して拡大させてるだけっていうのを見かけるんですが、僕の個人的な意見としては、少しぐらいは詳細などを載せたほうがいいと思います。
(決して上記のようなタイプのポートフォリオが嫌いなわけではありません)

僕はポートフォリオを見ていて「このサイト良いなー」「このデザイン綺麗だなー」と思った時、それらをどのような技術を用いて制作したのか、どんなコンセプトで制作したのかが気になったりします。
見た人全員がそう思うわけではないと思いますが、きっと僕と同じように考える人もいると思いますし、制作するポートフォリオの用途が就職活動などの場合は特に載せるべきではないかなと思います。

とはいえ、そもそも紹介する際に何を載せるべきなのか悩む方もいると思うので、制作実績に載せたら良いかもと思うことやポイントをあげてみました。
また、制作実績の見せ方が参考になりそうなサイトも幾つか紹介します。

制作実績の見せ方のポイント

スクリーンショット
制作したサイトやバナーなどのスクリーンショットを載せるようにしましょう。
1サイトに対してスクリーンショット1枚ではなく、トップと下層を何枚かというように幾つか載せておくとより良いと思います。
ちなみにスクリーンショットを撮る際は、Firefoxなら「Pearl Crescent Page Saver」というアドオン、Chromeなら「Screen Capture」というエクステンションなどを使うと簡単にできます :)
URLの記載
スクリーンショットだけでなく実際のサイトも見れた方が見る側としても良いですし、JavaScriptやFlashを使用して動きのあるサイトにしている場合は特に見てもらうべきなので、できるだけURLは記載するようにしましょう。
使用した言語やソフト、担当箇所の記載
担当箇所であれば、コーディング、デザイン、マーケティングなど。
言語やソフトであれば、HTML(HTML5)、CSS(CSS3)、JavaScript、PHP、CMS(WordPressなど)、MySQL、Flash、Photoshop、Fireworksなどがあります。
これらを記載することで自分がどのようなスキルを持っているのかのアピールにも繋がるので、URLと同じくできるだけ記載すると良いと思います。
制作期間
これはWebに限ったことではないですが、僕自身Webの仕事をやらせてもらえるようになって凄く感じたのが、技術も大事だけど作業スピードもかなり大事だということでした。
場合によっては制作スピードも合否の判断要素になることもあると思うので、スピードにも自信がある人は書いておきましょう。
説明
どういった経緯やコンセプトで制作したのか、どこの部分を特に力を入れて制作したのかなどのように、そのサイトについてのコメントや簡単な説明を記載しましょう。
実際に仕事として制作したサイトなどの場合は、クライアントからの評価だったり、例えば「リニューアルを行ったことで以前より売上を伸ばすことができた!」とか「お問い合わせの件数が増えた!」のような公開後の反応とかも書けるといいのではないかと思います。

Jessica Caldwell

Jessica Caldwell

パッと見は線だけなんですが、線によって作られたひし形に実績やリンクが隠されており、クリックするとそれが全体に映し出されるという感じになっています。
…説明下手なので、実際に見てもらったほうがよくわかります。

Art4web

Art4web

一覧、詳細ともにシンプルで見やすいです。詳細は大きめのスクリーンショットを使って数カット載せているので、こちらもわかりやすくて良いですね。

Mark Dearman — Designer & Art Director

Mark Dearman — Designer & Art Director

各実績に小さいキャプチャと大きいキャプチャがスライド形式で表示してあり、スライドの動きを連携させています。

Two Fish Illustration & Designl

Two Fish Illustration & Designl

よく見かける感じのものですが、モノクロのサムネイルを並べて、マウスオンでカラーに変化させるタイプの見せ方です。

Yuna Kim

Yuna Kim

3種類の図形を使用してサムネイルを並べています。

Alexander Zhestkov

Alexander Zhestkov

クライアント名が書かれたカラフルなボーダーが並んでいて、クリックでアコーディオンの様な感じで詳細部分が表示されます。

Thicaud’s Portfolio

Thicaud’s Portfolio

Flashで作られたポートフォリオサイト。
制作実績の見せ方というよりは、全体的に素晴らしいサイトです。

目次へ

2-3. ブログ

例えばブログをWordPressで構築していて、中身もWordPressの情報に特化したエントリーが書いてあればWordPressスキルのアピールに繋がりますし、プライベートな内容を多く書いている場合は「自分がどんな人なのか」をブログを通じて伝えることができることもあります。
ただし、更新が長い間止まっていたり、他人の気分を害することばかり書いているようなブログなどの場合は逆効果になってしまうと思うので注意が必要です…。

目次へ

2-4. ソーシャルネットワーク

ブログと同じ感じになりますが、SNSを通じて自分がどんな人なのかを知ってもらえたりできたり、少し前にTwitter就活やfacebook就活といったSNSを利用した就職活動も話題になっていましたね。
ただし、こちらもブログ同様にあまり個人的なことばかりだったり、他人の気分を害することばかり書いてしまっている場合は逆効果なので注意しましょう。

以下はソーシャルメディアのアイコン素材を探す際に参考になるエントリーです。

目次へ

2-5. コンタクトフォーム

面接などの合否や連絡事項などは電話やメール、郵送などでくるのがほとんど思いますが、例えばポートフォリオを見て興味を持ってくれた人からの仕事依頼だったりする場合は、フォームからの問い合わせが多いと思います。
ちゃんと送受信できるかのチェックはもちろん、フォームのデザイン、JavaScriptなどを用いた表記チェックのエラーなども手を抜かずに行いましょう。

以下はフォームデザインの参考になるまとめエントリーです。シンプルなものから手の込んだものまで様々なデザインが紹介されているので、フォームにもこだわるという方はご覧になってみて下さい :)

目次へ

3. デザイン参考

素敵なサイトを幾つかピックアップするつもりでしたが、沢山ありすぎて厳選しかねたのと、このエントリー自体が結構長くなってしまったので、インスピレーションをもらえそうなギャラリーサイトやエントリーを紹介します。

Folio Focus

Folio Focus

ポートフォリオのギャラリーサイトの中でもかなり有名なサイトですね。暇があったら見ているギャラリーのひとつです。

Foliostars

Foliostars

こちらもポートフォリオのギャラリーサイト。

One Page Love

One Page Love

1ページ構成のサイトを集めたギャラリー。普段いろんな人のポートフォリオサイト見ていると、1ページ構成って結構多いです。
同じように考えている人は見せ方だったり、各コンテンツへの移動の仕方だったり何かと参考になると思います。

Freelancer Website Collection

Freelancer Website Collection

最近知ったギャラリーサイト。フリーランスで活動している方々のウェブサイトを集めているようで、私のサイトものせてほしい!という方は連絡くださいとのことです。

100 Best Portfolio Designs Of 2011 | Stylish Web Designer

100 Best Portfolio Designs Of 2011 | Stylish Web Designer

2011年のポートフォリオデザイン ベスト100というエントリーです。良いデザインだけあって、他でもよく見かけるようなサイトが多いです。

めちゃめちゃ印象深かったポートフォリオサイトを大量に集めてみた | バンクーバーのWEB屋

めちゃめちゃ印象深かったポートフォリオサイトを大量に集めてみた | バンクーバーのWEB屋

バンクーバーのWEB屋」を運営しているSennaさんが、印象深かったポートフォリオサイトを紹介しているエントリー。
見かけないサイトも幾つか紹介されていたので参考になりました。

目次へ

4. 参考リンク・関連リンク

同じくポートフォリオについて書かれているエントリーで、今回このエントリーを書く際にも参考にさせてもらいました。
ポートフォリオ制作時のポイントや参考になる書籍なんかも紹介されています。

また、先日同じポートフォリオのテーマで、ポートフォリオ制作時に役立ちそうなアイコンやPSD素材などをまとめたエントリーを書いたので、こちらも併せてご覧ください :)

目次へ

Back to top

Share

Related Posts

Leave a Comment