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. デザインが完成したら画像として使うものをスライスして書き出します。
    背景画像もこの時に書き出しをします。

    画像スライス
    最近ではPhotoshopも便利になってきたので、スライスを使わずに画像を書き出す人も多くいます。
    なので画像の書き出し方法は自分のやりやすい方法で大丈夫です。

  11. コーディングをする
  12. Photoshopのデザインを参考にコーディングをしていきます。2019年6月の段階ではHTMLの形式はhtml5、CSSの形式はcss3で作成すれば大丈夫です。
    ここで大事なのは必ずレスポンシブwebデザインで作成しましょう。
    レスポンシブでSPサイトにも対応させるのは慣れないと少し手間になってしまいますが現段階ではレスポンシブでwebデザインができるかできないかはとても重要になってきます。ここでフルードデザインやリキッドデザインの話が出てくるのですが、基本的に表示は固定でブレイクポイントで切り替えで大丈夫かと思います。
    肝心のブレイクポイントをどこに置くかですが、かなず768pxに1つは置いてください。これでスマホのデザインとPC・タブレットの表示が切り替えられます。
    そこからさらに必要であればタブレットとPCの切り替え用にブレイクポイントを設置したりスマホでもiphone5SEだと表示が崩れやすいので、調整用にメディアクエリで個々に対応していきます。

★関連参考記事★


良質のポートフォリオを作るコツ

焦って中途半端なポートフォリオを用意してもなかなか採用してもらえないのが現実です。
webデザイナー未経験者だと自信作だと思ったポートフォリオでも業界の人から見たら大したことなかったりします。
実際に人に評価されるようなポートフォリオってどうしたら作れるのか?と悩んでしまうのではないでしょうか?
そんな人たちは1つ自分のポートフォリオを作るたびに1つ自分が素敵だと思うwebサイトをトレースしてデザインを起こしてコーディングをしてみてください。
きっと、トレースするたびに自分のポートフォリオと何が違うのかが見えてくると思います。
それはマージンの取り方や画像の使い方、色の使い方など様々なところで勉強する部分が出てくると思います。

できたらブログサイトの運用もした方がいい

webデザイナーの仕事にはデザインスキルの他にweb知識も必要になります。
そして、そのwebデザイナーに必要なweb知識を身に付けるには自分でサイトを運用するのが一番勉強になります。
自分でサーバーに契約して独自ドメインを購入してサイトを作って公開。
またブログだとwordpressなどを使うと便利なのですが、基本的に自分でカスタムする必要もあります。
まだまだ、現場でwordpressを使う現場もありますし、CMSについて理解を深めておくと刺さる会社も結構あります。
また、自分でブログサイトを運営すると、SEO対策にも理解が深まります。
このSEO対策にも面接官が食いつくことが多いので実際に成功したSEO対策の体験談などが面接で話せるとグッと効果的なのでなるべく勉強しておきましょう。
ブログサイトは基本的にテーマという基本デザインを自分でカスタムして作成するのですが、下記サイトくらいのクオリティがあればブログサイトとしては十分です。

自分でサーバーにアップして初めて1連の流れがわかる

webデザインの勉強をした人なら、コーディングが終わったら、次はFTPを使ってサーバーにアップする必要があることは知っていると思います。
しかし、そのサーバーってどんなものか?ドメインってどんなことか?までしっかり理解していない人は多いのではないでしょうか?
実は私もwebデザインをしていて1年目くらいの時までサーバーやドメインについてなんとなく知ってるけど、どうやって管理してるか?などの詳しいことは知りませんでした。

私が知らずにwebデザインの仕事につけていたので必須ではないですが、いずれこの知識は必要になります。
そして、この知識を理解するためには自分でサーバーをレンタルしてドメインを購入してサイトを運用しないと身に付きません。
サーバーのレンタルで1万円位、ドメインで1ドメインが1年で1000円ぐらいで購入できます。
この投資が高いか安いかの基準は人それぞれですが、無料のものだとできることが制限されたりしますし、何より実践の現場では無料のサーバーなんて使用しないのであまり参考になりません。
これだけは自分でお金を使わないと他人事のようになってしまい、いつまでも理解できないままになってしまいますので、私はポートフォリオを作成するタイミングで最低でもレンタルサーバー1つとドメインを1つは購入することをおすすめします。



レンタルサーバーやドメインはどこで購入すればいいのか分からないと思いますが、有名どころで購入すれば大丈夫です。
私の場合、レンタルサーバーはXserver。ドメインはお名前.comで購入しています。
Xserverはレンタルサーバーでは凄く有名で、価格安く、機能も優れているので1つサーバーを持っているだけで凄く勉強できる範囲が広くなっておすすめです。
今は10日間の無料期間もあるようなので、無料期間中だけでも勉強のために登録してみてはいかがでしょうか?サーバーってこういう風にレンタルするんだーってことも分かると思います。

ドメインはどこで購入してもいいのですが一応私の使っているお名前.comも紹介しておきます。
詳しく知りたい方は下記ボタンより公式サイトをご覧になってください。

ポートフォリオはweb上だけでなく紙面でも用意しましょう

webデザイナーの面接では基本的に面接官はノートパソコンを持って現れることが多いです。
しかし、必ずノートパソコンを持って現れる訳ではないですし、面接場所にwifiが飛んでなかったらインターネットは使えません。また、わざわざURLを打ち込むのが面倒であったり、面接官が人事の人間でパソコンに疎かったりすると紙面での面接になることも多いです。
なので、基本的に紙面のポートフォリオも必要です。
わざわざ本のようなものを用意しなくてもいいので自分のサイトのキャプチャを印刷したものは用意しましょう。

ポートフォリオができたらまずは面接に行くことが大事

ポートフォリオが作成できたら面接に行ってみましょう。
ここでは、就職できなくてもいいので、現在の自分のポートフォリオがどんな評価をされるのか?を確かめるためにも必要です。
恐らく採用はしてもらえませんが、面接を通して自分のポートフォリオに何が足りないかが面接を通して分かってきます。
しかし、ここで1つ問題があります。未経験だと面接に行くまでも結構大変です。
リクナビNEXTとかで応募してもポートフォリオがしっかりしていないと全然面接すらしてくれません。

まずは転職エージェントに行きましょう

ここであなたの救世主となるのが転職エージェントです。
転職エージェントはあなたの転職を手助けしてくれる会社です。
そんなにも多くの手助けをしてくれるわけではないですが、登録(無料)をするとその会社の持っている求人案件に応募できるようになります。
過去の実績から個人では面接にすら行けなかった会社にも面接に行けたりします。
また面接に日程調節や採用が決まった場合は待遇面や勤務開始日などの調整も行ってくれます。

webデザイナーの転職エージェントならworkport

ワークポート
webデザイナーになりたくて転職エージェントに登録するならworkport(ワークポート)がおすすめです。
ワークポートはweb系の転職エージェントではtopクラスに大手で経歴もあります。なのでノウハウや顧客もたくさん持っていてとても頼りになります。
面接対策や職務経歴書の書き方などの無料セミナーも開催しているので登録して損は絶対にありません。無料ですし…。
ワークポートへの無料登録は下のボタンからワークポート公式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デザインの仕事についてからもこちらのサイトにはお世話になるはずですので使い方には慣れておくと実務で困らなくて済むと思います。
もし、もうポートフォリオができたという方は就職活動の一環としてワークポートに登録しましょう。
いろんなサービスを利用して就職活動をすることがwebデザイナーになるための最大の近道です。