読者です 読者をやめる 読者になる 読者になる

気になることを調べてみたブログ

気になることを調べてみるブログです。とにかく何でも調べます。何も調べてないことも多々あります。

全くの未経験が独学でWEBデザイナーに転職するまで

転職 WEBデザイン アラサー

f:id:shiromatakumi:20151115030056j:plain

28歳の未経験がWEBデザイナーに転職

私は2ヶ月ほど前からWEBデザイナーとして働いています。それまで、WEBデザインどころか、デザインの仕事やプログラミングやWEB関係の仕事すらやったことがありませんでした。

WEBデザイナーなどクリエイティブ業界では28歳で未経験はかなり少数なんです。結構大変です。

そんな私でも、WEBデザイナーに就職することができました。私がWEBデザイナーになるまでにやってきたことを書いていきます。WEBデザイナーを目指している人が読んだ時に、少しでも参考になれば良いなと思います。

勉強を始める前に必要なもの

  • パソコン(当たり前や)
  • Photoshop
  • Illustrator
  • テキストエディタ
  • 教材

もし、PhotoshopとIllustratorの両方そろえるお金がないという方は、Photoshopをオススメします。Photoshopだけでも大半のことはできます。フォトグラフィプランなら、めちゃ安いよ。

LightroomとPhotoshop | Adobe Creative Cloudフォトグラフィプラン

 

テキストエディタはTeraPadを使っていました。無料なので、誰でも利用できます。

最近はSublime Text 3を使っています。このテキストエディタに慣れると他に浮気できないくらい便利です。ただ、最初はタグを打ちまくった方が覚えると思うので、シンプルなTeraPadで良いと思います。

TeraPad - 窓の杜ライブラリ

Sublime Text - Download

一応、Sublime Text の紹介もしておきます。海外のエディタなのでメニューは全て英語なんですが、プラグインを入れると日本語のメニューにすることができます。そして、無料で使えます。

自動で色分けしたり、予測変換が出たり、便利なショートカットが使えたりできます。他にも色んなことができますが、主旨と外れるので省きます。

気になった方は、ググるといっぱい情報が転がってるので調べてみて下さい。

TeraPadでタグをある程度覚えたら、さっさとSublime Textに移ってください。作業効率が圧倒的に違います。

 

独学の勉強方法

本格的に勉強して転職するまでの期間は約10ヶ月くらい。仕事しながらだったので、そんなに詰めて勉強できてなかったと思います。

この間にやってきたことを書いていきます。

全くの素人なら、最初は超簡単な教材を買ってみましょう。いきなりカッコイイWEBサイトを作ろうなんて思うと挫折してしまいますから。

 できるシリーズは超入門なので、初心者には良いと思います。サンプルとかは超ダサいですけど。最初はダサいくらいのレベルで十分です。

「HTMLってこんな感じなんだー」ってのが分かる程度でOK。

(無料電話サポート付)できるホームページ HTML&CSS入門 Windows 8.1/8/7/Vista対応 (できるシリーズ)

(無料電話サポート付)できるホームページ HTML&CSS入門 Windows 8.1/8/7/Vista対応 (できるシリーズ)

  • 作者: 佐藤和人&できるシリーズ編集部
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2014/03/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 

 あと、分からないことがあったときにすぐ調べられるように、こういうポケットリファレンスもあると便利です。ただ、タグの意味とかってググれば簡単に調べられるので、なくても大丈夫です。

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典

  • 作者: 小川裕子,加藤善規,できるシリーズ編集部
  • 出版社/メーカー: インプレス
  • 発売日: 2015/03/02
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 

一通りマスターしたら、次のステップに行きましょう。もう少しマシなデザインのサイトを作りたいなら、これが良書です。私はこの教材は2回通して勉強しました。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

 これ、一からWEBデザインを勉強するなら絶対読むべき参考書。なんせ、最初は簡単な内容なのに、進めていくうちにレスポンシブデザインに対応したり、jQueryが出てきたり、気づけば色んなテクニックを身につけることができます。他にも、bootstrap、SNSボタンの設置などなど紹介しています。しかも、フラットデザイン。

 

 そして、応用編がこちらの二冊

現場でかならず使われている CSSデザインのメソッド

現場でかならず使われている CSSデザインのメソッド

  • 作者: 北川貴清,窪木博士,KLEE Atelier*Spoon,小浜愛香,佐々木恵,棧敷友香子,錦織幸知,前川昌幸,山川祐一郎
  • 出版社/メーカー: エムディエヌコーポレーション(MdN)
  • 発売日: 2013/11/20
  • メディア: Kindle版
  • この商品を含むブログを見る
 

この一冊があればCSSでかっこいいサイトが作れます。MdNさまさまです。

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 作者: 秋元英輔,安藤真衣子,五十嵐亮太,稲葉聡,大串肇,小見祐介,日下部忠之,倉持友喜,小杉厚太,後藤寛一,シオミユタカ,菅原のびすけ,清野奨,高遠和也,高橋としゆき,中村大騎,羽野めぐみ,肥田真紀子,松本奈央,miccweb,宮崎優太郎,森崎嘉友
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2015/08/18
  • メディア: 単行本
  • この商品を含むブログ (1件) を見る
 

 これは比較的最近出た教材で、WEBデザインの最新テクニックがたくさん紹介されています。ここまでくると初心者向けではないですが、ワンランクアップできます。jQueryの知識がないと分からない部分もありますが、CSSだけでできることもたくさん紹介されているので、必須の教材です。

 

もしお金がないという方は、

HTML入門 (全24回) - プログラミングならドットインストール

こちらで勉強しましょう。

それでは、次はデザインの勉強について。

 

 

 

デザインの勉強

 コーディングの勉強って、たくさんネット上に情報があるので勉強に困ることはないですが、問題はPhotoshopとかIllustratorなんですよ。

正直、私は転職前はPhotoshopやIllustratorがちゃんと使えてませんでした。なので、超シンプルなデザインにして、後はHTMLとCSSで頑張りました。これらのソフトの知識があまりなくても、ポイントを抑えればある程度カッコイイWEBサイトは作れます。

詳しいことはこのサイトで紹介されているので、参考にして下さい。

 

勉強に使った教材はこちら

・初心者向け

デザインの学校 これからはじめるPhotoshopの本 [CC対応版]

デザインの学校 これからはじめるPhotoshopの本 [CC対応版]

  • 作者: I&D,宮川千春,木俣カイ,ロクナナワークショップ
  • 出版社/メーカー: 技術評論社
  • 発売日: 2014/07/03
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 

デザインの学校 これからはじめるIllustratorの本 [CC対応版]

デザインの学校 これからはじめるIllustratorの本 [CC対応版]

 

 

とりあえずPhotoShopの基礎をしっかり学ぶ

Photoshop逆引きデザイン事典[CC/CS6/CS5/CS4/CS3]

Photoshop逆引きデザイン事典[CC/CS6/CS5/CS4/CS3]

 

 

でも、一番デザインの勉強になるのは実務なんです。これだけはしょうがない。

「実務ができないから困ってるんだよ!」って言われそうですが、実はWEBデザイナーになる前にデザインの実務をする方法があるんです。

職場の先輩社員にも独学で入社した人がいて、その人はクラウドソーシングでコンペに応募してデザインの練習をしていたそうです。これは目から鱗でした。仕事の依頼が来ないような人でも、コンペなら参加できます。

クラウドソーシングなら日本最大級の「ランサーズ」

日本最大級のクラウドソーシング「クラウドワークス」

デザインの練習にもなって、腕が上がればお金にもなるかもしれない。一石二鳥です。

 

転職活動をする前に、ポートフォリオを作ろう

まず、ポートフォリオサイトは必ず制作しましょう。未経験なら架空の会社とかお店のWEBサイトを作ってみましょう。ちなみに私はアフィリエイトサイトを作っていたので、それを載せました。

デザインはフラットデザインでシンプルに。CSSやjQueryでアニメーションをつけるのがオススメ。色に迷ったら、とりあえずモノトーン+一色。レイアウトは1ページの縦長で今風に。私のポートフォリオはこんな感じでした。

経験がない分、ポートフォリオを充実させることはとても重要です。

ポートフォリオの参考にはこの本を買いました。

クリエイティブ業界を目指す人のための ポートフォリオ見本帳

クリエイティブ業界を目指す人のための ポートフォリオ見本帳

 

 こんなサイトもあります。

応募や面接について

WEBデザインの勉強は楽しいですが、辛いのはやっぱり転職活動。特に、未経験で28歳の私は本当に苦労しました。

面接官は「未経験か~」って苦い顔をします。年齢も年齢ですし。

ここからは応募や面接について書いていきます。

まず悩むのは、派遣会社に応募するのか、直接企業に応募するのか。未経験なら、迷わず直接企業に応募して下さい。

派遣会社はアテになりません。しかも、企業は派遣会社に未経験を求めていません。面接に行く前にはじかれます。それに、求人紹介の頻度も高くありません。

未経験が転職活動をするには、直接企業に応募するのが一番近道です。

 

ちなみに、転職活動期間は1ヶ月半くらいです。

面接テクニック

とりあえず、バンバン応募しましょう。私は年齢的にも(転職活動中は無職だったので)金銭的にも早めに転職を決めたかったので、平日のほとんどは面接を入れてました。

私の履歴書はクソですが、書類通過率は50%くらい。面接まで行っても、未経験なので落ちまくります。

どうせ落ちるなら、収穫が欲しかったので必ず二つの質問をしていました。

「御社はどのような人材を求めていますか?」

「どのような社員が評価されますか?」

この二つを聞きます。この答えをそっくりそのまま、次の面接で使えばいいですよ。

 

A社面接時

私「どのような社員が評価されますか?」

A社面接官「仕事をとってこれるくらいのWEBデザイナーになると良いですね」

 

その後、B社面接時

B社面接官「当社でどうなりたいですか?」

私「仕事をとってこれるくらいのWEBデザイナーになりたいです」

 

名付けて、コピペ面接。

 

あと、WEBデザインとは関係なさそうですが、コミュニケーション能力があるなら絶対アピールしたほうが良いです。私はそこで評価上がったそうです。(後日談)

JavaScriptは勉強した方が良いのか

最近ではWEBデザイナーにJavaScriptは必須になっていますが、私の場合は転職するまでほとんど勉強していませんでした。今必死こいて勉強してます。

JavaScriptはできなくてもWEBデザイナーになれました。JavaScriptを勉強しなかったのは理由があります。

まず第一に、CSS3のおかげでJavaScriptがなくても動きのあるサイトが作れるようになったからです。確かにjQueryのようなライブラリを使えば、CSSよりも豊かな表現ができますが、CSSという土台を固めることが優先事項だと思います。

本当はこっちが大きな原因なんですが、そもそも時間がありませんでした。28歳というギリギリの年齢だと、あれこれ手を出して時間をかける余裕はありません。中途半端にJavaScriptを学ばずに、HTMLとCSSをしっかり学びました。

 

ただ、私の場合は時間がなかったのでJavaScriptの勉強ができませんでしたが、まだ若くて時間もあるなら、JavaScriptは勉強しておいた方が良いでしょう。

もし、私のように年齢的にギリギリで時間がない方はCSSに集中しましょう。CSSだけでも、面白いことはたくさんできます。

 

最後に

未経験の28歳がWEBデザイナーを目指したとき、周りはネガティブな発言ばかりします。「いやー、未経験では厳しいでしょう」って言います。

でも、本当にWEBデザイナーになりたいなら、無視しましょう。忘れましょう。少なくとも、28歳ならまだ大丈夫。

とりあえず、飛び込んでみて下さい。

 

気づいたら、こんなに長文になってた!

 

 

こんな記事も書いてます。

shiromatakumi.hatenablog.com