自分でホームページを作れるようになりたい。
ブログやサービスページを整えられるようになりたい。
そう思っても、最初に迷いやすいのが「何から学べばいいのか」です。
HTML、CSS、WordPress、Webデザイン、プログラミング。
いろいろな言葉が出てきて、調べれば調べるほど分からなくなることもあります。
私自身、WebやWordPressに関わるようになったのは48歳を過ぎてからでした。
最初から全部分かっていたわけではありません。
ブログを運営しながら、WordPressを使いながら、必要なことを少しずつ学んできました。
今になって思うのは、Web制作を学ぶなら、いきなり高額なスクールに申し込まなくてもいいということです。
- まずは、無料で学べるサイトを使ってみる。
- 本を使って、HTMLやCSSの基本を整理する。
- それでも分からないところが多い場合や、本格的に仕事に活かしたい場合は、講座やスクールを検討する。
この順番でも十分だと思います。
この記事では、Web制作を学びたい初心者の方に向けて、HTML・CSS・WordPressの違いや、無料サイト・本・講座の使い分けについてまとめます。
40代・50代からWeb制作に興味を持った方、在宅ワークや自分のサイト作りに活かしたい方の参考になれば幸いです。
Web制作とは、Webページを作るための仕事やスキルのこと
Web制作とは、ホームページやブログ、サービスページなど、Web上で見られるページを作ることです。
たとえば、次のようなものがあります。
- お店のホームページ
- 個人事業主のサービスページ
- ブログ
- ランディングページ
- 会社案内ページ
- ネットショップの商品ページ
- お問い合わせページ
こうしたページを作るためには、文章、画像、デザイン、構成、スマホ表示、問い合わせへの流れなど、いろいろな要素が関係します。
Web制作というと、すぐにプログラミングを思い浮かべる人もいるかもしれません。
でも、初心者が最初から本格的なプログラミングを学ぶ必要はありません。
まずは、Webページの基本であるHTMLとCSS、そして実際にサイトを作るときによく使われるWordPressの違いを知ることが大切です。
HTMLはWebページの「骨組み」
HTMLは、Webページの構造を作るための言葉です。
たとえば、こうした要素を、Webページの中に配置するために使われます。
- 見出し
- 段落
- 箇条書き
- 画像
- リンク
- 表
- ボタン
たとえるなら、HTMLは家の骨組みのようなものです。
- どこに見出しを置くのか。
- どこに文章を置くのか。
- どこに画像を入れるのか。
- どこから別のページにリンクするのか。
こうした構造を決める役割があります。
WordPressを使っていると、HTMLを直接書かなくても記事やページを作れます。
でも、HTMLの考え方を少し知っていると、見出しや段落、リンクの意味が分かりやすくなります。
ブログを書くときにも、ただ文字を並べるのではなく、見出しを使って読みやすく整理する意識が持てるようになります。
CSSはWebページの「見た目」を整えるもの
CSSは、Webページの見た目を整えるための言葉です。
たとえば、こうしたデザインやレイアウトに関係します。
- 文字の色
- 文字の大きさ
- 余白
- 背景色
- 横幅
- 配置
- ボタンの見た目
- スマホ表示
HTMLが骨組みなら、CSSは服や内装のようなものです。
- 同じ文章でも、文字が小さすぎると読みにくいです。
- 余白が詰まりすぎていると、窮屈に見えます。
- スマホで崩れていると、読者はすぐ離れてしまうかもしれません。
CSSを学ぶと、Webページの見た目がどのように作られているのかを理解しやすくなります。
ただし、最初からCSSを完璧に覚える必要はありません。
まずは、
- 文字の大きさを変える
- 色を変える
- 余白を調整する
- 背景をつける
- 横並びにする
- スマホでの見え方を確認する
このような基本からで十分です。
WordPressはWebサイトを作りやすくする仕組み
WordPressは、ブログやホームページを作るための仕組みです。
HTMLやCSSをすべて手書きしなくても、管理画面から記事を書いたり、固定ページを作ったり、画像を入れたりできます。
WordPressの良いところは、専門的なコードを書かなくてもサイトを作りやすいことです。
- テーマを使えば、ある程度デザインが整った状態から始められます。
- 記事や固定ページも、管理画面から編集できます。
- お問い合わせフォームやSEO設定なども、プラグインを使って追加できます。
ただし、WordPressを使えば何でも簡単にできるわけではありません。
実際には、こうしたことを考える必要があります。
- どんなページ構成にするか
- どんな文章を載せるか
- どんな画像を使うか
- どこにお問い合わせを置くか
- スマホで見やすいか
- 更新しやすい作りになっているか
WordPressは便利な道具ですが、Webページの基本を少し知っていると、より使いやすくなります。
HTML・CSS・WordPressの違い
HTML、CSS、WordPressの違いを簡単に整理すると、次のようになります。
- HTML：ページの構造を作る
- CSS：ページの見た目を整える
- WordPress：サイトを管理・更新しやすくする
Web制作を学びたい人は、この3つを全部同じものとして考えない方が分かりやすいです。
たとえば、WordPressで記事を書いていても、見出しや段落はHTMLの考え方につながっています。
テーマのデザインを少し調整したいときは、CSSの考え方が関係します。
固定ページやブログ記事を更新するには、WordPressの操作を知る必要があります。
つまり、Web制作を学ぶなら、
- Webページの仕組みを知る
- HTMLで構造を理解する
- CSSで見た目の考え方を知る
- WordPressで実際にページを作る
この流れで考えると分かりやすくなります。
初心者は何から学べばいい？
Web制作を学びたい初心者は、まずHTMLとCSSの基本から触れてみるのがおすすめです。
理由は、Webページの仕組みが分かりやすくなるからです。
いきなりWordPressから始めても、もちろんサイトは作れます。
でも、HTMLやCSSの考え方を少し知っていると、WordPressの編集画面で何が起きているのか理解しやすくなります。
たとえば、こうしたことが分かるだけでも、ブログやホームページの編集がしやすくなります。
- 見出しはなぜ大事なのか
- 段落と改行は何が違うのか
- リンクはどう作られているのか
- 画像にはなぜ説明文が必要なのか
- 余白を変えると見え方がどう変わるのか
- スマホで見るときに何を意識するのか
ただし、Web制作を仕事にしたい場合は、HTMLとCSSだけでは足りないこともあります。
WordPress、画像作成、文章作成、スマホ表示、SEO、問い合わせへの流れなど、実際にはいろいろな要素が関係します。
最初は完璧を目指さず、まずはWebページの基本を知るところから始めましょう。
まずは無料サイトで試してみる
Web制作は、無料で学べる情報もたくさんあります。
最初からスクールや講座に申し込むのが不安な人は、まず無料で学べるサイトを使ってみるのも良いと思います。
たとえば、ドットインストールでは、HTMLやCSSなどのプログラミング・Web制作に関するレッスンが用意されています。
動画で少しずつ学べるので、まずWeb制作の雰囲気を知りたい人には試しやすいです。
無料サイトで学ぶメリットは、気軽に始められることです。
- 費用をかけずに試せる
- 自分に合うか確認できる
- すぐに始められる
- 短い時間でも学びやすい
- 分からない言葉に触れられる
最初の一歩としては、とても良い方法です。
本で体系的に学ぶのもおすすめ
無料サイトで雰囲気をつかんだら、本で体系的に学ぶのもおすすめです。
本の良いところは、学ぶ順番がまとまっていることです。
Web制作は、HTML、CSS、デザイン、レスポンシブ対応、画像、余白、配色など、いろいろな要素が関係します。
ネットの情報をあちこち見るより、1冊の本に沿って進めた方が、全体像をつかみやすいことがあります。
Web制作を学ぶ本としては、Manaさんの『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』がわかりやすいです。
本の通りに手お動かしながらWEBサイトを作る流れになっています。
▶ Amazonで『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』を見る
実際に手を動かしながら進めてみてください。
独学が向いている人
Web制作は、独学でも始められます。
特に、まず触ってみたい人や、自分のブログ・ホームページを少し直したい人は、無料サイトや本から始めても良いと思います。
独学が向いているのは、次のような人です。
- 自分で調べるのが苦にならない
- パソコン操作に慣れている
- 無料情報や本で試してみたい
- すぐに仕事にする予定ではない
- 自分のサイトを少し整えたい
- 途中で分からなくなっても調べながら進められる
独学の良いところは、費用を抑えて始められることです。
本格的に学ぶなら講座やスクールも選択肢
無料サイトや本で学んでみて、もっと本格的に学びたいと思ったら、講座やスクールを使う方法もあります。
特に、Web制作は実際に手を動かす分野なので、途中でつまずくことがあります。
- 自分の画面と教材の画面が違う。
- CSSが反映されない。
- WordPressの設定が分からない。
- スマホ表示が崩れる。
- どこを直せばいいのか分からない。
こういうとき、質問できる環境があると進めやすくなります。
講座やスクールが向いているのは、次のような人です。
- ひとりでは続けにくい
- 質問しながら学びたい
- 学ぶ順番を用意してほしい
- Web制作を仕事に活かしたい
- WordPressも含めて学びたい
- 自分のサービスページを作れるようになりたい
Web制作は、ただ知識を増やすだけでなく、実際に作ってみることが大切です。
仕事に活かしたい人ほど、質問できる環境や、学習の流れがある講座を選ぶのもよいと思います。
■ Winスクール
講師に質問しながらWeb制作を学びたい人向け。HTML/CSSやWebデザインなどを、個人レッスン形式で学びたい人に向いています。
■ ヒューマンアカデミー通信講座
Web制作やWebデザインを幅広く学びたい人向け。これからWeb系の学習を始めたい人の選択肢になります。
■ ユーキャン
まずはWeb制作やプログラミングの入門から始めたい人向け。HTML/CSSなど、Webページの基本に触れてみたい人に向いています。
在宅ワークにWeb制作を活かすなら現実的に考える
Web制作は、在宅ワークと相性の良い分野です。
パソコンがあれば、自宅で作業しやすいです。
ホームページやブログ、サービスページを作る仕事は、在宅でも進めやすいです。
ただし、Web制作を学べばすぐに仕事になるわけではありません。
仕事として受けるには、制作スキルだけでなく、相手の話を聞く力、文章を整理する力、提案する力、納期を守る力も必要です。
特に個人事業主や小さなお店のホームページでは、デザインだけでなく、何を載せるか、どう問い合わせにつなげるかも大切です。
Web制作を学ぶなら、ただ作り方を覚えるだけでなく、仕事として使う視点も持っておくと良いと思います。
在宅で働きたい人に向けた学び方については、こちらの記事でもまとめています。
まとめ：Web制作は無料サイトや本から始めてもいい
Web制作を学びたいと思ったら、まずはHTML・CSS・WordPressの違いを知るところから始めると分かりやすいです。
- HTMLは、Webページの構造を作るもの。
- CSSは、Webページの見た目を整えるもの。
- WordPressは、サイトを管理・更新しやすくする仕組みです。
最初から高額なスクールに申し込む必要はありません。
- まずは無料サイトで試してみる。
- 本を使って体系的に学んでみる。
- それでも分からないところが多い場合や、本格的に仕事に活かしたい場合は、講座やスクールを検討する。
この順番で試してみてください。
そして、Web制作を学んだら、まずは自分のブログやプロフィールページ、サービス紹介ページを作ってみましょう。
自分で作ったページがポートフォリオとして役立ちます。