必要なスキル

未経験からウェブデザイナーになるためのポートフォリオの作り方

更新日:

 

未経験の方がウェブデザイナーを目指すためのポートフォリオをの作り方をご紹介したいと思います!

 

未経験の方がウェブデザイナーとして企業に就職することを目標に、いかに効率よく、そして効果的なポートフォリオを作るかということを重視した作り方をご紹介します。
まずは、自分が作ったサイトを掲載するだけがポートフォリオではないことをまずはご理解いただきたいと思います。
これが何より重要なことだと私は考えています。

 

これからポートフォリオを作ってみたいと考えている方は、是非参考にしてみてください!

 

ポートフォリオの目的を理解する

 

このサイトでは何度も何度もお伝えしていますが、ウェブサイトには必ず目的があります。
あなたがポートフォリオのサイトをつくるなら、そのサイトの目的は企業の担当者にあなたを雇いたい!と思わせて、メールなり問い合わせをさせることです。

 

ただの作品集であれば作ったサイトを乗せておけばいいのですが、そうではありません。
ポートフォリオでは、あなたにはデザインの能力があって、企業にとって有益な人材である、ということをアピールする必要があるわけです。

 

 

なので、作品集以外にあなたのスキルや簡単な自己紹介、可能であれば簡易的な自己PRや職歴などを掲載してもいいかもしれません。
履歴書という文化はやはりまだまだ就職・転職時に必要な書類ですが、見る方だって暇ではありません。
履歴書を読まなくても、ポートフォリオを見てあなたの情報が全て網羅されている方が親切だと思いませんか?

 

ただ、全く関係ない他人に閲覧される可能性はありますので、本名フルネームでは乗せない方がいいかもしれませんね。名前はアルファベットで表記するとか、eメールアドレスはそのまま表記するのではなく、コンタクトフォームを用意しましょう。

 

というように、ウェブサイトをデザインするときは、ユーザーのことを思いやることが大切です。

 

 

ポートフォリオの作り方

ポートフォリオの作り方の手順をご紹介します。あくまで一例ですので、参考にしてみてください。

 

①作るサイトの種類を決める
②作るページを決める
③デザイン作成開始
④コーディングしてサイトにする

 

このような流れで進めてみてはいかがでしょうか?

 

①作るサイトの種類を決める

ウェブ制作会社に入社すれば、いろんな業種の企業からの依頼がきます。
なので、得意な業種のデザインを任される時もあれば、そうでないデザインをしなければならない時もあります。
ただ、全ての業種のデザインをひと通りつくれるようになるのは、なかなか難しいです。得意な分野、不得意な分野があって当然だと思います。

 

しかし、採用担当者にはあなたが持つ『デザインの幅広さ』を知ってもらうために、ポートフォリオにはできるだけ幅広くいろんな種類のサイトを掲載するのが良いでしょう。

できれば、業種ごとに5〜10サイトは作りたいところです。

 

また、スクールや専門学校に通われる場合、ツールの使い方などを全て勉強し終わってからポートフォリオの作成にとりかかるのではなく、スクールに入ったらすぐにポートフォリオ作成にとりかかることをおすすめします。
実践を交えながら、スクールで勉強をする方が圧倒的に効率が良いです。

 

②作るページを決める

webサイトにはいろんなページがありますが、全部のページを作るのはあまりにも大変です。
なので、主要なページを3ページほど作れば十分です。ポートフォリオの目的はあくまで、企業の採用担当にあなたのデザインのバリエーションをみてもらうことです。

 

トップページは当然。
商品を扱っているwebサイトなら、商品の詳細ページは必ず作りましょう。あとは、コンセプトページや会社のメッセージページなどは、凝ったデザインのサイトも多いです。
その辺りを作れば必要最低限だと思います。

 

あとは、作りたいページがあればどんどん作ってください。

 

③デザイン作成開始

Adobe社のPhotoshop(フォトショップ)というソフトを使ってデザインをしていきます。
ウェブデザイナーに必要なツールやソフト

 

制作会社にとってはデザイナーの作業時間というのは非常に重要です。
デザイナーの作業後、コーディングに入り、その後、エンジニアによってシステム構築が行われるので、デザイナーが作業を早く済ませるのは会社の利益にも大きく影響してきます。

 

なので、少しでも素早くデザインができます!ということをアピールしていきましょう!
そのために、デザインに費やした作業時間を記録してポートフォリオに明記してください!最初は多少遅くてもいいです。ただ、作業を重ねるにあたり、だんだん早く作れるように意識しましょう。
あわよくば、「以前はこの部分に作業時間がかかりすぎたので、今回はこの部分の時間短縮を試みました。」というように学習の過程などを併記して、意識の高さをアピールしましょう。

 

ただ、ひとつのでざいんに何百時間もかけられないので、多少時間を盛っても構いません。
構想を練る段階の時間は含めず、デザインの作業時間だけを計測しておけば大丈夫です。

 

また、勉強を始めた時期も記録しておきましょう。
私は3ヶ月でここまでデザインができるようになりました。すごいでしょ?とアピールするのもひとつの方法です。
成長スピードの速さとヤル気を感じ取ってもらえる可能性もあります。

 

④コーディングしてサイトにする

できればデザインだけで終わらず、コーディングをしてポートフォリオサイトに仕上げたいです!
紙やpdfではなく、ちゃんとブラウザで見えるサイトにしましょう。

 

その方が絶対に有利です。
理由は後ほどご紹介します。

 

 

何からどう始めればいいの?

何から始めればいいの?という方は、とにかく世の中の好きなサイトを模倣してみてください。とにかく好きなデザインをコピーするのです。最初は時間がかかりますが、簡単な方法などありません。

 

見ていて素敵だなぁと思うデザインでも、実際に自分で作ってみると作り方がわからないということなんて頻繁にあります。

 

・文字の周りにフチ(境界線)がついている
・グラデーションがかかっている
・四角いボタンの角が丸くなっている
などなど…
作り方のわからないところがたくさん出てくると思います。

 

そんなときは、わからないところをスクールで先生に質問してください!

 

 

それを作れるようになることで、デザインの引き出しが増えてきます。プロがお金をもらって作ったデザインから学ぶのです。
文字の大きさや行間の幅、色、いろんなところに共通します。
目に見えやすいところ以外も同様です。例えば、隙間や余白の取り方も同じです。

 

デザインを上達させたいなら、最初はその繰り返しで十分です。
こことここのラインが揃っているとか、ここはあえて隙間を開けて目だ立てるようにしているんだなとか、そういうところに気付けるように、いろんなサイトを見て、模倣して、考えてみてください。

 

 

たくさん模倣をしたら、内容を変えたり商品を変えたりして、別のオリジナルサイトを作ってみてください。
いきなり作りはじめるのではなく、紙にサイトの構成を下書きしておくと良いでしょう。ちゃんとサイトの構造が出来上がってから、フォトショップで作業をはじめてください。

 

デザインの意図

作りたいサイトがある方はそれをどんどん作りましょう!

 

同じ業種のサイトを参考にすると尚良いと思います。世の中に公開されているサイトは何らかの目的があるので、それを考えながら取り組んでもらうとより意味のある学習になります。

 

たとえば、ドトールのサイト。

 

 

こちらのURL(https://www.doutor.co.jp/dcs/)は、商品の情報や季節のメニュー、アルバイトの採用などを掲載しています。
なので、一般消費者向けのサイトです。

 

 

 

 

逆にドトールのこちらのURL(https://www.doutor.co.jp/)は、商品情報ではなく、グループのサイトへのリンクやIR情報などが掲載されています。
なので、投資家の方や、株式会社ドトールコーヒーの正社員採用などが目的のサイトだということがわかります。

 

 

また、トヨタ自動車のサイト。

 

 

こちらのURL(https://toyota.jp/)は、一般消費者向けに車種を探しやすいレイアウトになっています。

 

 

しかしこちらのURL(https://www.toyota.co.jp/)は、企業情報や技術、歴史、またCSR活動などをメインに掲載し、投資家向けのサイトであることがわかります。

 

 

 

このように誰のための、何のためのサイトかを考えながら、いろんなサイトを見ていくと世の中のウェブサイトのあり方がわかってきます。

 

また、作ったサイトにもそういった意図を込めて、デザインに関する説明をしましょう。
「このサイトは、こう言った属性のこんな年齢層の方に、〇〇をしてもらうためのサイトです。故に、メインビジュアルの部分にコンタクトフォームへの導線を設けアクセスを促すような構成にしています。」

という感じ。

 

これを見た制作会社の採用担当者は、「あ、この人はサイトに目的意識を持っているな」と思ってもらえます。
ディレクターの素質もあるんじゃないかと思ってもらえるかもしれませんね。

 

 

ポートフォリオ『サイト』にしたい

 

今まで割とコーディングすることを前提に話をしてきましたが、できればコーディングしたいです。

 

というのも、コーディングを知っているデザイナーの方が、コーディングをイメージしながらデザインができるので、コーダーが作業しやすいデザインが出来上がります。

 

また、デザイナーは必要に応じてコーダーにデザインの詳細を説明し、細かい動きなどの指示をする必要もあります。
なので、デザイナーは少なからずコーディングの知識があると、コーダーとの連携も取りやすく、業務もスムーズに進めることができます。

 

紙やpdfよりサイトの方がいい理由

私はポートフォリオサイトを作って、それを貼り付けて行きたい企業にメールを送りまくりました。笑
4回ほど面接にこぎつけて、3回目の面接で東京の制作会社に就職することができました。

 

ウェブサイトとして作品集を用意しておけば、企業の担当者がクリックすれば見ることができます。また同時に、ここまでコーディングができるんだということの証明でもあります。

 

紙に印刷してウェブサイトのデザインを持っていくのは決して悪いことではありませんが、やはり実際のブラウザと紙で見るのは全くイメージが違います。
また、印刷によってブラウザで見る色と違ってしまうこともあるのと、ネット上で見れないと私がしたような営業メールが送れません。

 

pdf でも送れますが、やはりウェブサイトにした方が見栄えは良いですね。

ウェブデザイナーにひつようなスキルや知識(コーディング)

 

ポートフォリオには顔写真も

私は自分がどんな人かを知ってもらった方が就職しやすいと思ったので、惜しみなく顔写真も載せました。履歴書に使う写真をそのまま載せただけです。

 

しかし、何か害があったわけでもありません。

 

本名は伏せておきましたが、生年月日や出身など基本的な情報もある程度掲載しました。
それが良い方向に作用したのかもしれません。

 

 

独学でもポートフォリオは作れなくはない

 

独学でもポートフォリオは作れないことはないでしょう。
個人的には専門学校・スクールに通われることをおすすめしますが、予算的に難しいという方は独学でポートフォリオ作成に挑戦されてもいいかもしれませんね。

 

独学でもスクールに通っても、すでに世の中にあるサイトを模倣するのはすごく効果的なのでおすすめです。
ただ、独学で勉強される場合は、ツールの使い方やhtml・cssの勉強に一番時間がかかるはずです。根気よく進めてください。

 

また、スクールにいくことでお友達ができたり、先生にわからないことを質問できたりするため、モチベーションを維持することもできます。

 

おすすめの専門学校・スクールはこちらの記事でご紹介しています。

社会人・未経験からウェブデザイナーになるための専門学校

 

 

未経験のウェブデザイナーにおすすめの本

まず、フォトショップの使い方をある程度覚える必要があります。
なので、フォトショップの使い方を説明した本は1冊読んでみてもいいかなって思いましたが、実際に作業しながらわからないところを調べる方が確実に効率的に勉強できます。

 

やり方はネットで調べればだいたい出てくるので、フォトショップの使い方の本はなくてもいいと思います。心配なので一つ持っておきたいという方は、こういった入門書があると便利かと思います。

 

 

 

また、ウェブサイトに掲載するコンテンツのレイアウトやバランス感を養うには、この本がおすすめです。

 

 

 

レイアウトの考え方はこの本一冊で十分に身につくと思うので、後は実践あるのみです。

 

 

未経験のウェブデザイナーにおすすめのサイト

先進的な技術とトレンドのデザインを使ったサイトが集まっている、ウェブデザインまとめサイトのようなものがたくさんあります。
デザイナーさんが運営しているものも多いので、是非ブックマークしておいてください。

 

http://muuuuu.org/

 

 

フォトショップの使い方や、TIPS、おすすめの無料フォントなど、フォトショップに関する最新の技術をまとめてくれているサイトがこちら。

 

http://photoshopvip.net/

 

すごく質の高い情報が集められているので、非常に役立ちます。

 

 

また、写真素材もウェブデザイナーにとっては大切です。
写真がよっと素敵なだけで、一気に素敵なデザインに見えるから素敵です。

 

http://o-dan.net/ja/

 

海外の写真しかないのですが、風景や物などであれば使える写真もたくさんありますよ。

 

 

是非、ご自分の好きなサイトからコピーをして楽しんで学習してください。それが一番上達に繋がります。

 

私も当時年齢のこともあって焦っていましたが、焦っても仕方ありません。ひとつひとつ着実にやっていきましょう。

 

 

 

こちらで、おすすめの専門学校についてはこちらの記事で詳しくご紹介しています。
社会人・未経験からウェブデザイナーになるための専門学校

 

オンラインなので全国どこでも!
おすすめのスクールはこちら

 

Copyright© 初心者・未経験からウェブデザイナーになるには? , 2019 All Rights Reserved Powered by AFFINGER5.