Web

Web制作

hero

未経験からのエンジニア転職

 

内容

 

未経験からIT業界への転職の一例として参考になれば。

✅自己紹介

✅お仕事紹介

✅職業訓練校でやってきたこと

✅就活の事

✅他に役に立ちそうなこと

 

講話をやるようになったキッカケ

 

自分が生徒だった時、講和に来る先生が凄い人ばかりで、面白かったが参考に出来なかった。

など

 

自分だったら、もっと生徒だった時に知りたかったことを伝えることができるかも 🤔？！

 

 

🤗自己紹介

 

藤本 優希（Yuuki Fujimoto）1986/07/12

 

 

 

キャリア①

【宮崎交通】

～2020/03/31

 

仕事内容（事務員）

→　「ITとは無縁の会社からスタート」

https://www.miyakoh.co.jp/kashikiri/lineup.html

 

 

キャリア②

【職業訓練校】ライブビジネススクール

2020/05/12 - 2020/11/11

https://livebusiness.jp/

 

 

キャリア③

【ジーニアスウェブ】

2020/11/04 - 2022/08/31

https://www.genius-web.co.jp/

記念すべきIT系の会社へ就職！

Webサイト制作やWebマーケティング、ECサイトなど多くのことを学びました。

※プログラミングはほぼないので転職。

 

 

キャリア④

【はばたーく】（旧：グローバルテクノロジー宮崎）

2022/10/01 ～

https://www.haveatalk.jp/

バングラディシュ、ミャンマー、ドイツ出身のエンジニアが在籍するグローバルな会社。

 

 

🌐Web系の会社ってどんなお仕事？

私がIT未経験のとき、いったいどんな職業なのかイメージできていませんでした。

自分の進みたい道を見つけるヒントになれば👍

 

業務内容

 

 

➡️ Web広告

 

➡️ Webサイト制作のだいたいの流れ

引用：https://up-point.jp/blog/detail/675/

 

 

➡️ よく聞くワイヤーフレーム(W/F)とは？

引用：https://www.edrawsoft.com/jp/website-wireframe-templates.html

 

 

➡️ ワイヤーフレームを作るTool

Adobe XDやFigmaというツールが有名ですね

→　プロトタイプとか作れるので、実際の画面遷移などが分かりやすい

 

 

🏝️LP(ランディングページ)とは

 

検索結果や広告などを経由して訪問者が最初にアクセスするページ

引用：https://www.kop.co.jp/blog/ads/3565/

 

※副業とかで取り組むなら、おすすめかも。

 

 

デザイン制作

デザイナーが作ったデザインカンプなどを元に、コーディングしていく。

🔽デザイナーの仕事振り

 

Webサイト

引用：http://pae-dc.com/

 

広告用、サイト用のバナーデザイン

 

X（Twitter）の例

 

 うん、素晴らしい！！！

 

 

Web広告とは

https://www.cyberagent.co.jp/ir/superiority/internetad/

 

 

🤔 Webサイトをどうして作るのか？

商品を売りたい

などの目的があるので、「効果の出る」「売れる」サイト作りが大事！

 

💰「売れる」とは

📌 コンバージョン（CV）：訪問者がホームページの目標としているアクションを起こしてくれた状態のこと

 

Webサイト制作の会社に入ると、CV（コンバージョンという）言葉をよく聞くようになります。

 

 

社内で使用しているTool

興味あれば。

 

👥コミュニケーション

 

🎨デザイン

 

📝エディター

開発の定番エディタ「VSCode」

 

AI搭載エディタ「Cursor」…VSCodeからForkして作られている。

 

その他のエディタ：nano、vi、vim、NeoVim、Micro、Emacs

ターミナルでテキストを編集できる。サーバーなどのインフラ構築時によく使う。

 

vim

※システムエンジニア目指すなら、Vimは触っとくといいかも。（Webサイト制作だったらあまり使わないです）

 

 

FTPクライアントソフトウェア

 FTPとは「File Transfer Protocol」の頭文字をとったもの。 
要するにファイル転送（送受信などの通信）に係る決まり事です。
※ちなみに、HTTPは、Hypertext Transfer Protocolです。

 

 

 

タスク管理

 

 

会社や案件によって違うので参考までに。チーム開発で、タスクのチケット番号を、Gitのブランチ名にすることもあるよ。

 

 

エンジニアの種類

まだ勉強を始めたばかりでどんな仕事があるのか、どんな技術を使っているか、イメージが難しいと思います。

参考に僕が思うスキルセットを書いてみました。

どの道に進むか考えている方は参考にしてみてください。

 

 

🔽フロントエンドエンジニア（Webサイト制作）のスキル

※HTML,CSS,JsvaScriptはブラウザで動くよ
※フレームワークは用意されている「骨組み」みたいなもので、ライブラリは「部品」みたいなイメージ。
※jQueryやBootstrapは、使わないことも増えてきましたが、まだ勉強していたほうがよい。

 

 

🔽フロントエンドエンジニア（Webアプリケーション）のスキル

※Webアプリケーションとなると、JavaScriptやPHPなどの言語をがっつり使うこともあるので、フロントエンドエンジニアとバックエンドエンジニアの境目があいまい。

 

 

🔽バックエンドエンジニア

※とにかく沢山

 

 

🔽ネイティブアプリエンジニア


 

🔽インフラエンジニア

 

 

どんな風にシステム開発しているの？

 

🔽コード管理

https://github.co.jp/

 

 

 

 

🔽インフラの構築

などがあります。私はほぼAWSを使ったクラウドでの構築でした。 

 

 

 

インプットの参考

 

👇動画で学ぶなら

 

 

👇エンジニア向け

 

 

👇デザイン

 

 

👇ニュース

 

👇個人的におすすめのXアカウント。

 

 

CodePEN

ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービス

 

 

 

 

フロントエンドエンジニアにおすすめの書籍

Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門

このサイトも、こちらの書籍を参考に作りました。

 

ノンデザイナーズ・デザインブック

 

動くWebデザインアイディア帳

Webサイトの動きはJavaScriptで作るのですが、よく使う動きがまとめられていて分かりやすいです。また、購入者には、実際の動きが見れるデモページのログイン情報を教えてくれるので、Webサイト制作するなら持っておきたい一冊ですね。

 

WordPressオリジナルテーマ制作入門

 

CSS設計完全ガイド

 

 

バックエンドエンジニアにおすすめの書籍

「技術書」の読書術

 

リーダブルコード

 

ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装

 

図解! Dockerのツボとコツがゼッタイにわかる本

 

AWSではじめるインフラ構築入門 第2版 安全で堅牢な本番環境のつくり方

 

Railsチュートリアル

 

 

デザイナーにおすすめの書籍

配色デザイン良質見本帳

 

動くWebデザインアイディア帳

 

Webデザインのロジック

 

けっきょく、よはく。

 

 

なるほどデザイン

 

🔽書籍以外にも

🔗プログラマが知るべき97のこと

 

🔽どんな本が人気があるか知りたければ

ITエンジニア本大賞2023

 

 

業務効率化、高速化のために

「もっと、、　もっと速くコーディングをしたい！！！」と思ったら、次のことを意識してみよう。

 

 

便利なツールをいくつか

🔽クリップボードアプリを使わないなんてモッタイナイ！

 

🔽作業しやすいように画面へ配置するよ

 

🔽Chromeの拡張機能にも便利なものが多い。

 

🔽その他便利なもの

 

 

職業訓練校の授業と別でやってきたこと

せっかくプログラミングを学ぶなら何か作ろう！（知識も定着するし、就活のときのポートフォリオにもなるよ。）

そして、学校の勉強だけでは足りない！！

 

 とにかくアウトプット❗❗

 

半年間は以外に短い！使える時間もあまりない！

 

 

🏃時期：2ヶ月頃

この先の就活で、宮崎にどんな企業があるか調べるだろうから今のうちにやっとこう。

✨学んだこと：

 

 

🏃時期：2ヶ月頃

毎日、時間割と必要な教材、日直を確認していることに気付く。

この作業を自動化できないか？

→　LINEグループに明日の授業と日直を自動でお知らせする機能をつける

✨学んだこと

 

 

🏃時期：2ヶ月頃

Javaで席替え

【条件】

✨学んだこと

 

 

🏃時期：3ヶ月頃

スプレッドシートだとスマホで情報が確認しにくい(スマホ持っていない人もいた)

基本的なHTML、CSS、JavaScript、PHPの練習になった。使いやすさを追求する目線で作れた。

結果、就活の時もポートフォリオとしても使えた。

 

✨学んだこと

 

 

🏃時期：4ヶ月頃

Webサイトの記事更新がだるい。。。

そんなときにWordPressを授業で習って革命！これだ！

（授業内容の解説や参考サイトなど）

✨学んだこと

 

 

🏃時期：4ヶ月頃

 

Javaお絵描きプログラム

✨学んだこと

 

Javaシューティングゲーム

✨学んだこと

 

ブロック崩し with 席替え

目的：面白く席替えしたかった。

✨学んだこと

 

 

時期：5ヶ月頃

 

✨学んだこと

 

いろいろなことに挑戦した

 

やって良かったこと

 

やらなければ良かったこと

 

 

就活について

当時、20名のクラスで卒業時に 就職が決まっていた人は、、、

 

 

私がやったこと（参考）

 

面接で聞かれたこと（未経験のとき）

⭐⭐⭐：ほぼ聞かれた
⭐⭐：普通
⭐：少ない

 

面接で聞かれたこと（業務経験あり）

 

技術試験

あったりなかったりです。
コーディング試験であったり、質問だったりです。

 

 

求人の探し方

 

自分の強みを探そう！

プログラミングを学び始めたばかりでスキルに自身がなくとも、あなたの強みがあるはず！
好きなことや前職の経験など。

 

経理　✕　プログラミング・デザイン

結婚式場　✕　プログラミング・デザイン

医療　✕　プログラミング・デザイン

など。

 

 

【就職後】未経験から就職後に思ったこと

 

Web系で大変だと思った所

・納期がきついと残業やばい。

・社員数が少ないと、色んなことができないといけない（多能工化）

　　→　営業、マーケティング、ディレクター、コーディング、デザイン、

　　　　「お客様のサイトが色んなもので構築されているので覚えるの大変！」

 

◆サイト構築

◆ECサイト

 

プログラマー

🟠覚えること多すぎる！

人数が少ない会社も多いので、一人で何でもしたりします。

勉強していない言語で開発をすることもあります。

 

世の中には沢山のツールやライブラリなどがあり、便利でもあり覚えることも多くなり😭

 

🟠Gitでまず苦労する！

ソースコードの管理やチーム開発には必須です。どんなときにどんなコマンドが必要か覚えないといけません

 

🟠エラー文はちゃんと読もう！！

エラー文はシステムを作った人からのメッセージ。

 

例えば、以下のようなエラーが出たとき、後輩はすぐにWebで調べていました。

英語だらけのエラーでも逃げずに読んでみよう！

・リンクまで付けてくれている。
・一次情報（公式ドキュメント）を英語でも読もう！
・ソースコードの品質を上げる

 

 

フリーランス

どういった知識が最低あれば出来るんだろ～？

 

Webサイト制作の場合

 

⚡　▼▼現在編集中ですが参考程度に▼▼

https://www.moncoure.com/web/skills

 

その他

・開業届

・国民年金、国民健康保険などの手続き

・確定申告

・口座、クレジット、印鑑、名刺、、、

 

エンジニアの単価

サイト制作かシステムエンジニア、経験で単価は違う。

参考：システムエンジニアの単価

引用：https://prtimes.jp/main/html/rd/p/000000011.000065207.html

 

 

自己管理や自分の単価を考えるのが大事！

 

 

おまけ

IT業界のことやニュースや便利なサイトなど、色々と共有します。

 

 

日本政府はこんな社会を目指している

Society 5.0とは（内閣府） https://www8.cao.go.jp/cstp/society5_0/

サイバー空間（仮想空間）とフィジカル空間（現実空間）を高度に融合させたシステムにより、経済発展と社会的課題の解決を両立する、人間中心の社会（Society）

 

 

メタバース

メタバース (英: metaverse) は、コンピュータの中に構築された3次元の仮想空間やそのサービスを指す。（wiki）

・総額100億ドル（1兆円）を投資するとし、社名も「メタ（Meta）」へと変更

 

引用：https://prtimes.jp/main/html/rd/p/000000057.000080034.html

 

AIと仕事する

AIがすごいので時代が変わりますね

Chat GPTの登場で、働き方や学び方、仕事の仕方など大きく状況が変わってきています。

まずは使ってみてください！

 

Chat GPT　人間のような自然な会話ができるAIチャットサービス

 

Chat GPTの分かりやすい資料

ChatGPT - Azure OpenAI 大全

 

 

画像系のAI

「Stable Diffusion」　画像生成

https://ja.stability.ai/stable-diffusion

 

「Midjourney」　画像生成

https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F

 

Clip Drop 

不要な物を消したり、写真の背景を変えたり、AR機能もある

https://clipdrop.co/

 

Luminar NEO

画像を鮮明にしてくれる（インストールするタイプ）

https://skylum.com/jp/luminar

 

remove bg

写真や画像の背景をワンクリックで消してくれる

https://www.remove.bg/ja

 

getimg.ai

アップロードした画像を何パターンかのAI画像に変えてくれる

https://getimg.ai/

 

runway

画像の背景を拡張、動画の人物や背景を消したりできる

https://runwayml.com/

 

コード生成AI

 

GitHub Copilot

GitHubがOpenAIと共同開発したAIベースのペアプログラミングツールです。
主にコードの補完や提案をリアルタイムで行い、プログラマーが効率的にコーディングを進めるためのサポートを提供します。
Copilotは、コードの一部を入力すると、次に書くべきコードや関数の提案を行うほか、コメントからコードを生成する機能もあります。

 

 

 

動画生成AI

Vrew

テキストから動画生成

 

 

クリエイティブ

DESIGHNS.AI

ロゴ、ビデオ、バナー、モックアップをA.I.で2分以内に作成

https://designs.ai/

 

STOCKIMG.AI

Book Cover、Logo、Posterなどを作成

https://stockimg.ai/

 

uizard

手書きのワイヤーフレームをデータに整形してくれる

https://uizard.io/

 

 

NFT・DAO・仮想通貨　

私も一時期ハマりました

 

NFT（Non Fungible Token：非代替性トークン） 

一般的な暗号通貨（ビットコインやイーサリアムなど）と異なり、NFTは「唯一無二」のデジタル資産を表し、各トークンが異なる価値を持ちます。
NFTは、アート、音楽、ゲームアイテム、スポーツカードなど、さまざまなデジタルアイテムの所有権をブロックチェーン上で記録するために利用されています。

 

DAO（Decentralized Autonomous Organization：自律分散型組織）

DAOでは、特定の管理者や中央集権的なリーダーが存在せず、ブロックチェーン技術を利用して組織のルールと意思決定プロセスをコード化し、自動的に運営されます。
メンバーはスマートコントラクト（自動化された契約）に基づいて意思決定に参加します。

 

NFTアート

高額で取引されるものも

 

Beeple『Everydays: the First 5000 Days』（75億円）

Beepleが13年半の歳月をかけて制作した5000枚の作品をコラージュしたもの

 

CryptoPunk （13億円）

総発行数は10,000点で、その1つ1つが異なる「キャラクター」と「属性」の組み合わせを持つ、唯一無二のものとなっています。

引用：https://www.christies.com/lot/lot-6316969

 

 

山古志（やまこし）村の事例

 

NFTゲーム

仮想通貨を稼げるゲームも流行った。

 

 

クラウドファンディング

寄付市場のデジタル化

・応援するためにお金を払う
・合理的な資本主義らしくない新たなお金の流れ

→最初はなんだか怪しいという印象があった。これも資本主義で動いている社会の影響。

 

宮崎でも、「ヤギパーク」の事例あり。

https://readyfor.jp/tags/miyazaki

 

 

シェアリングエコノミー

新しいビジネスが生まれている。

・NOT A HOTEL

https://notahotel.com/nft

 

 

よくある質問

Q.訓練校時代の勉強量は一日何時間くらいでしたか？

平均で2~3時間はしてたかもしれません。

 

Q.残業は多いですか？

残業は月に0～20時間くらいな気がします。同じ企業でも「人や部署、納期によって変わります」。

 

Q.転職時に何社くらい面接を受けられましたか。

僕の場合は8社くらい受けて、内定は2社くらいでした。

 

Q.前職の退職理由は何と言いましたか？

正直に言っていいかと思いますが、出来るだけ前向きな言葉に変えた方がいいとは思います。

 

Q.ママさんエンジニアって活躍してますか？

はい、活躍されてます！会社にもよりますが、「時短勤務」や「リモートワーク」などもあり、働きやすい職場もあるかと思います。

 

Q.ITパスポート取得は意味あると思いますか？

僕は意味はあると思います。ITパスポートも勉強しないと取れないですし、ITの基礎的な知識を学べるかと思います。就活への準備が「ITパスポートを取得する」のみだったら、アピールする魅力としては弱いかと思います。

勉強するなら、参考書の他に「過去問道場」のサイトがおすすめです。

ITパスポート過去問道場

 

Q.簡単に取れる資格ありますか？

「Webクリエイター認定資格」などはコピペだったので簡単でした。

 

Q.どんな資格を持っていますか？

職業訓練校の卒業時は「Webクリエイター認定資格」しか持っていなかったです。現在は、「応用情報技術者認定資格」を取るために勉強中です。

 

Q.辞めたいとか思ったことは？

今の会社ではないですが、興味がない仕事で忙しい時は辞めたくなります。

 

Q.１日のスケジュールを教えてください！

ブログラマー：チームでタスク管理のアプリを使っていることが多いです。不具合対応など、優先度が高いものから取り組みます。タスクごとに目安の時間も登録していたりするので、それよりも早く実装出来るように頑張ります。

 

Q.おすすめのPCを教えて欲しいです。

僕はMacが使いやすくて好きですが、勉強するならWindowsでもMacでもいいかと思います。

興味があれば「自作PC」なども面白いかと思います。Linuxの知識もあるとエンジニアとして強いです。

 

Q.PCにダウンロードしておくと今後の私生活においても役に立つサイトはありますか？

・クリップボードのツール
・ランチャー系のツール

などは入れておくとPCが使いやすくなります。

PCのツール以外だと、

・Notion
・Miro

は勉強やメモするのに役立つかと思います。

 

Q.ゲームを作るとしたらどんなのを作ろうと思いますか？

WebGLに興味があるので、それで何か作ってみたいかもです。

 

Q.ポートフォリオをどうやって企業に見せたらいいですか？

・有料のレンタルサーバーを借りる

・無料のサーバーを使う （XFree、fly.io、Render.com、GitHub Pages、Vercel、Google Cloud Platform、Netlifyなど）

・NotionやFigma、Studioなどにスクショ貼って、共有URLなどもあり。簡単。

・オンライン面談なら、画面共有する。

※宮崎では、URLで誰でも見れる形でポートフォリオを持ってくる応募者が少ないらしい。

 

Q.LINEの通知機能は何の言語で作ったんですか？

→　A.GoogleスプレッドシートとGASで作成しました。

 

Q.LINEの通知機能は私たちが習う言語でも作ることは可能ですか？

JavaScriptを学習すると思うので作ることは可能です。

また、参考記事なども沢山出てきますので、まずは真似して作ってみて、自分なりにカスタマイズしていくのがいいかと思います。

 

Q.どのくらいの期間で作りましたか？

→　A.　コード自体は数十行でしたが、1週間くらいかかりました。

 

Q.会社ではWindowsとMacどちらが多いですか？

私が経験した会社では、

・Webサイト制作の会社：Macが多い。（画面がきれいだから？）

・システム開発：Windows

私の会社では、SSDにUbuntu Desktopをインストールして、Linuxを普段使いしている人も数名います。

 

Q.PCを買うなら何がおすすめですか？

好きなPCを買うのが一番良いです。

 

無理やりおすすめするなら

・コスト重視　→　Windows（Macは高い）

・画面の色とか気にするなら　→　Macのディスプレイが綺麗

・システム開発なら　→　Windows。WSLでLinuxも動かせる。

・誰とも被りたくないなら　→　WindowsとSSDを買って、Linux OSをインストールして普段使いしよう！

 

 

訓練校のときにやっていた方が良さそうなアウトプット

 

開発

 

マークダウン記法で記事を書く。

 

やってみるといいかも

 

資格

🔗過去問道場

https://www.fe-siken.com/fekakomon.php

 

 

ポートフォリオの参考におすすめ

 

WordPressオリジナルテーマの作り方①（ファイルの準備編）

もり

Shin Coding Tutorial

Code With Antonio

freeCodeCamp.org

 

Rails Girls ガイド　RubyのフレームワークRuby on Railsについて学習できる

https://railsgirls.jp/

 

面白い記事や動画など

【個人開発】駆け出しエンジニアのポートフォリオ作りを手助けするサービスを作りました

【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ

有名企業のエンジニア向け研修資料まとめ

WordPressオリジナルテーマの作り方

商用利用無料、おしゃれでかわいいフリーイラスト素材の総まとめ: 海外編

Webデザインをサクッと実装【コードスニペット】のまとめサイト！【Bits】とは？

【2023/08/10】「シェル」ってなに？から改めて学ぶLinuxの基本【アーカイブ】