Webサイト構築には、コーディング(HTML、CSS、JavaScript)の理解が必須
ノーコードツールでも見た目だけは作ることができる。しかし・・・
近年様々なサービスが提供されているため、Webサイトの見た目を作るだけであれば、容易に構築できるようになってきました。自分のオンライン日記帳であれば、十分に機能します。しかしながら、このようなことになりがちです。
- 宣伝や広告をするが、必要な情報を見易く・見栄えよく整理したサイト構築ができないため、集客につながらない
（自由にカスタマイズする方法がわからない） - 閲覧した方が次のアクション（来店・予約など）につながらない
（導線を考えたサイト構築ができない オンライン予約や問合せができない） - タイムリーにホームページの更新ができない
（作業に時間かかってしまい、古いままになってしまう）
これらを解決するために、ホームページがどのようになっているかの基礎を学んでいきましょう！
Webコーディングの基本を知ることで、Webサイトの概要を理解しよう
Webサイト制作は現代のコンテンツ制作において欠かせないスキルですが、上述のようにWebコーディングの基本を理解することなく、自分のアイデアを自由に実現することは困難です。このセクションでは、HTML、CSS、JavaScriptといったWebコーディングの概要を知り、オリジナルなWebページを作成するスキルを身につけるための手順を紹介します。Webデザインの世界への入り口を開くために、まずはこれらの基本をマスターしましょう。
この記事では以下の内容をカバーします。
それぞれの言語の基本的な役割と機能を各セクションで説明し、Web制作者が実際に活用したオススメの学習教材について紹介します。
Webコーディングのスキルを習得するためのロードマップと目標とすべき学習期間について説明します。ロードマップを進むためのWeb制作者がオススメする教材と学習方法について助言します。
HTMLの概要
HTML（HyperText Markup Language）の基本を理解することは、Webコーディングの重要な第一歩です。このセクションでは、HTMLの基本的な要素や構造について詳しく解説します。HTMLはWebページの骨格を構築するための言語であり、以下のポイントをカバーします。
HTMLの役割
- HTML要素の構造: HTML文書は要素（elements）で構成されており、それぞれが異なる役割を果たします。開始タグ（<tag>）と終了タグ（</tag>）の組み合わせを使用して要素を定義します。例えば、<h1>タグは見出しを、<p>タグは段落を表します。
- HTMLドキュメントの基本構造: どのHTML文書も基本的な構造を持っており、<html>、<head>、<body>などの要素が含まれています。これらの要素がウェブページの構造を定義します。
- HTML要素の属性: HTML要素には属性（attributes）を追加でき、属性は要素に追加の情報を提供します。例えば、<img>要素には”src”属性を使用して画像のソースを指定できます。
次の学習ステップを通じHTMLの基本を習得し、自分のウェブページの骨格を構築するスキルを身につけるための基盤を築きます。今すぐ始めましょう！無料でお試しできるサービスを紹介します。
Web制作者の私がオススメするHTML学習ステップ
ドットインストールの始めの無料部分でHTMLコーディングをお試ししてみましょう。
新規登録しなくても冒頭のいくつかの無料レッスンを受講することもできます。
HTMLやCSSの基本部分は無料で受講できるので、雰囲気を知るためにも受講していきましょう。
HTMLの基本構造をある程度理解したら、同様にCSSについても掴んでいきましょう。
CSSの概要
このセクションでは、CSS（Cascading Style Sheets）の役割と重要性について詳細に説明します。CSSはHTMLの骨格を美しく装飾し、ウェブページをユーザーフレンドリーにするための不可欠なツールです。CSSはセレクタ、プロパティ、値などの指定方法持ちます。CSSがスタイルを適用するため、ウェブページは美しく装飾され、ユーザーエクスペリエンスを向上させられます。
CSSの役割
CSSはウェブページのスタイリングを担当します。文字のサイズ、色、レイアウト、背景、ボタンのスタイルなど、ほとんどすべてのビジュアル要素を制御できます。ウェブページのデザインが魅力的で使いやすいかどうかは、CSSの適切な使用に大きく依存します。
CSSの基本構造
CSSはセレクタ、プロパティ、値から構成されています。セレクタはスタイリングを適用したいHTML要素を選択し、プロパティはその要素のどの部分をスタイル化するかを指定します。値はプロパティに対する具体的なスタイル情報です。例えば以下のCSSコードは、すべての段落（<p>要素）の文字色を青に変更するものです。
CSS
p { color: blue; }これの意味を説明すると、「要素セレクタ=p」が選択され、「プロパティのcolor」に対し、「プロパティの値=blue」を指定する、という指示です。
セレクタの種類
CSSにはセレクタの種類がいくつかあります。要素セレクタ（element selector）、クラスセレクタ（class selector）、IDセレクタ（ID selector）、属性セレクタ（attribute selector）などがあり、それぞれ異なる要素を選択する方法を提供します。適切なセレクタを選ぶことで、特定の要素にスタイルを適用できます。
Web制作者の私がオススメするCSS学習ステップ
- ドットインストールで始めの無料部分でコーディングをお試ししてみる
- 学習を始めることを決意したら、ドットインストールを完走する
- 「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」の本を完走する
- HTMLとCSSの知識・技術を深めるため、デザインカンプにチャレンジしてみる
・無料のデザインカンプ
・初級～中級までのデザインカンプ
ドットインストールはWeb制作の導入部分を学ぶには最適なステップだと思います。私がもう一度初めから学習し直すことを考えると、ドットインストールを選択します。
無料部分が終わってしまったら、有料会員になることで全部実施できるようになります。１ヶ月を目途でドットインストール卒業できるように進めます。
ある程度HTML/CSSのことがわかってきたら、とてもおすすめの本があります。それが、
です。これまで学んできた知識が総動員され、Webサイトを作っていく流れを経験でき、巻末でSNSやGoogleマップ埋め込みなども実装方法掲載しています。自分もめちゃくちゃ楽しんで学習できた良書です。
もう、静的サイトはある程度作れる知識・技術が身に着いてきています。
デザインカンプを基に、実際に動くホームページを作っていく練習を始めましょう。
デザインカンプからのコーディングは、しょーごさんの解説付きデザインカンプが進めやすく、分かり易いです。実際に壁にぶつかっても、調べるといろいろ出てくるので挫折防止にも最適です。
CSSの基本をマスターすることは、ウェブデザインの世界で自分自身を表現し、ユーザーエクスペリエンスを向上させるための重要なステップです。次のセクションでは、JavaScriptの基本について学び、ウェブページに対話性を追加する方法を探究します。
JavaScriptの概要
このセクションでは、JavaScriptの重要性とウェブ開発における役割について紹介し、基本的なJavaScript構文、変数、関数、イベント処理などを詳しく解説します。
Web制作者がJavaScriptを学ぶ場合、バックエンドとのつなぎの実装を担当しないケースが多く、あまり深く学ばなくとも「よくある機能をよくある実装」で済ませられることが多いです。このセクションはよくわからない点があっても、実際に必要になったタイミングでしっかり学ぶことでどんどん先へ進めていくことを冒頭にお話しておきます。
JavaScriptの役割
JavaScriptはWebページに対話性と動的な機能を追加します。これにより、ユーザーがページ上で情報を送信したり、要素を動的に変更したりできるようになります。例えば、フォームの送信、アニメーションの制御、データの動的な読み込みなどが挙げられます。JavaScriptなしでは、静的なページしか作成できません。
基本的なJavaScript構文
JavaScriptの基本は、変数の宣言と使用から始まります。変数を使用してデータを格納し、操作することができます。以下は、変数の宣言と基本的な演算子の例です。
JavaScript
// 変数の宣言
let age = 30;
// 基本的な演算子を使用した計算
let sum = 5 + 3;JavaScriptには条件分岐（if文）、ループ（forループ）、関数の定義など、プログラミングの基本的な機能が組み込まれています。これらを活用してWebページ上で特定のアクションを実行できます。
イベント処理
Webページ上のユーザーアクションに対応するために、JavaScriptはイベント処理をサポートしています。ボタンのクリック、フォームの送信、マウスの動きなど、さまざまなイベントに対してコードを実行できます。これにより、ユーザーとの対話を実現し、Webページをより魅力的にします。
JavaScript
// ボタンクリック時のイベント処理
document.getElementById('myButton').addEventListener('click', function() {
alert('ボタンがクリックされました！');
});何をどのように学習していくか
セクション冒頭でご紹介したように、よくある実装を「ある程度」理解できたら次へ進みましょう。よくある実装とは、このようなものです。
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るボタン
- アコーディオン
- モーダル
- タブ
教材は、先述のしょーごさんセットの内容を進めれば十分です。一応よく紹介されている本もありますが、困ったときに参照すればよいので学習段階では気にせず先へ進むのも選択肢として考えておきましょう。
WordPressの概要
このセクションでは、WordPressについての基本的な情報とその重要性に焦点を当てます。WordPressはウェブサイトの構築と管理において非常に人気のあるプラットフォームであり、その特徴や利点について以下のように説明します。
WordPressとは
WordPressはオープンソースのコンテンツ管理システム（CMS）で、ウェブサイトを簡単に作成、カスタマイズ、管理するためのツールです。何百万ものウェブサイトがWordPressを利用しており、その幅広い用途に対応していることが世界中で人気がある理由です。
カスタマイズ性
多くの無料および有料のテーマとプラグインが利用可能で、Webサイトをビジョンに合わせてカスタマイズできます。これにより、ブログ、ポートフォリオ、オンラインストア、コーポレートサイトなど、さまざまな種類のWebサイトを作成できます。
SEO対策
WordPressは検索エンジン最適化（SEO）にも優れており、コンテンツの最適化、メタタグの設定、クローラへの対応など、SEOの要件をサポートしています。簡単に対応できることも人気の理由です。
セキュリティ
WordPressの利用者が多いが故に、セキュリティリスクは常にあります。WordPressはセキュリティを強化するためのプラグインやアップデートを提供しており、ウェブサイトのセキュリティを確保するために対策必須です。
WordPress学習について
コーディングを本業として目指す方は、静的サイトを基にWordPress化できることが求められます。学習教材としてはこの本の内容を理解することで実務レベルの学習が可能です。
日数としては、14日～1ヶ月を目標に進めましょう。静的サイトを作った後のWordPress化はかなり歯応えのある実装に感じられますよね。サイト管理者がノーコードで記事投稿・編集するにはWordPressは必須となるので、実装がんばりましょう。
Webコーディング学習ロードマップ
このセクションでは、これまで登場してきたWebコーディングのスキルを習得するための内容をロードマップとして提供します。
HTML/CSSの基礎を学習する
ドットインストールを活用し、１ヶ月を目安に進めましょう。１周終われば次へ進むことをおすすめします。２周目以降は学習効率がガタ落ちするのでおすすめしません。
HTML/CSSでサイト制作
「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」で１週間を目安に進めましょう。わからないことや悩んだことはググって調べるチカラが後々役に立ちます。
デザインカンプから実務レベルのサイト制作
デザインカンプを基に実務をイメージして実際に動くホームページを作っていきましょう。しょーごさんのデザインカンプをおすすめします。
デザインカンプの初心者向け１個→初級２個→中級２個の計５個くらい作ると、自信につながります。ここは個人差が大きいので、２ヶ月～３か月を目安に進めましょう。
動きのあるサイト制作
JavaScript(JQuery)のよくある実装を学びましょう。２週間を目安に進めましょう。
静的サイトのWordPress化
Webコーディングを本業とする方には取り入れておきたいスキルです。２週間～１ヶ月を目安に進めましょう。
まとめ
これまでの内容を１歩ずつ着実に進めることでWebコーディングは確実に習得できます。また、適切な開発環境やツールの選択、オンライン教材、学習サポートも必要に応じ確保すると挫折するリスクを下げられます。ここまで読み進めてきた方であれば、この内容を実践するだけでWeb制作するチカラは確実に身に付きます。あとはやるだけです！
あなたとWeb制作者として共に協業できる日を楽しみにしています！
