ポケットラボ

就活の際などにポートフォリオを作ろう！と思っていてもなかなか手が動かなくて、作り出せませんよね。そんな方のために３日でWebポートフォリオを作ろうというのが目標です。今回は１日目にやることをまとめていきます。

１日目-
３日でWebポートフォリオを作ろう！リソースや情報等など（１日目 設計編）

２日目-
３日でWebポートフォリオを作ろう！リソースや情報等など（2日目 デザイン編）

３日目 -
３日でWebポートフォリオを作ろう！リソースや情報等など（3日目 コーディング編）

まずはポートフォリオになにが必要か

今回は３日で作るというのが目標なので、必要なものをリストアップしていきましょう。
■プロフィール
■制作実績
■SNS
■コンタクトフォーム

ページ数にするとトップページ、プロフィールページ、制作実績ページ、コンタクトページの４ページになります。SNSなどはアイコンなどを付けてリンクとして扱います。各ページの中身の詳細はこちらの記事（webポートフォリオを制作する時のポイント、参考サイト、デザイン）を参照お願いします。

ワイヤーフレームを作る

ヘッダー、コンテンツ、フッターになにがどこに情報が必要になってくるかを置いていきましょう。
今回は情報が少なくすごくシンプルに作成しましたが、もう少し細かく作っていってもいいかなと思います。

TOPページ

ヘッダー、コンテンツ、フッターと色分けするとデザイン、コーディングする際にわかりやすくなります。（しなくても大丈夫ですが）
デザインを始める前にワイヤーフレームというWebサイトの「設計図」「骨組み」を作っていきます。
これがあるとないとじゃデザインを進めていく時間が大幅に違ってきます。レイアウトや幅やサイズなどを細かく書いていってもいいと思います。
ということで１日目はワイヤーフレームを作って行きましょう。

上記で例を上げたTOPページ以外にもAboutページ、Portfolioページという下層ページも一緒に考えていきましょう。

About

Portfolio

今回は僕はIllustratorを使用し作りましたが、紙に手書きでも、オンラインサービスで作っても良いかと思います。今回は簡単にすぐに使えるということでオンラインでweb上でワイヤーフレームを書くことができるツールをご紹介します。

オンラインサービスを使って書いてみる

Cacoo（カクー）- https://cacoo.com/　
日本語対応しており、モックアップ、ワイヤーフレーム、サイトマップなどの作成に使えます。日本語で使えるというところが嬉しいですね。

HotGloo – http://www.hotgloo.com/
すっきりUIが特徴で、直感で操作できるところが好きです。英語です。

ワイヤーフレームの参考

I ♥ wireframes – http://wireframes.tumblr.com/

上記で上げた、僕が書いたワイヤーフレームだとびっくりするぐらい参考にならないと思うので、こちらのワイヤーフレームのギャラリーサイトを参考にしてみてください。こんな感じに書いくのかー！というのがとても参考になります。

デザインする際のテーマ/コンセプトを決める

いざ！デザインするぞ！ってなった時に「さてどんなデザインにしよう？」ってなると思います。僕はこの考える時間をすごい使ってしまいます。しかし、テーマをあらかじめ決めておけば、その時間を少しは短縮できるはずです！なのでその『デザインのテーマ/コンセプト』を１日目に決めておきましょう。

このテーマは、自分が好きなものとか、好きなサイトとかを参考にしながら決めていけばいいんじゃないかなとおもいます。

Webポートフォリオを制作いたしました「ポケットラボ　ポートフォリオ」
こちらの記事で書いたように、僕はポートフォリオを作る際はコンセプトは

宇宙はまだまだ未知の世界ですよね。僕からしたらWebデザインやWebのことなどもまだまだ全然わからないことが多いですし未知の世界なのです。なんだか宇宙と似ているなーと思ったので、今回のWebポートフォリオのコンセプトとしては宇宙にしてみました。

今見るとなにカッコつけてるだ、って感じなのですが、どんな些細なテーマでも壮大に広げていきましょう！！自分が好きなことのテーマならデザインする際もきっと楽しくできますよ！

国内の素敵なwebデザイナーさんのポートフォリオのまとめ
国内の素敵なwebデザイナーさんのポートフォリオのまとめ 2012/8/18

他のwebデザイナーさんのポートフォリオを参考にしてみるのもいいですね！

まとめ

Webポートフォリオ制作１日目は
■ワイヤーフレームを書いていこう
■ポートフォリオのコンセプト/デザインのコンセプトを決めよう

次は３日でWebポートフォリオを作ろう！リソースや情報等など（2日目 デザイン編）です！