Zenn
🛣️

未経験から始める！Web 制作独学ロードマップ

2023/11/10に公開
web制作
ロードマップ
idea

Web 制作とは、主に Web サイト（ホームページやブログなど）の設計、デザイン、コーディングを行う業務です。
このうち、コーディング業務を担当するのが マークアップエンジニアです。
このロードマップでは主に マークアップエンジニアを目指したい人を対象としています。

ステップ 1:基礎学習

このステップの目標は Web 制作に必要な基礎知識の習得と開発環境を整えることが目標です。
各項目を 80%理解できたらドンドン次へと進みましょう！

Web 制作 の学習を始めるための準備

まずはブラウザと拡張機能をインストールします。以下リンクからそれぞれインストールできます。

  • ブラウザ(Google Chrome)
    Google Chrome とは、Google が提供する無料の Web ブラウザです。Web サイトの表示速度や安全性が高く、拡張機能や開発者ツールなども豊富です。
    Google Chrome を使うことで、自分が作った Web サイトをブラウザで確認したり、開発者ツールでコードやエラーを調べたり、デバッグしたりといったことが可能です。
    ブラウザ(Google Chrome)のダウンロードサイト

  • 拡張機能(Web Maker)
    Web Maker は、Chrome 上で HTML、CSS、JavaScript を書いて表示を確認できる拡張機能です。
    拡張機能(Web Maker)のダウンロードサイト
    Web Maker の使いかた

Web 制作 の基礎学習

Web 制作の基礎知識をわかりやすく解説している参考サイト(すべて無料)をご紹介します。
Web Maker で手を動かしながら各参考サイトで学習すると、学習効率が上がります。

  • HTML

    • HTML とは、
      HyperText Markup Language の略で、Web ページの構造や内容を記述する言語です(プログラミング言語ではない)。HTML では、タグと呼ばれる記号を使って文章、画像、リンクなどの要素を配置し、Web ページの基本的な構造を作成します。例えるなら、家を建てるときの設計図や土台のようなものです。
    • HTML の参考サイト
      HTML 入門講座

  • CSS

    • CSS とは、
      Cascading Style Sheets の略で、HTML でマークアップした Web ページの見た目やレイアウトを記述する言語です(プログラミング言語ではない) 。
      CSS では、セレクターとプロパティ、バリューを指定して、Web ページのデザインを柔軟に変更できます。
      例えるなら、家を建てるときの内装や装飾のようなものです。

    • CSS の参考サイト
      CSS 入門講座

  • JavaScript

    • JavaScript とは、
      Web サイトに動的なコンテンツを追加できるプログラミング言語です。HTML や CSS と組み合わせることでさまざまな動的な表現を可能とします。
      例えるなら、家を建てるときの電気や水道のようなものです。

    • JavaScript の参考サイト
      JavaScript 入門

  • jQuery

    • jQuery とは、
      JavaScript のライブラリの 1 つで、Web サイトの動きや機能を作るための言語です。例えるなら、家を建てるときの工具箱のようなものです。

    • jQuery の利点は、
      JavaScript の処理を簡潔に書けることや、複数のブラウザに対応できることです。

    • jQuery の注意点
      jQuery はリリースされて以来、多くの Web サイトで使われてきましたが、最近では CSS や JavaScript が進歩したことで、jQuery なしで実現できるようになりました。
      とはいえ、jQuery のシェア率は 29.21%とそれなりにあり、jQuery を使っている案件や企業は多いです。Web 制作分野では学んで損ということはないのでないでしょうか。

    • jQuery の参考サイト
      jQuery 入門 2020

  • デザイン 4 原則
    マークアップエンジニアは、Web サイトや Web アプリケーションの見た目や構造をコーディングするエンジニアですが、デザインの基礎知識(デザイン４原則)も学習することをオススメします。
    デザイン 4 原則を学ぶことで、ユーザーにとって使いやすく分かりやすい Web サイトや Web アプリケーションを作ることができるだけでなく、デザイナーとのコミュニケーションがスムーズになり、デザインの修正や改善が容易になります。

ステップ 2:デザインカンプでスキル定着と制作実績を作る

このステップの目標は基礎学習のアウトプットをしながら知識の定着とツールの習熟をすることです。
流れとしては、こんな感じ。

  1. 開発環境を構築する(テキストエディター)
  2. 模写コーディング(入門)でステップ 1 の実践とツールの習熟
  3. デザインカンプコーディング(初級)
  4. デザインカンプコーディング(中級)
  5. デザインカンプコーディング(上級)

追々、模写用サイトとデザインカンプを掲載する予定です。お待ちください。代わりに参考サイトを掲載しております。

開発環境を構築する

Web 制作を行うには開発環境が必要です。主に必要なのはテキストエディターと Web ブラウザです。それぞれいろいろなものがありますが、オススメは VS Code(Visual Studio Code) と Google Chrome です。
Google Chrome についてはステップ 1 で紹介したので割愛します。

VS Code とは、Microsoft が提供する無料のテキストエディターです。
Web 制作に必要な HTML、CSS、JavaScript などの言語に対応しており、開発を効率的に行うための便利な機能があります。また、拡張機能をインストールすることで、さらに便利な機能を追加できます。
VS Code のダウンロードサイト
VS Code の参考サイト

模写コーディングで実際に Web サイトを作る

模写コーディングとは、実在する Web サイトを参考にして、同じようなデザインや機能を持つサイトを自分でコードを書いて作ることです。
注意点として、著作権や倫理に反するため、模写したサイトをそのまま公開することは NGです。模写コーディングした Web サイトを公開するのは辞めましょう。
模写コーディングの目的は ステップ 1 で学習したことのアウトプットです。併行して、テキストエディターやブラウザなどのツールの習熟もできます。

模写コーディングの詳しいやり方と課題はこちらから

デザインカンプコーディングで実務に通用するスキルを身に着ける

デザインカンプとは、Web デザイナーが作成した Web サイトの完成見本のことです。
注意点として、デザインカンプはクライアントの要望とデザイナーの意図を反映したものなので、忠実に再現する必要があります。

レベル別に参考サイトをご紹介します。リンク先のお好きなデザインを 1 つずつ選んで挑戦しましょう。

デザインカンプ

Figma で作ったオリジナルのデザインカンプ(無料)をご用意しました。

https://zenn.dev/reskilling_hase/articles/0d6b11fcd1172a

https://zenn.dev/reskilling_hase/articles/1dfb9946bc13eb

https://zenn.dev/reskilling_hase/articles/50d18f455f975a

https://zenn.dev/reskilling_hase/articles/635e92c8fb63b9

https://zenn.dev/reskilling_hase/articles/1c57c0395f3c6d

ステップ 3:ポートフォリオサイト作成

ステップ 3 の目標は、WordPress 既存テーマのカスタマイズを通してポートフォリオサイト作成することと、レンタルサーバーの扱い方を学ぶことです。

ポートフォリオとは

Web 制作におけるポートフォリオとは、実績やスキルをまとめたものです。マークアップエンジニアとしては、ポートフォリオサイトを作成するのが一般的です。
ポートフォリオサイトは、自分の Web サイト制作スキルやコーディングスキルなどをアピールできるだけでなく、URL を共有すれば採用担当者やクライアントがすぐにポートフォリオを確認できるというメリットがあります。
また、副業として活動する場合やフリーランスになる場合には、自分のサイトとして集客に活用できるという利点もあります。
HTML ファイルと CSS ファイルだけでもポートフォリオサイトを作ることができますが、このロードマップでは WordPress の既存テーマのカスタマイズを通して、ポートフォリオサイトを作る方法をご紹介します。

Web サイトの公開に必要なもの

ポートフォリオサイトを公開するにはレンタルサーバーとドメイン、FTP ソフトが必要です。

  • レンタルサーバー

    • インターネット上にあるコンピューターの一部を借りて、Web サイトを公開するための場所です。
    • レンタルサーバーを選ぶ際には、価格、スペック、データセンターの場所、サポート、セキュリティなどを考慮して選ぶことが大切です。
    • WordPress を利用する場合は、WordPress に対応したレンタルサーバーを選ぶと、インストールや設定が簡単になります。

  • ドメイン

    • ドメインとは、Web サイトの住所のようなものです。
    • ドメインは、レンタルサーバーと同じ会社で取得することもできますが、別の会社で取得することも可能です。

  • FTP ソフト

    • FTP ソフトとは、ファイルを送受信するためのソフトウェアです。
    • FTP ソフトを使うことで、自分のパソコンとレンタルサーバーの間で、ファイルのアップロードやダウンロードができます。
    • FTP ソフトは、無料で利用できるものも多くあります

WordPress テーマをカスタマイズしてポートフォリオサイトを作る

レンタルサーバーを契約する前に、自分のパソコン内でポートフォリオサイトを作ります。使用するものは以下 2 つ。それぞれ参考サイトをご紹介します。

Local で作成したポートフォリオサイトを公開する

ポートフォリオサイトができ上がったら、レンタルサーバーで公開します。

ウェブサーバーに FTP でファイルを公開しよう

ステップ 4:スキルアップ

このステップの目標は、より効率よく開発を行うことと、さらにできることを増やすことです。

Git

Git は Web 制作のプロジェクトを進めるときに、自分の作業内容や変更点を記録したり、他の人と共有したりするためのノートブックのようなものです。Git 操作を学べば、自分の作業を効率的に管理できるだけでなく、チームを組んで Web サイトを作ることができます。

コマンドライン

コマンドラインは、コンピューターに直接指示を出すための電話のようなものです。キーボードからコマンドという言葉を入力すれば、コンピューターが応答してくれます。コマンドライン操作を学ぶことで、さまざまなツールやタスクを実行できるだけでなく、コンピューターとのコミュニケーションがスムーズになります。

WordPress 開発

WordPress は CMS（コンテンツ管理システム）と呼ばれるソフトウェアで、Web サイトのコンテンツを簡単に管理できるようにするものです。例えるならば、Web サイトの見た目や機能を自分の好みに合わせるための服のようなものです。
WordPress 開発を学べば、多様な Web サイトを作るだけでなく、自分の個性やセンスを表現できます。

Astro.js 開発

Astro.js は、静的サイトジェネレーターと呼ばれる JavaScript のフレームワークで、Web サイトのコンテンツを高速に配信するための自転車のようなものです。Astro.js を学ぶことで、最新の技術を使って高品質な Web サイトを構築できるだけでなく、Web サイトの速度や効率を向上させることができます。

最後に

Web 制作は、常に新しい技術やトレンドが出てくる分野です。だからこそ、学ぶことは楽しくてやりがいがあります。
しかし、学ぶことが多すぎて、 混乱することもあるかと思います。そんなときは、当ロードマップを見直して、自分のペースで進めてください。
Web 制作のロードマップは、あなたの成長の道しるべとして作りましたが、固定されたものではありません。あなたの目標や興味に応じて、自由に変更したり、追加してください。
今後は Zenn や Instagram、YouTube 等で情報発信していく予定です。

Discussion