今回はwebポートフォリオのことについてまとめてみました。就職時、独立時、などさまざまなタイミングで一度作品整理したい時などにポートフォリオを作りますよね。色んなwebポートフォリオサイトを見ていて、どういうものが必要かなど、どんな物がいいのかなどまとめてみました。
目次
webポートフォリオってなに？
過去に新卒webデザイナーで採用してもらえるような紙ポートフォリオの作り方と、紙のポートフォリオのことに書きましたが、今回はwebポートフォリオについて。
webポートフォリオは簡単に言ってしまうと、webサイトで作る「作品集」です。
今までにどんな物を作ってきたかなど、時にはお客さん、時には面接官、などに自分のスキルやプロフィールなどを評価してもらえるものです。
webポートフォリオに必要なコンテンツ
国内外合わせて色んな方のWebポートフォリオをみると、多少違いはありましたがこのコンテンツは共通しているかなというところをまとめてみました。
必須コンテンツではところもありますが、どんなコンテンツを入れたらいいか迷っている方に参考になればと思います。
プロフィール
まずは、自分を知ってもらうために、自分のスキルや、自己紹介などを入れたいですね。
経歴、受賞歴、趣味、好きなこと、嫌いなこと、など一般的な自己紹介から
webデザイナーならPhotoshopやIiiustlatorのレベルなど自分のスキルは必須項目です。
さらに自分をもっと知ってもらうためにSNS(Facebook,twitter)など載せて自分がどんなことを発信しているか、を見てもらうのもありです。
BehanceやTumblrなどのSNSに作品を投稿している人もSNSのIDを載せても良いです。
Web Creator Mana
「Webクリエイターボックス」の運営者のmanaさんのポートフォリオ。
自分の写真を使い、自分のスキルをソフトと星のアイコンを用いて表しています。わかりやすい！
Alex Pierce about
コチラも写真を使っていますが、マスクしてます。スキルの一覧もあります。
we6design.com
こういうのも面白いなーと思います！
制作実績
まず一番力を入れたいコンテンツですね！
どのポートフォリオも制作実績は必ずと言っていいほどありますね。
でもただ「こんなサイト作りましたよ」と言ってサイトの画像を載せているだけではあまり評価ができないので、下記の項目も入れ、どのように作品を作成したのか、意図や詳細を載せましょう。
サイト全体のデザイン（スクリーンショット）
いちばん重要な要素です。トップページ、そして下層ページまで用意してあったらいい親切です。最近では、スマホサイトのデザインも重要になってきているので、スマホサイトでの表示も載せてみてもよいかもしれません。
サイトのURL
画像（カンプ）だけでは伝わりずらいところなら、近年ではアニメーションもWebサイトではとても重要な役割なので、動きがあるサイトであれば、実際に動くサイトで見てみたいと思います。
公開中のWebサイトであれば、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ポートフォリオについてまとめてみましたが、作ろうと考えてみるだけでワクワクしますね！
是非、作る機会がありましたら参考にしてみてください！
