こんにちは。フクロウです。
「未経験だけどWebデザイナーになりたいなあ。」
「ポートフォリオってどうやって作ればいいんだろう。」
そう悩んでいる人はたくさんいますよね。
この記事では
- 未経験の人が作るべきポートフォリオ
- 独学でも最低限就活で使えるポートフォリオの作り方
をあまり堅苦しくない感じでご紹介します。
未経験からWebデザイナーを目指している方はぜひ参考にしてみてください。
Webデザイナーにおけるポートフォリオの必要性
さすがにもうポートフォリオが大事だってことは分かってるよ！！！！
ですよね～
はい。こんな具合にWebデザイナーになるうえでポートフォリオが必須であることは重々承知でしょう。
それでももう一度言います。
未経験からWebデザイナーになるためにはポートフォリオは必須です。
就職・転職活動の時には必ず履歴書を用意しますよね。
Webデザイナーにとってポートフォリオは履歴書以上に重要と言ってもいいくらいのものです。
改めてその重要さを再確認しておきましょう。
ポートフォリオハダイジ
棒読み！！！！！！！
Webデザイナーを目指すなら、Web上でのポートフォリオを作成する
ポートフォリオには、紙媒体の形式とWeb上で作成する形式の2種類に分かれます。
Webデザイナーを目指すのであれば、Web上でのポートフォリオを制作していきましょう。
Web制作会社に応募する場合、応募の時点でポートフォリオの提出を求められることが多々あります。
提出する際はURLを送ることになるので、必ずWeb上にアップロードしておきます。
Webデザイナーなら紙媒体のポートフォリオは必要ないの？？
そんなことはないよ！
アピール材料が多くて損することはありません！
もし紙媒体のポートフォリオが用意できるのであればガンガンアピールしていきましょう。
ただ、必ずしも紙のポートフォリオを作らなきゃいけない訳ではないので、あくまでもWebのポートフォリオを優先して制作しましょう！
（僕は念のため両方用意して転職活動をしてました。）
未経験の人が作るべきポートフォリオ
さて、ポートフォリオが大事なものだということが再確認できたので本題に入りましょう。
実務経験のある人なら、いままで仕事で作ってきたサイトやデザインを武器にできますが、
未経験からWebデザイナーになりたいという人は、どんなポートフォリオを作っていけばいいのか分からないですよね。
でも大丈夫です。
独学で高度なスキル・技術が無くても、見せ方や作り込み次第では経験者よりも高評価を得られるチャンスは大いにあります！
まずは未経験の人がポートフォリオに載せるべき作品をざっと紹介します。
最低限1～3を用意しておけば就活には使えます。
ちなみにサイトの模写や架空のオリジナルサイト等はとりあえずトップページのみの作成でいいと思います。
下層ページまで作るのは大変ですし、数の多さをアピールしたいのでサイトのトップページを複数個作っていくような方針でいきましょう。
ポートフォリオに載せる作品を作る
載せるべき作品は一通り分かりましたね。
それでは具体的にどんな作品を作っていけばいいのか。
ここからは少し詳しい内容を一緒に見ていきましょ～
サイトの模写
模写でいいの？
と思われる方もいるかもしれませんが、丁寧に作っておけば評価はされます。
1px単位できちんと余白を取り、テキストの間隔やサイズもきっちりと模写することが大切です。
ただ、模写といってもソースコード丸々コピーだと勉強もクソもないので、あくまでも見た目を真似し、自分なりのコーディングで再現していきましょう。
どうしても分からない場合はソースを見てもいいですが、基本的には自分で調べて解決するのが一番です。
そうすることで、コーディングのスキルが上がり、ポートフォリオの作品にもなるので一石二鳥です。
例えば銀行のようなちょっとお堅いサイトは、トップページのコンテンツ量も多いので練習にはぴったりですよ。
サイトを模写するうえで個人的にこれは避けた方がいいなと思うことを挙げます。
要するに、著作権に触れてしまうような内容をそのまま使用するのは避けようということです。
もしそれを守らなかった場合、企業側から
著作権のことも考えないのに、大事なクライアントの仕事を任せられるだろうか？
と思われてしまう可能性があります。
1と2は架空の名前や内容に書き換え、3は著作権フリーの画像で代用しましょう。
どこから持ってくればいいの？って人には、著作権フリー画像を無料かつ手軽に検索できるサイトをいくつかご紹介します。
この記事内で使っている画像もすべて上記の3サイトから拾ってきたものです。
ほんと重宝してます。
架空のオリジナルサイト
続いて架空のオリジナルサイトを作ってみましょう。
企業のコーポレートサイト、飲食店、美容室、病院、などなど
テーマを決めて実際にクライアントから依頼を受けた気持ちで作っていくことが大事です。
理想は架空のコーポレートサイトをワイヤーから作っていくことですが、
「独学なのにそんなことまで出来るかい！！！！！」
と叫ぶ人もいるでしょう。
そりゃそうです。それが出来るなら苦労はしないですもんね。
というわけで、そんな困っている人に対してカンプを配布してくれている超ありがたいサイトの力を借りましょう！
これらのサイトから作った制作物はポートフォリオでの使用も許可されているので、ガンガン載せていきましょ～～
既存のサイトのリニューアル
模写はできるけど、オリジナルはやっぱり難しい…
という人は、既存のサイトにオリジナル要素を入れていくような感覚で作ってみるのはどうでしょうか？
いわばサイトのリニューアルっていう設定ですね。
同じパーツでもレイアウトを少し変えてみたり、コンテンツを追加してみたり。
サイトのリニューアルというのは、実際のWeb制作においてもよく依頼が来るので、良いアピールになると思います。
もちろん素材はフリーのものを使いましょう～
さて次は…
ちょっと待てい！！
ベースにする良いサイトがなかなか見つからないんだけど！！
ほっほっほ、そんな人にぴったりの良いサイトがあるんだよ～
というわけで模写や参考にしたいサイトが見つからない人は、下記のサイトたちの力を借りましょう！
これらはWebデザインの参考になるサイトを一覧にしてまとめているサイトです。
常に更新されているので、その時のトレンドも把握できます。
めっちゃ便利でとにかく参考になるのでぜひ活用してください！
サイトはレスポンシブ化も忘れずに
ここまで紹介してきた模写サイト、オリジナルサイト、リニューアルサイトはレスポンシブ化も忘れずに作りましょう。
レスポンシブとは、どのデバイスで見ても最適な表示ができるWebサイトのことを指します。
近年のスマホの普及により、スマホ利用率は8割を超えているそうです。
パソコンとスマホを比べた時に、スマホからのWebサイト閲覧率は7割以上あると言われています。
つまりパソコン、スマホ両方で閲覧できるサイト作りが必須なんですね。
そこで重要なのがレスポンシブWebデザインです。
現在作られているWebサイトはほぼ100％レスポンシブを前提に作られているので、Webデザイナーを目指すのであれば必ず対応しておきましょう。
また、最初のうちは気にしなくても大丈夫ですが、ある程度慣れてきたら文字サイズにおいてもレスポンシブを意識して可変するようなコーディングを心掛ける必要があります。
そんな可変する文字サイズのコーディングについてはこちらの記事も参考にしてみてくださいね。
バナーやポスターやチラシなど
Webサイトのデザインはハードルが高いなという人は、
バナーのデザインができるだけでも良いアピールになります。
特にネットショップを運営している会社であればなおさら重宝されるスキルです。
健康食品、旅行会社、懸賞、ジム、格安スマホなどなど、よくWebサイト上で見かけるようなバナーのテーマを決めて、数点作ってみましょう。
目安としては、3～5点の、それぞれ違うジャンルのバナーを作成できれば上出来です。
スクールや職業訓練で制作したポスターやチラシがあれば、そちらも作品として載せていきましょう。
【番外編】趣味で作った作品など
イラスト、ラインのスタンプ、ロゴデザインなど、自分の趣味で作ってきた作品もアピール材料として使えます。
デザインスキルに関わってきそうな作品はガンガン詰め込んでいきましょう！
僕はイラストを描くのが得意なので、自信のある作品数点をポートフォリオの中に入れました。
それから、クラウドワークスのコンペで作ったチラシも作品として掲載しました。（選ばれた訳ではありませんがアピールにはなりました！）
面接でも話の種になりますし、かなり好印象だったので、作品がある人はぜひポートフォリオに載せてみてください。
ポートフォリオサイトの作成
作品が揃ったら、あとはその作品たちを載せるためのポートフォリオサイトを作りましょう。
作品作りで大変かもしれませんが、ここも大事な工程です。
一緒に頑張りましょう！！
アルバムのジャケット作り的な感じだね！！！
えっと…う～ん………そ、そうだね！！！！！！
ポートフォリオサイトに載せる内容って？
ポートフォリオサイトに載せるものは、作品だけではありません。
自分の名刺代わりにもなるので、自己紹介などもきちんと載せておきましょう。
具体的には
といった感じです。
せっかくなので一つずつ簡単に説明しますね。
自己紹介
履歴書のように堅苦しく書く必要はありません。
話のネタになるような、少しユーモアのある感じでいいです。
例えば
といった感じで、堅苦しくなく、でもふざけすぎない、ほどよく軽い自己紹介を書いてみましょ～
あえて全部カタカナで書いてみるとか面白いかもね。
…………それはやめといた方がいいと思うよ。
作品紹介
ここには先ほど説明した作品を載せていきましょう。
各作品をサムネ付きの一覧のレイアウトにして、クリックしたら詳細へ飛ぶ、といった作りですね。
詳細には作品のポイントや制作時間を記載するとなお好印象です。
自分が頑張ったポイント、アピールしたい部分は遠慮せずに記載しましょう！
スキル
現在の自分ができる範囲のスキルを書いてみましょう。
書き方の例としては
といった感じでスキルを紹介していきます。
アイコンを使うなど、こういった部分で見せ方を工夫しておくと良いアピールになりますよ。
連絡先（お問い合わせフォーム）
就活の直接的なやり取りは基本的にメールで行うと思いますが、念のため連絡先も載せておきましょう。
TwitterやFacebookを見てほしければそのリンクを貼り、特に無ければメール用のお問い合わせフォームを設置しておけば大丈夫です。
オリジナルでポートフォリオサイトを作る
載せる内容が決まれば、いよいよポートフォリオサイトを作っていきます。
ポートフォリオサイトもひとつの作品として見てもらうためには、オリジナルで制作することが大事です。
ワイヤーから考え、カンプ、コーディング、サーバーへのアップロード
これら一連の流れを一人でできればポートフォリオサイトとしては完璧です。
もちろん前述したレスポンシブ化も忘れずに。
オリジナルでポートフォリオを制作したら、サーバーへのアップロードも忘れずに行いましょう。
僕は無料サーバーを使ってアップロードしていたんですが、後になって消滅してしまったので、できれば格安でもいいのでちゃんとしたサーバーを使うことを強くオススメします。
どのサーバーを選べばいいのか分からない人は、とりあえず以下のサーバーの格安プランを選んでおけば間違いないです。
- Xserver Business
（X10プラン） - ロリポップ!レンタルサーバー
（ライトプラン）
- さくらのレンタルサーバ スタンダード
ポートフォリオのテンプレートを使う
理想は一からポートフォリオを制作することですが、
ワイヤーからすべて考えるのは大変じゃ！！
という人はまあまあいますよね。
僕もそう思います。
そこでまたまた便利なサイトをご紹介！
こちらのサイトではポートフォリオのテンプレートを用意してくれています。
改変自由とのことですので、このテンプレートをカスタマイズしていき、オリジナルのポートフォリオサイトを作りましょう！
ポートフォリオ作成ツールを使う
もうポートフォリオサイトなんて作れないよ…
という人は最後の手段を使いましょう。
ポートフォリオをめっちゃ楽にオシャレに作ってくれるツールたちをご紹介します。
どれもこれもコーディング不要でプロ級のテーマを用意してくれています。
しかも無料で。
しかしコーディング不要ということは、自分自身のスキルは何もアピールできないことになってしまいます。
個人的には本当に最後の手段として使った方がいいと思います。
せっかく作った作品のためにも、出来るだけ自作のポートフォリオサイトの制作を目指しましょう。
未経験のポートフォリオには、未経験の良さがある
未経験者のポートフォリオって、9割9分経験者のポートフォリオより劣ります。
そりゃそうです。
だって未経験なんですから。
でも経験者って手を抜くところを知ってるので、未経験者と比べるとそれが浮き彫りになったりすることもあります。
その点未経験者のポートフォリオは一所懸命さが詰まっていますからね。
スキルや技術がそれほど高くなくても、伸びしろというものは十分にアピールできるんです。
手を抜かず丁寧に作りこむ姿勢は、育成を考えている会社には特に魅力的に感じる要素です。
この記事が、少しでも未経験からWebデザイナーを目指す方の力になれたら嬉しいです。
ここまで読んでくださってありがとうございました。
もし悩んでいることや相談したいことがあれば遠慮なくコメントください。
一緒に頑張りましょう。
応援しています。
ありがとうございました！
コメント