元デザイナーが教える未経験でwebデザイナーに転職するポートフォリオの作り方

この記事はこんな方に読んでいただけることを願っています。

 

20代後半未経験でwebデザイナーを志したい方
webデザイナーの専門学校に行こうか迷っている方
ポートフォリオをどうやって作るべきかわからない方

 
最後におすすめの専門学校オンラインスクールをご紹介していますので、ちょっと長いですがよければお付き合いください。
 

 

目的は転職・就職

 

未経験からwebデザイナーになりたい方は、まずとにかくどこかの会社でデザイナーとして働かせてもらうことを一番の目的としましょう!

 

あとはそこでたくさん経験を積ませてもらって、もっといい会社に転職するなりキャリアアップしていけばいいのです。

だからまずはとにかく就職です!

 

 

僕も未経験から始めた立場として、素晴らしいデザイナーになる方法ではなく、デザイナーとして企業に雇ってもらうまでの方法をお伝えできればと思います。

 

少しでも僕の経験がお役に立てば幸いです。
よければお付き合いください。

 

 

26歳、未経験からwebデザイナーに

 

僕がwebデザイナーを志したのは26歳の時でした。
何か漠然と世界に対して発信したいと思いから、webサイトがつくりたいと。笑

 

 

全くの異業種でプログラマーをしていたんですが、働きながらヒューマンアカデミーという専門学校に通い始めました。

 

平日は仕事が終わってから、休日は朝から夕方までずっと専門学校にいました。
平日は課題をこなすのとデザインの練習で、毎日3時間しか睡眠時間がとれていませんでした。でも楽しかったから辛くはなかったんです。眠気と戦うだけ。

 

 

 

専門学校では、学校に行ってパソコンで動画を見ながらひとり淡々と課題をこなすオンデマンドコースと、もうひとつwebディレクターがどんな仕事かを教えてくれる『webディレクション講座』というクラス制のコースの2つを受講しました。

 

合計で45万くらいは払った記憶があります。
さらにadobeのソフト一式、その頃はCS6を学割で買ったのでもう少し高かったかもしれません。あとデザインやレイアウトの参考書みたいな本をいくつか買った気がします。

 

ちなみに、ヒューマンアカデミーの通信講座なら、webクリエイターコースが144,000円です。

●ヒューマンアカデミー通信講座『たのまな』のwebサイトはこちら

 

 

他の専門学校やスクールはもっと安く行けるところもあるので、安心してくださいね。
後ほどご紹介します。

 

 

専門学校のメリット・デメリット

 

専門学校に行けばなんとかなるんでしょ?課題やってればいつの間にかwebデザイナーになってるんでしょ?
って思わないでください。

 

そんな甘い考えだとその40万円をドブに捨てることになります。決して簡単ではないです。

 

 

しかし、専門学校では先生に質問ができるというのが最大のメリットです!
それをうまく使えば必ず成長できますよ。

 

 

 

ただ、専門学校では
教えてくれること
聞かないと教えてくれないこと
があるので、先にご紹介しておおきます。

 

聞かないと教えてくれないことをいかに聞くかというところに注力しましょう。

 

 

ただ、僕の知ってる専門学校が全てではありません。
学校によって、受講するコースによって違うこともあると思うので、検討中の方は電話などで確認されるのをおすすめします。

 

 

教えてくれること

・ツール(photoshop、illustratorなど)の使い方
・ツールの機能の説明と実践
・ボタンなど細かいパーツの作り方
・html、cssの知識
・課題、実践の添削と評価

 

 

adobe photoshop などのツールの使い方や、html や cssの知識は、パソコンの動画を見て自分で勉強する場合が多いです。

 

ただ、専門学校も人件費がかかるので講師を何人も雇って、生徒一人ひとりに付きっきりで指導するわけではないので、あくまでツールの使い方が学べると思っておくくらいがいいでしょう。

 

 

聞かないと教えてくれないこと

・デザインやレイアウトについて
・ポートフォリオの作り方

 

 

photoshopが使えるからと言ってデザインができるということではないんです。

 

デザインの考え方、レイアウトのコツみたいなものは聞かないと教えてくれません。

 

 

このあたりの知識は本を読んだり、世の中のwebサイトをたくさん見て勉強するのがいいと思います。
逆に言えば、世の中にはプロのwebデザイナーがつくったサイトがたくさんあるわけだから、学ぶべき教材はいくらでもタダで見ることができるということでもあります。

 

 

時間がない人にはオススメ

 

極端な話、専門学校に行かなくても phosohop の使い方も html の知識も Google で調べれば全部出てくるんです。

 

さらに、webデザイナーになるのであれば、必ずしもhtmlを熟知している必要はないわけです。だから自分で考えてできる人なら、専門学校に通う必要は全くないです。

 

 

 

しかし、やはり人に教えてもらう、もしくは動画を見ながら実践できるのは、本を読んだり自分で調べたりするより圧倒的に学習効率がいいです。
カリキュラムに沿って順序立てて教えてくれるからこれは間違いないです。あと、学校に行けば質問や疑問に答えてくれる先生がいる、というのも大きなメリットです。

 

だから僕みたいに26、27歳で焦ってる人は専門学校に通われることをおすすめします。
平日は仕事をしてる人でも席を予約すれば好きな時間に行けるし、土日はまとめて時間が取れるから勉強したい人には便利です。

 

あとで説明しますけど、デザイナーを目指していてもhtmlやcssなどのコーディングの勉強はしておいた方がいいです。これは間違いないと思います。

 

 

ポートフォリオは必須

 

あなたがどれくらいデザインができるのか、どんなデザインが得意なのか理解してもらうためには、作品を見せるしかありません。

 

だいたい企業のサイトから採用の応募をするときの入力フォームに、ポートフォリオのURLを記載する項目があります。webデザイナー志望ならポートフォリオは必ず求められます。

 

 

 

僕は、ロリポップというレンタルサーバーを借りてhtmlを組んで、ポートフォリオサイトを作ってました。
htmlとcssの勉強も兼ねて。

 

※ちなみにロリポップは月額換算だと250円と激安です。ライトプランという2番目に安いプランです。さらに安いプランもありますが、wordpressもインストールできるのでこのプランにしておいて良かった!

 

●ロリポップのwebサイトはこちら

 

 

 

だからデザインもしてコーディングもしたので、就活を始めるまですごく時間がかかりました。
効率は悪かったけど、今思えばあの時htmlとcssを勉強しておいて本当によかったと思ってます。

 

僕はwebデザイナーを経てwebディレクターになったのですが、結局webデザイナーもwebディレクターもhtmlやcssの知識があるとお客さんと話をするとき役に立つからです。

 

もしあなたが就職したい会社がある特定のジャンルに特化したwebサイトをつくる会社だったとしたら、そのジャンルのデザインは必ずポートフォリオに入ってなければいけません。
例えば女性用のサイトのデザインに強い会社とか、ECサイトに強い会社とかいろいろありますからね。

 

 

 

あと、もし専門学校に通うなら、通い始めたらすぐにポートフォリオの作成を始めた方がいいです。

 

理由は先生に質問できるから。なんなら、先生にポートフォリオってどうやって作ればいいですか?って質問すればいいんです。

 

そして、動画でツールの使い方を覚えた後より、実践しながら動画を見た方が学習効率がいいからです。これ大事です!

 

 

 

ポートフォリオはコーディングするならレンタルサーバーを借りた方がいいと思うけど、もしコーディングしないならtumblrとかそういう無料のサービスにデザインしたページを画像でポンポン貼っていけばいいので簡単です。

 

ただ一覧性とか検索性とか、見る人のことを考えて作ってください。

 

 

ポートフォリオの作り方

 

 

 

最初はとにかくコピーしてください!

 

 

 

世の中に存在するwebサイトはプロのwebデザイナーが作ったものであり、企業からweb制作会社が依頼を受けてお金をもらって作られたものです。

プロがお金をもらって作ったということはそれだけ市場価値があるということです。
そんなプロのお手本が世の中にはたっくさん転がっているわけです。

 

 

 

ボタンの場所、文字の大きさ、色、写真いろんな要素がありますが、それぞれすべてに全て意味があるのです。質の高いデザインってそういうもんです。

 

それをとにかく模倣(コピー)して、プロがどういう仕事をしているのかというのを学習する。
これがいちばん近道です。

 

 

 

いきなりオリジナルで作るのは非効率です。
だんだん作業スピードが上がってきたりいろんな業種を模倣したら、少しずつオリジナルのものを作っていけばいいと思います。つくりたいものを作ってください。作りたいものが一番得意なはずだから。

 

でもあくまでオリジナルはいろんな業種のサイトを模倣した後ですよ。

 

ポートフォリオには模倣した作品も載せておいてもいいと僕は思います。
ただし、サービス名とか会社名は変えておいた方がいいでしょうね。これコピーしただけだなってバレますからね。笑

 

 

ポートフォリオをつくるときのコツ

ポートフォリオを作るにあたって意識した方がいいことです。

 

・いろんな業種のサイトを作る
・主要な下層ページも1つはつくる
・サイトの目的を考える
・どの作品に何時間かかったか記録しておく
・スマホも絶対作る
・できればコーディングした方がいい

 

ひとつずつご紹介しますね。

 

いろんな業種のサイトを作る

 

業種を変えていろんな種類のサイトをコピーしてください。
この人はいろんなサイトが作れるんだということをアピールするためです。

 

素敵なwebデザインのまとめサイトは検索したらたくさん出てきます。是非いろんな業種にチャレンジしてみてください。
※画像はmuuuuu.orgより転載

 

 

主要な下層ページも1つはつくる

サイトによってはサービスをわかりやすく紹介しているページや、商品の詳細を紹介しているページなど、目的ごとに特徴があるページが存在します。

 

トップページは入り口なのでもちろん作るんですが、こういった詳細なページも作ると「この人はサイトの目的を理解しているな」思ってもらえるはずです。

 

 

サイトの目的を考える

 

これも重要です。

 

ただただ見栄えのいいものを作るのがデザイナーの仕事ではありません。
サイトの目的を達成するためにどう配色してキャッチコピーをどうレイアウトして…とあれこれ考えるのがデザイナーの仕事です。

 

 

なので、このサイトは商品を買ってほしいんだとか、申し込みをしてほしいんだとか、投資家や株主のためによく見せたいだけのサイトだなとか。
コピーするたびにこのサイトは何を目的をしたサイトか考えてください。きっと学習効率も上がるはずです。

 

 

どの作品に何時間かかったか記録しておく

ひとつのサイトのトップページに3週間も4週間もかかっていたら人件費ばかりかかってしまうので、素早く仕事をしてくれるというのも会社にとっては大きなメリットなのです。

会社としてはどれくらいのスピードでできる人なのか、というのも判断基準になります。

 

かかった時間はポートフォリオの中に記載してしまってもいいかもしれません。

 

 

スマホも絶対作る

 

Googleもスマホサイトがないwebサイトは検索順位の評価を下げますと断言している時代です。スマホページは今後絶対作りますので、PC用だけでなく、スマホサイトも一緒につくりましょう。

 

PCサイト作らないのは、特殊な案件だけだと思うので、スマホで表示する際のレイアウトとか、文字サイズ、ボタンの大きさなども勉強しておいた方がいいです。

 

 

簡単でいいからできればコーディングした方がいい

 

できればした方がいいです。
というのもコーディングをわかってるデザイナーとわかってないデザイナーでは、圧倒的に前者の方が重宝されるからです。あと、知ってる知らないでデザインも違ってきます。

 

すごく深く知っている必要はないです。
ただ、コーディングわかってデザインしてますよというのは作業効率的にも良いので面接官ウケもいいはずです。

 

 

チャンスを逃さない

専門学校にいたころ、web制作会社の社長とデザイナーさんがセミナーしにきました。
なんかあったら声かけてくださいって言ってたから、セミナーが終わった後webデザイナーになりたいと話に行ったら、後日面接をしてくださることになり、そこで半年ほどインターンをさせてもらうことになりました。

 

専門学校はそういう機会があることが大きなメリットです。
そういうチャンスを逃さないことも大切です。

 

ただ、専門学校によっては無い場合もあるかもしれないので、申し込みの前に確認しておくといいと思います。

 

 

 

インターンだとお金もらえないのと、東京の方が市場が大きいので必ず東京に行きたいと思っていました。
そのためのポートフォリオをせっせと作り続けました。

 

 

2社くらい試しに中途採用の応募してみたけどポートフォリオを見てもらって書類選考は通りました。面接でダメでしたけど。笑
その後面接対策をしまくって、3社目で東京の制作会社に内定をもらいました。

 

面接についてはこちらの記事でちょっとだけご紹介していますのでよければご覧ください。
●参考記事:面接官が本当に知りたいこと・聞きたいことを考えてみた

 

 

専門学校まとめ

特徴の違う専門学校・スクールをいくつかまとめてみました。
オンラインのものと店舗型のものがあります。

 

資料請求や個別相談会は無料なので、積極的に応募してみてください。
学校ごとに違いがわかっておもしろいですよ。

 

TechAcademy

 

 

週2回マンツーマンでのメンタリング、毎日15〜23時のチャット・レビューサポートで短期間で未経験からオリジナルサイトをデザインできるようになる学習プログラムです。

 

●場所:オンライン(24時間365日)

●面談:サポート時間は毎日15〜23時(8時間)

●料金:webデザインコース

 

プラン名 4週間 8週間 12週間 16週間
料金 社会人129,000円
学生79,000円
社会人179,000円
学生109,000円
社会人229,000円
学生139,000円
社会人279,000円
学生169,000円
メンタリング 7回 15回 23回 31回
1週間の学習目安 40時間 20時間 14時間 10時間

 

TechAcademyの
無料説明会に申し込む

 

CodeCamp

 

 

デザインコースを修了すると、美しく見やすいwebサイトをデザインすることができ、HTML5/CSS3、JavaScriptを利用してデザインしたものを実際のwebサイトに反映できるスキルが身につきます。

 

●場所:オンライン(24時間365日)

●料金:デザインマスターコース

 

プラン名 安心プラン スピードプラン
特徴 ・専属カウンセラーによる個別カウンセリング付き
・仕事や学業と両立したい方向き
腕に自信ありの方向き
料金 ¥298,000 ¥148,000
期間 6ヶ月 1ヶ月
レッスン回数 60回 30回

 

 

CodeCampのサイトで
資料をダウンロードする

 

WebCamp

 

 

WebCampでは、受講開始前に、専任の講師によるカウンセリングがあります。
カウンセリングで、学習内容や受講期間について話し合い、一人一人に合ったカリキュラム作成していきます。

 

●場所:渋谷のみ

●料金:受講期間によって料金が以下のように変わります。

 

受講期間 1ヶ月 2ヶ月 3ヶ月
社会人 ¥118,000 ¥198,000 ¥258,000
学生 ¥59,800 ¥118,000

 

 

WebCampの
説明会に申し込む

 

CREATOR’S HIVE

 

 

単に技術を教えるだけではなく、企業が求めるクリエイティブクラス人材の輩出を目的とした唯一のスクールです。

 

●場所:新宿、表参道、大阪心斎橋

●開講予定:名古屋、福岡

●料金:下記の通りです。

 

料金 432,000円(税込)
期間 6ヶ月間(週1回特訓×20回)
参加条件 ① 学習時間を確保し意欲的に参加できる方
②ノートPCをお持ちの方
③特訓期間後も意欲的に学習を進められる方
特徴 ・特訓期間終了後も講師陣の学習サポート
・就職・転職サポート
・独立支援サポート

 

 
CREATOR’S HIVEの
個別相談に申し込む

 

最後に

専門学校もオンラインのところから、店舗型のところまでいろんな学校があります。

 

学校に通った方がやはり学習効率はいいので、未経験からの転職を志している方はスクールに通われることをおすすめします。

時間や予算とを加味して、自分にあった学校を探してみてください。

 

 

焦る気持ちもあるかもしれません。
僕もあの頃焦っていたので、よくわかります。

 

ただ焦っても結果は変わらないので、限られた時間の中で効率良く確実に勉強をしていってください。

 

 

 

同じような方にこの記事が届くことを願っています。

最後までお付き合いいただきありがとうございました。

元旦からセールやってます ↓

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です