プログラミングのキャリア

【必見】未経験でマークアップエンジニア転職するためにやるべきこと8選

記事内に商品プロモーションを含む場合があります

読者さん
読者さん
未経験からマークアップエンジニア転職するには何から始めたらいいんだろう・・・

こんな疑問にお答えします。

結論からお伝えすると、転職までのステップは8つで下記の通りです。

転職までの全体像を知る

未経験からエンジニアに転職するまで】の工程を把握します。

上記の通り(1〜8)ですが、これをロードマップとして、「自分が現在どの位置にいるのかということを理解しながら学習していきます。

また、その時に「知らなくてはいけないこと」、「知らなくていいこと」があります。

余計なことで気を取られなくて済むよう、「これだけやればいい」というものを学習していくことで、最短の道のりでエンジニア転職を実現することができます。

期間は「学習の進捗」により、「3ヶ月〜6ヶ月」はかかるでしょう。

目標を設定する

あなたは、未経験からwebエンジニアに転職したいと思ってこの記事を見てくださっていると思いますが、そもそも、なぜエンジニアになりたいと思ったのかを考えてみましょう。

  • 「在宅ワークができたらいいな」
  • 「時間と場所を選ばずに働けたらいいな」
  • 「将来、フリーランスになりたい」

エンジニアになることが目的になってしまうと、その後伸び悩んでしまいます。

例えが悪いですが、大学に入ることが目的になって、合格した途端やる気がなくなってしまう学生に近いです。具体的に言うと、スキルが身に付かない、同じレベルをさまよい続ける状態になってしまいます。

せっかくエンジニアになったのなら、常にレベルアップを図って誰かの役に立ちたいものです。ですので、よかったら転職して、その先どうしたいのか、その先の未来を明確にしておいてください。

Photoshopスキルを身に付ける

いよいよ技術を身に付けていきます。

このタイトルを見て、エンジニアなのになぜPhotoshop?と思うかもしれません。

web制作の現場では、以下のような順番でwebサイトが作られていきます。

  1. ヒアリング
  2. ワイヤーフレーム作成
  3. デザイン
  4. コーディング
  5. 確認
  6. 修正
  7. 納品

エンジニアはコーディングを担当するわけですが、デザイナーから上がってきたデザインデータ(画像)を切り分ける必要があります(専門用語でスライスと言います)。

その切り分ける(スライスする)過程で、Photoshopを使用します。

企業の担当者によっては、Illustratorfireworks(Adobeの旧デザインソフト)を使用するところもありますが、経験則で言うと、およそ7割位の会社がPhotoshopを使用しています。

ですから、少なくともPhotoshopは扱えるようになっている必要があります。(Illustratorもできるのが理想)

レイヤーの概念や、表示・非表示の方法スライスなどの操作方法は最低限知っておいた方が良いでしょう。

Adobeのソフトを一つ扱えるようになると、アイコンが似ているのでIllustratorなどの他のソフトも扱いやすくなります。

まずは、今後、実務で使用頻度が高いであろうPhotoshopから学習してみてください。

コーディングスキルを身に付ける

次はコーディングスキルを学習していきます。

おすすめは動画で学習する方法です。プログラミングスクールの方が習得度は早いですが、割と金額が高めなので、最初からいきなり参加するのはおススメできません

まず、無料1,000円〜2,000円程度の動画教材を買って、学習を進めるのがオススメです。

動画以外にも「書籍」で学習する方法もありますが、「書籍での学習」は動画の補助的な役割として、使った方が良いと思います。

現場では「コードを書く」という作業ベースの仕事なので、「動画を見て、自分で書くこと」が一番身につきます。

ピアノの教則本を見てても、ピアノを弾けるようにはなりませんよね?それと同じで、習ったら書く、習ったら書く、を繰り返しましょう。

そして動画は、ドットインストールUdemyなどの学習プラットフォームがあります。
無料で学習するなら前者、有料なら後者です。

ドットインストールは基礎の基礎から解説されています。
Udemyは講師の方がテーマに沿った教材を提供してくれています。

  1. Udemyは10日に1回くらいのペースでセールをやっている
  2. 普段は10,000円、20,000円するような教材も、1,000円〜3,000円位で購入可能(対象外もあり)

Udemyの中でもオススメ教材は以下です。
※PhotoshopとHTML・CSSの基礎知識がほぼ網羅されています

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

 

こちらの教材をオススメする理由は↓です。

  1. 細かい単元に分かれている
  2. 視聴者の理解を促すため教え方に工夫がある
    (わざと間違えるなど)
  3. 現役webデザイナーである

私自身この動画を徹底的に勉強して、作品を作ってweb制作会社やECサイト運営会社からの内定を複数得ることができました。

それくらいのレベル感の情報が詰まっています。
なお、直接お会いしたことありますが、教えることに情熱を持っていて素晴らしい先生でした。

レスポンシブwebデザインスキルを身に付ける

「コーディングスキル」を身に付けた後にやることは、「レスポンシブwebデザインスキル」を学習することです。

「レスポンシブwebデザインスキル」とはスマホ版のコーディングです。

総務省が発表した、2017年度の通信利用動向調査によると、個人がインターネットを利用する媒体はスマートフォンが54.2%パソコンが48.7%とスマホがパソコンの利用を上回っています(2018年5月25日 日経新聞記事より)。

今や、スマホでのwebサイト閲覧は当たり前になっています。
また、実務においても、レスポンシブ対応は当然ながら必須です。

ここまで来るのにコーディングの基本を理解していれば、レスポンシブコーディングを身に付けるのは、そこまで難しくはありません。

こちらも動画を使って学習することをオススメします。

オススメ教材は下記です。
レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!

こちらも先ほどの動画と同じ先生で、実践で作る作品もデザインが流用されており、作りやすいと思います。

また、スライドでの解説も含まれており、こちらも分かりやすい。
レスポンシブはこの動画で学べます。

デザインとコーディング両方の単元があるので、エンジニア志望であれば、Photoshopを使用した章は飛ばしても良いかもしれません。

レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!

ポートフォリオを作成する

次にポートフォリオを作成します。

ポートフォリオとは、いわゆる「作品」のことで、書類選考の際に自分の実績としてアピールできるものです。

「○○ができます」と言葉で言うことはできますが、本当にできるかどうかはモノを見ないと分かりません。

そこで、自身のwebサイトを用意して作品を載せます。

「私は過去、このような作品を作りました」と実際にwebサイトを見せることで、相手に制作物(実績)でもって説明することができます。

1つだけじゃなく複数用意しておくことをオススメします。

SNS上では「ポートフォリオなんていらない」という意見もあるようですが、雇用する側から考えたら、「未経験者でポートフォリオを持っていない人」を雇おうとは決して思わないでしょう。

まず、書類選考に通りません。
ポートフォリオは必ず準備しておきましょう。

ちなみにポートフォリオの具体的な作り方は、こちらの記事が参考になるかと思います。

【ポートフォリオサイトの作り方】
https://webdesigner-go.com/portfolio/website/

jQueryスキルを身に着ける

jQueryは、JavaScriptを簡単にした言語でサイトに動きをつける役割があります。

例えば、このサイトの右下にある「トップに戻る」ボタンがそれにあたります。ボタンを押すと、ページの先頭まで勝手にスクロールして運んでくれます。

これはjQueryの技術を使用しています。

他にもトップページの画像がスライドして入れ替わっているのも見かけますが、それもjQueryです。

jQueryは転職活動をする際、必ず習得しておかなければいけないものでもなく(企業による)、おススメは活動しながら習得していく方法です。

実際、私が転職する時はjQueryスキルは身に付けていませんでした。

募集企業の中には「必須」と記載があるところもあると思いますが、知っていたら良いくらいの位置づけで、転職活動と同時並行で習得していくくらいの温度感が良いでしょう。

転職エージェントの方から聞いた話ですが、募集要項に「必須」と書かれていても、応募して問題ありません
見た段階で諦めてしまうより、少しハードルが高いと思うところでも応募するのが良いです(入社して実務と並行して身に付ける)。

jQueryに関してはこちらがオススメ。

即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう

jQueryに関しては一通りプロゲートでJavaScriptを学習してから、進めると良いかもしれません。

先述の通り、JavaScriptの簡易版だからです。
その後こちらの教材で勉強すると、jQueryの仕組みが理解しやすいと思います。

即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう

転職サポートを受けてエンジニア転職を実現する

技術の習得とともに、転職スキルも必要です。

技術だけできればいいと言うわけではなく、面接でのコミュニケーション能力ポートフォリオを説明する力も求められます。

面接スキルは、技術の習得同様、後から身に付けられるもので、事前に面接の練習をすれば必ず上手くなります。

ハローワーク」や「転職エージェント」などを利用すると、模擬面接を無料でやってくれるので活用すべきでしょう。

最寄りの機関を調べて登録することを強くオススメします。

特に後者では、電話面談もやってくれるので、会場まで足を運ばなくても電話一本で面接の練習が可能です。

最近だとweb面接をするところもあるので、練習もできて一石二鳥です。

とはいえ、最終面接は対面のところも多いはず。
したがって、リアル面接の練習もしておくと良いです。必要に応じて活用させてもらいましょう。

また、ハローワークや転職エージェントでは、「面接でよく聞かれる質問集」などの資料も配布しています。

これらの回答を事前に準備しておくことで、余裕を持ったプレゼンができるはずですので、積極的に活用しましょう。

転職面接は事前に準備して、場数をこなせば必ず上手になります。

まとめ

「未経験でwebエンジニア転職するためにやるべきこと」についてまとめました。

要点まとめ

①転職までの全体像を知る
②目標を設定する
③Photoshopスキルを身に付ける
④コーディングスキルを身に付ける
⑤レスポンシブwebデザインスキルを身に付ける
⑥ポートフォリオを作成する
⑦jQueryスキルを身に着ける
⑧転職サポートを受けてエンジニア転職を実現する

それぞれのフェーズで、必要な知識を身に付けて、エンジニア転職を実現させてください。
応援しています。

ABOUT ME
ゆう
エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。