webデザインの仕事に着くためには必ずこのポートフォリオが必要になります。
ポートフォリオなくしてwebデザインの面接を突破することはまず不可能です。
そして、過去の職歴もある程度重要ですが、他業界からwebデザイナーになろうとする場合、ポートフォリオが採用で一番重要視されます。
なので、妥協せずにしっかりとしたポートフォリオを作成することがwebデザイナーになる一番の近道だと思います。

webデザイナー用ポートフォリオの作り方

過去の記事でwebデザインに必要なスキルやソフトについて書かせていただきました。そこに書いたようなことを勉強して、十分理解したしそろそろポートフォリオでも作ろうと思っても何を作ればいいんだろう…手が進まない人もいるのではないでしょうか?
そんな人はまずはテーマを決めるべきかと思います。
私の場合は旅行とコーヒーが好きだったので、旅行の記録のサイトとダミーのコーヒーショップのサイトをポートフォリオとして作成しました。旅行のサイトは20ページくらい。コーヒーのサイトが10ページくらいで途中掛けでしたが、そこで仕事が決まりました。

webデザイナー用ポートフォリオの作成手順

いきなり無の状態(0ベース)からwebサイトを作ろうとすると何から手を付けていいのか分からなくなってしまいます。なので、おすすめの方法としてwebデザイン業界での仕事の進め方と同じ方法を一人で行うのがいいかと思います。

★webサイト作成手順★

  1. ワイヤーを作成する
  2. ワイヤーはwebデザインの現場だとディレクターが作成することが多いです。ワイヤーの作成形式は特に決まっておらず、だいたいexcelかパワポで作成します。
    ワイヤーで必要な情報はサイトの構成とテキストです。
    ポートフォリオを作成するときは何のサイトを作るか、どんな構成でwebサイトを作るか、テキストの内容はどうするか?といったことを記載しておけばいいと思います

  3. ラフデザインを考える
  4. ワイヤーからいきなりPhotoshopでデザイン作業に入るのではなく、最初にラフデザインを考えることをおすすめします。
    私の場合何かの裏紙にどんなデザインにするかを手書きで簡単に書いていきます。
    具体的には各セクションごとにどういった見せ方をするかといった大枠をここで決めます。
    h2やh3のタイトルの見せ方や背景に画像を置くとか色を置くとか、文字と画像の配置をどうするか?とかページ内リンクはどういうあしらいにするかなどをここで決めていきます。
    webサイト全体に関わってくるカラースキームもここである程度決めていきます。
    また、最近とても重要視されているUIに関してもここで考える必要があります。どの部分をアコーディオンにするとかスライドショーにするとかタブ切り替えにするとか。
    UIに関してはワイヤーの時点で決めてもここで決めてもどちらでも大丈夫です。

    ラフ案

  5. PhotoshopでPCデザインを起こす
  6. ラフデザインで作成するwebサイトの方向性が決まったら、それをもとにPhotoshopでデザインをしていきます。
    ここで完全にwebサイトのデザインを完成させるので細部までデザインを作成します。
    この時にhoverの時のアクションも考えておかないといけません。
    またUIでアコーディオンなどを考えている場合は開いてる状態と閉じている状態の両方の状態がわかるものを作成しましょう。

  7. PhotoshopでSP(スマホ)デザインを起こす
  8. webデザインの仕事をしているとだいたい先にPCサイトのデザインを作成して、それがFIXしてからSPサイトのデザインを作成することが多いです。それはPCサイトでデザインをFIXさせておかずにSPサイトを作成してしまうと、修正が入った場合に両方を修正しないといけなくなるからです。そうすると余計な工数がかかってしまうので先にPCサイトをFIXさせます。
    しかし、そうするとSPサイトよりPCサイトの方が重要視されてしまうのですが、現状はSPサイトの方が多くの人に見られるのでSPサイトの方が重要です。そしてSPサイトを使いやすくするためにUIデザインが非常に重要になってきます。

  9. 画像をスライスする
  10. デザインが完成したら画像として使うものをスライスして書き出します。
    背景画像もこの時に書き出しをします。

    画像スライス

  11. コーディングをする
  12. Photoshopのデザインを参考にコーディングをしていきます。2018年9月の段階ではHTMLの形式はhtml5、CSSの形式はcss3で作成すれば大丈夫です。
    ここで大事なのは必ずレスポンシブwebデザインで作成しましょう。
    レスポンシブでSPサイトにも対応させるのは慣れないと少し手間になってしまいますが現段階ではレスポンシブでwebデザインができるかできないかはとても重要になってきます。ここでフルードデザインやリキッドデザインの話が出てくるのですが、基本的に表示は固定でブレイクポイントで切り替えで大丈夫かと思います。できればブレイクポイントは2つ必要で1280pxと768pxでブレイクポイントを設けるのが最良かと思います。
    しかし、webデザインの現場ではブレイクポイントは1つで768pxに設置するだけの場合が多いです。

★関連参考記事★


webデザインのアイデア出しとアドバイス

webサイトの構成を考えていざデザインに取り掛かろうと思ってもなかなかいいデザインアイデアが浮かんでこないという人は多いのではないでしょうか?
実際、私は今でもデザインはパッと出てきませんし、それはほとんどのデザイナーがそうだと思います。
そんな時はどうするか?というと他の優良なwebサイトを参考にさせてもらいます。

webデザインの参考になるwebサイト

webデザインの参考になるサイトはたくさんありますが、たくさん見ていても時間がかかりすぎてしまうのである程度絞った方がいいかと思います。
今回はwebデザインの現場でも多くの人が頼りにしているwebサイトを2つ紹介します。

★Pinterest★

Pinterestはwebデザインだけでなく様々なデザインやクリエイティブなものが掲載されていて現在一番参考になるwebサイトと思っていただいても過言ではないかと思います。
なので必ず登録してブックマークしておきましょう。
デザインをするときだけでなく、毎日15分と決めて毎日優良なwebデザインを見ておくだけでも少しはアイデアとして蓄積されていきますし、今後使いたいwebデザインがあればブックマークしておいていざデザインするときに参考にすると効率的にwebデザインが行えるかと思います。

★81-web.com★

81-web.comの良さは掲載されているデザインのクオリティも優良なのですが、実際のページに遷移できるということです。
Pinterestの場合キャプチャしか見れない場合が多いので実際のUIなどまでは分からない場合が多いです。しかしこちらのサイトに掲載されているwebサイトは実際のページに遷移できるので実際のwebデザインの動きまで確認することができます。

★UI Movement★

UI Movementはスマホサイトの作成のときの参考になります。そしてUIデザインの参考に多いに役立ちます。
いろんな動きがあるので見ているだけでも楽しくなります。


★レトロバナー★
レトロバナーはバナー制作の時に参考になります。Pinterestでもバナーデザインは見れるのでそちらでもいいのですが、たまにバナーデザインをするときに見ることがあるので紹介させてもらいました。

★流行デザインと人気フォント★

無料画像やアイコン作成で頼りになるwebサイト

無料・商用利用OKのアイコンサイト

★FLATICON★
FLATICONはほぼ無料で大量のアイコンをダウンロードできます。商用利用もOK。
私はイラスト系が得意ではないのでこのサイトからベクターデータをダウンロードしてから自分の作りたいアイコンに加工します。
線のアイコンもフラットデザインのアイコンもあるのでアイコン系はこのサイト1つでなんとかなります。

★FLAT ICON DESIGN★
FLAT ICON DESIGNはフラットデザインのアイコンに強いサイトです。もちろん無料で商用利用OKです。

無料・商用利用OKのフリー画像サイト

★pixabay★
pixabayは無料でかなり高品質な画像が使えます。イメージとしてはShutterstockの縮小版といった感じです。
Shutterstockより画像の数は少ないですが、海外のプロ写真家が撮ったような良質な画像が無料で使えます。
海外のサイトなので日本の風景や日本人の画像が少ないので景色などの画像に強いです。

★ぱくたそ★
ぱくたそは写真の品質こそpixabayには劣るもの日本のwebサイトなので日本人の画像が多くあります。
無料で使える日本人の場合ほとんどのwebデザイナーはこのサイトを使うことになります。
webサイト自体はいいのですが、無料画像から画像を取ってこないといけないほとんどがwebデザイナーはこのwebサイトを使用するせいでここに出てくるモデルさんの画像は頻繁に見かけることになります。
なのでwebデザインを仕事にしている人が見るとすぐに無料画像使ったなってのがばれてしまうのが懸念点にあります。
しかしwebデザイン用のポートフォリオならデザインのセンスやスキル・理解度を測るだけなので、無料画像からとってきたってわかってしまっても問題ありません。

ポートフォリオの作り方まとめ

少し長くなりましたがwebデザインを仕事にしていこうと思うのなら上記に挙げたサイトはブックマークをしておくことをおすすめします。
いきなりトッププロのようなデザインをするのは難しいのでまずは優良なwebサイトからデザインを参考にしてポートフォリオを作成するとポートフォリオの質も向上して就職しやすくなると思います
ポートフォリオの作成だけでなく実際にwebデザインの仕事についてからもこちらのサイトにはお世話になるはずですので使い方には慣れておくと実務で困らなくて済むと思います。
もし、人のデザインをマネするのは嫌だと抵抗がある人は自分のアイデアだけでいいものが作れるのならいいのですが、そういう人はこのサイトを読んでいないと思いますので少し柔軟な頭をもっていいデザインは積極的にとりこんで自分のものにしてしまうことをおすすめします。最初はマネ事でも実際に自分で制作すると次回からは何も参考にしなくても同じようなあしらいはパッと浮かんでくるようになります。その繰り返しでデザインの引き出しも増えて行くのだと思いますし…。