ホームページを作る場合、多くの人が、ホームページデザインに目が行くと思います。
もちろん、ホームページデザインのみを仕事にしているプロの人もたくさんいて、それだけでも学習は多岐にわたりますが、
コーディングやプログラミング、サーバーやドメインなどのネットワーク、
その他管理するためのツールやアプリの使い方や、運用方法など、
もはや覚えることだらけで、すぐに習得するのが難しい事はすぐに気がつくでしょう。
前回、ホームページを作るアーキテクトの部分について解説しましたが、今回はそれら全てに共通するスキルについて、
いわゆる、ホームページ作りたければ、こんだけ覚えることがある一覧を載せてみます。
他の誰かとチームを組んでホームページを作るという場合は、そのチーム内の総合スキルと考えてください。
1人でホームページを作りたければ、これだけのスキルが必要だということを認識してみましょう。
Webサイト制作のプロになるためのスキル一覧
以下はWebサイトを制作するために必要なスキルの一覧です。
フロントエンド（見た目・UI）
- HTML（構造設計・セマンティック）
- CSS（レイアウト・アニメーション）
- レスポンシブ対応（モバイルファースト）
- JavaScript（DOM操作・イベント処理）
- フレームワーク（React / Vue / Wordpressなど）
- UIコンポーネント設計
バックエンド（裏側処理）
- サーバーサイド言語（PHP / Node.js）
- API設計（REST / JSON）
- データベース（MySQL / PostgreSQL）
- 認証・認可（ログイン機能）
- セッション・Cookie管理
インフラ・運用
- サーバー構築（Nginx / Apache）
- ドメイン・DNS
- デプロイ（本番環境への公開）
- HTTPS（SSL）
- ログ監視・障害対応
デザイン・UI/UX
- レイアウト設計
- 色彩・タイポグラフィ
- ユーザビリティ（使いやすさ）
- ワイヤーフレーム作成
- デザインツール（Figma など）
開発ツール・環境
- エディタ（Visual Studio Code）
- バージョン管理（Git / GitHub）
- パッケージ管理（npm）
- ビルドツール（Vite / Webpack）
セキュリティ
- XSS（クロスサイトスクリプティング）
- CSRF（リクエスト偽造）
- SQLインジェクション対策
- 認証情報の安全な管理
パフォーマンス
- 画像最適化
- Lazy Load
- キャッシュ制御
- Core Web Vitals理解
SEO・マーケティング
- 検索エンジン最適化（SEO）
- メタタグ設計
- 構造化データ
- アクセス解析（Google Analytics）
コミュニケーション・ビジネス
- 要件定義
- クライアントヒアリング
- 見積もり・工数管理
- スケジュール管理
設計力（プロとの差が出る部分）
- 情報設計（IA）
- コンポーネント設計
- データ設計
- 拡張性・保守性の考慮
ソフトスキル（地味だけど重要）
- 問題解決力
- 学習力
- ドキュメント作成
- チーム開発（レビュー等）
Webサイト制作学習のガリキュラム
まるでWeb制作の事を知らない人からの学習カリキュラムについて、考えてみました。
フェーズ1：土台理解（1〜2週間）
- Webの仕組み（ブラウザ・HTTP・DNSの流れ）
- フロントエンド vs バックエンドの役割
- サーバーとは何か（ざっくりでOK）
- 開発環境の準備（Visual Studio Code / Git）
▶︎このフェーズのゴール
「Webってどう動いてるの？」を説明できる状態
フェーズ2：マークアップ基礎（2〜4週間）
- HTML（セマンティックタグ）
- CSS（レイアウト、Flexbox、Grid）
- レスポンシブ対応（スマホ対応）
- 基本的なUI模写（LPを真似る）
▶︎このフェーズのゴール
デザインカンプから静的ページを再現できる
フェーズ3：JavaScript基礎（3〜5週間）
- 変数、関数、配列、オブジェクト
- DOM操作（クリック・入力・表示変更）
- イベント処理
- 非同期処理（Promise / async/await）
▶︎このフェーズのゴール
動きのあるWebページが作れる
フェーズ4：フロントエンド実践（4〜6週間）
- フレームワーク（React など）
- コンポーネント設計
- 状態管理（useState / useEffect）
- API連携（fetch / axios）
▶︎このフェーズのゴール
SPA（シングルページアプリ）を構築できる
フェーズ5：バックエンド基礎（4〜6週間）
- サーバーサイド言語（PHP / Node.js）
- API設計（REST）
- データベース（MySQL）
- CRUD処理
▶︎このフェーズのゴール
フロントとバックを繋いだWebアプリが作れる
フェーズ6：インフラ・公開（2〜3週間）
- サーバー（Nginx / Apache）
- ドメイン・DNS設定
- デプロイ（VPS / クラウド）
- HTTPS（SSL）
▶︎このフェーズのゴール
自分のサービスをネットに公開できる
フェーズ7：実務スキル（重要）
- UI/UX設計（使いやすさ）
- SEO基礎
- パフォーマンス改善
- セキュリティ（XSS / CSRF）
▶︎このフェーズのゴール
「仕事として通用する品質」を理解する
フェーズ8：制作実績（ポートフォリオ）
- LP（ランディングページ）
- コーポレートサイト
- Webアプリ（ログイン機能あり）
- オリジナルサービス1つ
▶︎このフェーズのゴール
「仕事ください」と言える状態
フェーズ9：プロになるための差分
- 要件定義（クライアントの課題を整理）
- 設計力（画面構成・データ設計）
- 見積もり・工数感覚
- コミュニケーション能力
▶︎このフェーズのゴール
コードを書く人 → 問題を解決する人へ
学習のコツ
インプット：アウトプットは「3：7」ぐらいの割合で行うといいでしょう。
コードややり方を読んだり聞いたりしているだけでは、スキルは伸びづらく、挫折しやすくなります。
必ず、自分で手を動かすという事が最も重要だと考えましょう。
なので、「頭で理解した」ではなく「自分で作れた」という達成感をたくさん味わいましょう。
毎フェーズで必ず最低1つ以上は、何かしらの作り上げた作品を
作ることを目標にすると、それがポートフォリオにもつながります。
コーディングやプログラミングのコツとしては、
「模写 → 改造 → 自作」の順で進めるといいでしょう。
あとがき
スキルは、直訳すると自分の「技術力」になりますが、
技術は「作れるかどうか」で、
プロは「価値を出せるかどうか」という大きな違いがあります。
プロとして自分の技術を磨くのが、今回の一覧をみると、ゲボが出るぐらい大変だと考える人がほとんどだと思いますが、
実際時間をかけて一つずつゆっくり学習していくのが一番いいんですよね。
一気にやると、必ずの脳みそが爆発してしまいます。
大噴火を起こさないように、マイペースで進めていきましょう。
もちろん、最近では、AIを使って、色々な箇所をショートカットできる部分もありますが、自己学習をAIを使って手抜きをすると、どんだけ時間をかけても身に付かなくなるので、できればメンターの人などをつけて、AIを使っていい場所と使ってはいけない場所を見極めてもらうのがいいかもですね。
0 件のコメント:
コメントを投稿