必須事項

技術

• 1位 WordPress: ウェブサイトやブログの作成に使用されるコンテンツ管理システム
• 2位 Node.js: サーバーサイドのJavaScriptランタイム環境。Node.jsのインストール
• 3位 Vite: 高速なフロントエンドビルドツール。Viteの構築
• 4位 SCSS: CSSのプリプロセッサで、高度なスタイルシート作成をサポート。SCSSの記事
• 5位 Git (GitHub): バージョン管理システムとそのホスティングサービス。Gitの記事

フリーランスとして主にクラウドソーシング（CrowdWorks、Lancers、coconala）を通じて案件を受注してきました。特にWordPress関連の仕事が中心であったため、上記の順位としております。

実践でもよく使うCSS　※重要

• メディアクエリ: 画面サイズに応じたスタイル変更。
• アニメーションプロパティ: 要素に動きを追加するCSS設定。アニメーションプロパティの記事
• キーフレーム: アニメーションの途中経過を定義。
• clamp関数: 値の範囲を指定するCSS関数。clamp関数の動画
• clippath: CSSで要素の形状をカスタマイズするプロパティ。
• flexプロパティ: Flexboxでのアイテム配置を管理。flexの記事
• maxwidth: widthと合わせてレスポンシブ対応。

ライブラリ・プラグイン

• 1位 ACF (WordPressプラグイン): カスタムフィールドを簡単に追加できるプラグイン。
  ACFプラグインの記事
• 2位 GSAP: 高性能なJavaScriptアニメーションライブラリ。Gsapの記事
• 3位 Swiper: モバイルデバイスに最適化されたスライダー/カルーセルライブラリ。Swiperの記事
• 4位 All-in-one-Wp-migation: バックアップの知識とサイトの移行作業。
• 5位 CPT (WordPressプラグイン): カスタム投稿タイプを作成するためのプラグイン
• 6位 MW WP Form (WordPressプラグイン): フォーム作成用の無料のプラグイン。入力→確認→完了及び自動返信メールの設定も可能。MW WP Formの記事

上記の理由により、WordPressを中心とした順位となります。この技術を熟知することで、クライアント様に満足していただけるサイトを提供できるようになります。

便利なジェネレーター及びツール

• ChatGPT: 人工知能による対話生成ツール。ChatGPTの記事　※重要
• LOCAL: WordPressのテスト環境の構築。LOCALの記事　※重要
• Shape Divider: ウェブデザインのためのシェイプディバイダー生成ツール。なみなみのコード
• Cubic Bezier: CSSアニメーションのためのベジェ曲線ジェネレーター。アニメーションの差別化
• Lorem Picsum: ランダムな画像を提供するサービス。ダミー画像の生成
• CSS clip-path maker: 三角形、五角形、八角形でも簡単に。三角形の生成
• CSS Stock: コピペでデザインを実装。様々なデザイン
• CodePen:コードを共有できる便利なサイト。　コードの共有

ChatGPTはもちろん、LOCALでテスト環境を構築することは非常に大切です。本番環境を直接変更するのは非常に危険なため、LOCALを使いこなすことが重要です。

その他

• FileZilla: FTPクライアントソフトウェア。Filezilaの導入　※重要
• レンタルサーバー: ウェブサイトホスティングサービス。無料で高機能なシンクラウドを推奨。また、独自ドメインの取得とサーバーとの紐づけの知識。シンクラウドサーバーの記事　※重要
• ギガ便: 大容量ファイル転送サービス
• サーチコンソール: ウェブサイトのパフォーマンスを分析するためのGoogleツール。index登録の促進

実案件ではクライアント様のサーバーを操作することが多々あります。誤った操作によってデータを削除し、取り返しのつかない事態になる可能性があるため、日頃からFTPの操作に慣れておくことが重要です。

優秀な講師及び教材

講師

• たにぐち まことのともすたチャンネル
• しょーごログ
• アキユキ / Web制作チャンネル
• フロントエンドチャンネル
• セイト先生のWeb・ITエンジニア転職ラボ

教材(有料)

• 【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）　
  →　Udemyの教材はセール日に購入することをおすすめします。
• デザインカンプからのコーディング
  → 　全て必要な知識のため、まとめ買いがお得です。

特に、デザインカンプからのコーディングスキルは実務で必須となります。さらに、ポートフォリオとして実績も作れるため、腕試しとしても挑戦しておきたい教材です。

使う頻度が減ってきた内容

• Gulp: タスクランナー　→　Viteでカバー
• webpack: モジュールバンドラー　→　Viteに移行
• jQuery: JavaScriptライブラリ　→　パフォーマンス重視のためVanillaJsで記述
• Pug: テンプレートエンジン　→　アップデートがされていない
• Ruby: プログラミング言語　→　クラウドソーシングでは案件が少ない
• Heroku: クラウドプラットフォーム　→　有料になったため

Viteを理解すれば、上記の内容はほぼ網羅できます。そのため、Viteの学習をおすすめします。なお、PugはHTMLの上位版で、Viteと連携し現在のプロジェクトにおいても欠かせない内容です。しかし、開発がアップデートされていないため、こちらに記載しています。

プロジェクトや学習で重視すること

• クライアント様との円滑なコミュニケーション
• 使いやすく、保守しやすいサイトの提供。→ プラグインの知識必須。
• 積極的な提案力並びに、内部SEOを意識したサイト制作。適切なタグを使用することが重要。
  → クライアント様にローディングアニメーションやGsapを活用したアニメーション等を提案。
• 進捗状況の報告（テストサーバーにて報告、noindex/Basic認証必須）
• 納期の厳守。スニペット等を活用し、コーディングスピードを向上して提案よりも早く納期を目指します。
  →スニペットの記事
• 習得した技術のアウトプット
• 学習の継続

ロードマップ

Web制作を学ぶには、継続が大切です。一般的に案件を獲得するまでに約500時間の学習が必要とされています。高額なスクールに通うことが必ずしも良い成果をもたらすとは限らないため、コストを抑えつつ、効率的に学習するためのロードマップを紹介します。高額なスクールは広告費のコストにより費用が上がり、結果必ずしも良い学習を提供しているわけではありませんので慎重に精査することが大切です。

実務までの必須項目

• ポートフォリオの作成
  → クライアント様がログインできるような構築であれば、さらに良いです。
• デザインカンプからのコーディング
  → 可能であれば、Illustrator、Photoshop、XD、Figmaなどのデザインツールを、コーディングに支障がでない程度に操作できるようにしておきたい。
• WordPressでオリジナルテーマの構築
  → ViteでHTMLデータを生成し、それをWordpressのオリジナルテーマで構築。
• WordPressのプラグインの知識
  →編集に関連するACPやCPT。またバックアップの操作に必要なAll-in-one-Wp-migation。お問い合わせフォームの構築にMW WP Formのプラグインは最低抑えておきたい。

ロードマップ　※目安として継続して500時間の学習が必要です。

1.HTML・CSS・JavaScriptの学習　10時間

• 方法:ドットインストールやProgateを活用

2.HTML・CSS・JavaScript・WordPressの深堀り 100時間

• 方法: 上記の講師の動画を活用
• サポート: 分からないことはMENTA等を活用。月額1万円程度で質問無制限のサービスも存在します。ここでメンターの解答やコミュニケーション能力の向上を意識してください。なお、今後はプロとして自分自身で問題を解決する能力が基本求められます。そのため、質問をする前にChatGPTなどのツールを活用することを心がけましょう。

3.デザインカンプからのコーディング　300時間

• おすすめ教材:しょーごさんの教材　低コストで高品質な教材です。ポートフォリオを充実させることができます。案件獲得や営業には、ポートフォリオが必須です。コードの可読性を高めたり、Gitを活用し学習したことを記録することも大切です。

4.JavascriptやScssの深堀り　100時間

• おすすめの教材

学習で意識すること

学習内容のアウトプット

• 方法: WordPressでブログの構築(オリジナルテーマ)を推奨。その他、X等。クライント様はこのようなアウトプットを参考にされます。メガティブな内容は避けてください。

WordPressのテスト環境構築

• ツール: LOCALを使用
• その他: レンタルサーバーと契約し、FTP操作に慣れる

しょーごさんの上級課題にチャレンジ

• 内容: Web制作の実務に必要な内容が全て詰まっています。納期を意識して1ヶ月以内での構築を目指してください。
• 作業:ViteでHTMLデータを構築し、WordPress化します。プラグインを使って編集機能を構築し、クライアント様に充実した内容のポートフォリオを提供できるように意識してください。

営業を開始

• 方法: クラウドソーシングのプロフィールを充実させて案件に提案等

今後の学習予定

ChatGTPの成長が著しい中、簡単な案件は確実に減少しています。そのため、コーダーとして差別化を図るためには、習得が難しい技術や知識を学ぶ必要があります。今後は以下のような内容を勉強し、当方もアウトプットできるになりたいと思います。

• ECサイトの構築: オンラインストアの作成と管理 　デイトラのSpotifyコース
• WebGL: インタラクティブな3Dグラフィックスを表示するためのJavaScript API
  Not Equal
• Next.js (Webアプリ開発): ReactベースのWebアプリケーションフレームワーク
  sincode
• Astro: 新しい開発環境の構築　たにぐちまことUdemy
• PHPの言語深堀: サーバーサイドスクリプト言語の詳細