2017.11.14 Web制作

未経験からフロントエンドエンジニアになろう

 
 
こんにちわ！
酔えれば何でもいいです。システムコーダー部Sです。
「お酒何が好きですか」という質問にはだいたいこう答えます。
 
さて！　近年、Webへ興味を持つ方が増えてきたように感じます。事実、私も魅力を感じ異業種からこちらの世界に飛び込んだ人間です。
 
「自分のサイトを作れるようになってみたい」
「未経験だし、どうしたらなれるのか分からない」
「新しいもの好き」
「数学は公式があるから楽だよねー」
「模写、再現するのすき！」
 
こんなことをお考えの方！
楽しい楽しい【フロントエンドエンジニア】なんていかがでしょう？
花形のデザイナーも良いですが、そのデザインに動きなどをプラスαし、さらにサイトを輝かせる素敵なお仕事ですよ。
  • フロントエンドエンジニアのお仕事って？
  • FHWのフロントエンドエンジニアは、未経験からの入社が100％
  • 勉強方法1：独学で頑張る
  • 勉強方法2：職業訓練校にいこう！
  • 未経験・・でも面接で印象に残る方法はある！
  • FHWでは現在募集中！

フロントエンドエンジニアのお仕事って？

ざっくり言うと、フロントエンドエンジニアとはデザイナーが制作したデザインを元に、動きをつけたり、リンク先に飛ぶように設定したりなど、Web上で表示・機能するように設定する仕事です。
 
求人を見ているとWebデザイナーとひとくくりになっている場合や、HTMLコーダー、マークアップエンジニアなど、業務範囲によって職種名は様々のようです。
企業によっても認識が違うみたいなので、就活の際は業務範囲をしっかり聞いておいたほうが間違いがないです。
 
私も【フロントエンドエンジニア】の業務範囲がよくわからなかったので調べたのですが、【HTMLコーダー（HTML/CSSのみ）】にプラス、PHP・JavaScriptの知識を足した人っぽいです。
「ぽいです」というレベルで申し訳ありません（笑）
 
HTML（文章構造）、CSS（レイアウトや装飾）、JavaScript/PHP（動かしたり・読み込んだり）の知識があれば、「私フロントエンドエンジニアです」って言ってもたぶん・・・あまり・・・怒られないとは・・・思います。
 
ただ、私が一つだけ自信を持って言えるのは、新しい技術を常に追ったり、謎のバグと戦うこと数時間・・・、など大変なこともあります。でも、面白い動きなど、ひと工夫したりするだけでお客様に喜んでもらえるお得なお仕事でもあるということです。
大人になっても褒めてもらえるというのはとてもやる気がおきますよね。

FHWのフロントエンドエンジニアは、未経験からの入社が100％

異業種からの転職組や30代からこの業界に入った社員含め、FHW現フロントエンドエンジニアは、未経験からの入社が100％です。

ちなみに私は紙媒体のみ扱う元【グラフィックデザイナー】で、それまでほぼWebの世界に触れることなく数年・・。その後縁あってこの世界に入りましたが、今ではすっかりこの仕事にはまってしまいました。

正解のない世界で悩みもがき、苦しみ続けるデザイン・・・（※個人の感想です）。でもコーディングはなんたって「仕様を満たせばいい」のです！！
正解がわかりやすい！！
デザインとはまた違った悩みや苦労はあるものの、未経験でもやる気があれば飛び込みやすい世界に感じます。
 
では実際に、未経験からフロントエンドエンジニアになるにはどうしたらいいか、勉強方法や、面接でのアピールポイントをまとめてみました。以下！

勉強方法1：独学で頑張る

「HTML」「入門」「初心者」などで検索すると、とってもわかりやすい解説サイトがたくさんあります。
そのまま独学でスキルをつけ、フリーで活躍される方も多いようです。
 
・・と申しましたが、当時からITとカタカナに非常に弱い筆者はここで早々に挫折します（笑）
その後簡単に作れるWeb作成サービスの存在を知り、初期設定のテンプレートをいじりながら、少しずつコードに慣れていきました。
 

筆者のおすすめ初心者向けWeb作成サービス

プチ・ホームページ サービス

女性らしいかわいらしいテンプレートがたくさんあります。
他の方の作品を見ることができ、勉強になりました。
 
 
こちらは管理画面。

Tumblr（タンブラー）

有料のテンプレートを選ばなければ無料です。アプリもあります。
海外で人気のブログサービスです。
 
 

WordPress（ワードプレス）

大きな企業様も使っているCMS（コンテンツ管理システム。ブログです）。
これに触れておくと最強です。
上記にあげた2つよりも少し上級者向けですが、解説サイトが沢山ありますので頑張ってみるのも手です。
 

「開発者向けツール」でコードに慣れる


赤い枠のところがChromeの開発者ツール
 
各ブラウザには「開発者向けツール」というのがあり、見ているサイトが
「どういったCSSを当てているか」
「どういった内容の時、どのタグを使うか」
「どこを触るとどう変化するか」
など、実際に変換しながら見ることができるので（本当にコード差し変わってしまうわけではないのでご安心を）、仕組みがわかりやすいと思います。実務でも大変重要なツールです。

勉強方法2：職業訓練校にいこう！

独学じゃ全然わからなかった・・・。そんな時は職業訓練校やスクールにいこう！
 
職業訓練校は雇用保険を受給できない求職者が、職業訓練によるスキルアップを通じて早期の就職を目指すための国の無料就職支援制度です。
期間も3ヶ月から半年間など様々です。実際にWeb制作会社への実習期間がついているコースもあります。詳しくはハローワークで相談してください。
 
ちなみに筆者は1ヶ月の実習期間付きの4ヶ月間訓練校へ行き、FHWに就職しました。
Web制作会社の方が教壇にたち、HTML/CSS/JavaScriptの基礎を丁寧に教えてくれます。
その基礎を元に個人やグループで作品を制作、私のところでは面接の練習、書類の作り方なども教えていただき、未経験でも自信がもてるように背中を押していただきました。

未経験・・でも面接で印象に残る方法はある！

どんなに前日ぐっすり寝ても震えるのが面接。未経験でも印象に残る方法を考えてみたいと思います。
私も面接に立ち会うことがあるのですが、
 
・WordPressに少し触れている
・レスポンシブをつくってみた
・JavaScriptで少し動かしてみた
・こういったものを作ってみたい/興味がある
 
のように、不格好でも「自分で調べてやってみました！」という方が印象に残りやすい気がします。
特に「WordPress」に「レスポンシブ」。このあたりは近年はどの案件でも必須の仕様です。
丁寧親切な解説サイトがたくさんありますから検索してみてくださいね。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください！

東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら