【2025年5月29日】AIコーディングのメリットと注意点を追加しました。

この記事のレベル

初心者	（4.0）
重要度	（3.0）
難しさ	（3.0）

こんにちは、編集長のカワウソです！

「コーディングという言葉は聞いたことがあるけれど、いまいちよく分かっていない……」とお困りではありませんか？

そこで今回は、初めて企業のホームページを作る方向けに、コーディングの基礎知識を解説します。

この記事を読めば、ホームぺージ制作において、コーディングが必要かどうかが分かります。

結論として、WordPress（ワードプレス）を使ってホームページを作る場合、コーディングは必須ではありません。

しかし、コーディングの基礎知識を持っておくだけでも、ホームページ制作や運営に役立ちますよ。

それではどうぞ！

コーディングとは？

コーディングとは、ホームページを表示するために必要な「ソースコード（コンピューターに命令する文章）」を書くことです。

ホームページを「家」に見立てた場合、コーディングは「建築作業」にあたります。

そして、家を建てる「大工」にあたるのが、実際にコーディング作業をする「コーダー」。
コーダーがワイヤーフレームなどの設計図をもとに、ソースコードを書いてホームページを作ります。

ワイヤーフレームについては、以下の記事で解説しているので、気になる方はチェックしてみてください。

ホームぺージ制作においてコーディングは必要？

CMS（コンテンツ・マネジメント・システム）でホームページを作る場合は、基本的にコーディングは必要ありません。

わざわざコーディングをしなくても、CMSが自動でホームページを表示させるのに必要なソースコードを生成してくれます。

ただし、CMSの機能をカスタマイズする場合、要件によってはコーディングが必要です。

そのため、ホームぺージ初心者の方にとって、コーディングの知識は必要ではないものの、知っておくと役に立つことが多いことは覚えておいてください。

詳しくは記事の後半で解説するので、まずはコーディングの最低限の知識を身に付けていきましょう。

なお、CMSについては、以下の記事で詳しく解説しているので、気になる方はチェックしてみてください。

コーディングとプログラミングの違い

コーディングとよく混同される言葉として、「プログラミング」があります。

コーディングとプログラミングの違いを、以下の2つの視点から見ていきましょう。

作業範囲の違い

プログラミングは、コーディングを含めた作業全体のことで、設計、テスト、修正などの作業も含まれています。

つまり、コーディングは、プログラミングにおける作業の一部です。

プログラミングの作業工程については、以下の表をご覧ください。

工程	作業内容
プログラムの設計	実現したいシステム（機能）を設計します。 設計書の作成や、コーディングの内容を決めま
コーディング	システムを構築するためのソースコードを書きます。
テスト	システムが正常に動くか確認します。
不具合の修正	システム上で不具合を発見したら、ソースコードを修正します。

このように、コーディングよりプログラミングという言葉のほうが、広義の意味を持っていることを理解しておきましょう。

言語の違い

コーディングとプログラミングという言葉は、ソースコードを書くときに用いる「言語の違い」によって、以下のように分けて使われることがあります。

言葉	用途	言語の例
コーディング	主にホームページを表示するためのソースコードを作成	HTML、CSS
プログラミング	主にプログラムを動作させるためのソースコードを作成	Python、Java

とはいえ、Web制作現場やインターネット上の情報など、シーンによってこれらが混同して使われている場合もあるので、あくまでも参考程度にしましょう。

それぞれの言語については、このあと解説します。

ホームページ制作のコーディングで用いられる言語

ここでは、ホームページ制作でよく用いられる言語を紹介します。

それぞれ簡単に解説しますね。

HTML（エイチ・ティー・エム・エル）

HTML（エイチ・ティー・エム・エル）は「Hyper Text Markup Language」の略称で、ホームページ制作には欠かせないマークアップ言語です。

マークアップとは、文章や画像などをコンピューターが認識できるように、「タグ」を用いて意味付けすることです。

たとえば、上記の画像では、「見出しタグ（<h2>）」「段落タグ（<p>）」「 画像タグ（<img>）」を用いています。

このように、タグを用いることにより、ブラウザが各要素を理解し、適切に表示するのです。

CSS（シー・エス・エス）

CSS（シー・エス・エス）とは「Cascading Style Sheets」の略称で、ホームページのスタイル（見た目）を装飾するときに用いるスタイルシート言語です。

たとえば、HTMLの各要素をCSSで装飾すると、以下のようにホームぺージらしくなります。

このように、CSSを用いることにより、各要素を正しい位置に配置することが可能です。
また同時に、「文字」「背景」「ボタン」などの色や大きさを変える役割も担っています。

過去には、HTMLのみで作られたホームページも多く存在しました。
しかし、ソースコードが複雑になってしまう課題があり、現在はHTMLとCSSをセットで使うのが主流です。

CSSを使うことにより、装飾（見た目）のソースコードをHTMLと分けて管理できます。
つまり、CSSにはHTMLの中身を簡素化できるメリットがあるのです。

なお、HTMLとCSSについては、以下の記事で詳しく解説しているので、気になる方はチェックしてみてください。

JavaScript（ジャバスクリプト）

JavaScript（ジャバスクリプト）は、主にホームページで動きを付けるときに使用するプログラミング言語です。略称で、JS（ジェーエス）と呼ばれます。

たとえば、以下のようなカウントダウンタイマーを見た経験はありませんか？
キャンペーンやSALEなどのページによく利用されています。

ほかにも、JavaScriptは以下のような要素にも使われることがあります。

これらはCSSのみでも実装可能ですが、JavaScriptを用いることにより、より複雑な表現が可能です。

PHP（ピーエイチピー）

PHP（ピーエイチピー）は、「PHP: Hypertext Preprocessor」の略称で、主に動的サイトを作るときに使用するプログラミング言語です。

動的サイトを理解するためにも、静的サイトとの違いを見てみましょう。

静的サイトとは、主にHTMLで作るホームぺージのことで、「誰が」「いつ」「どこで」見ても、同じ情報が表示されます。

一方、PHPなどで作る動的サイトは、アクセスした「ユーザー」「時間」「場所」などの特定の条件に応じて、異なる情報を自動で表示します。

たとえば、ホームぺージだと「お問い合わせフォーム」がよい例です。
ユーザーの入力内容に応じた「確認画面」が表示されますよね。

静的サイトと動的サイトの違いは、以下の記事で詳しく解説しているので、チェックしてみてください。

なお、前述のWordPressもPHPで作られています。

コーディングは役に立つ！ WordPressでの活用事例

WordPressを使えば、コーディングしなくてもホームページを作れます。

とはいえ、ソースコードの読み書きができると、WordPress上でも役に立つことが多いです。

ここでは、WordPressでのコーディング活用例を2つ紹介します。

カスタムHTMLブロックで装飾を追加

WordPressでは、「ブロックエディタ」でページを作っていくのが基本です。

ブロックエディタだけでも、基本的なページは作れます。
仮に機能に不足があっても、プラグインをWordPressにインストールすることで、ブロックを拡張できるでしょう。

ただ、「ブロックエディタの標準機能」や「ブロック拡張プラグイン」でも実現が難しい機能を実装する場合は、コーディングが役に立ちます。

たとえば、当メディアの記事の下部に設置しているボタンは、ブロックエディタのなかにある「カスタムHTMLブロック」にHTMLとCSSを記述して作っています。

▼ボタン▼

▼カスタムHTMLブロック▼

このように、コーディングができれば、ホームぺージ制作の幅が広がるのです。

追加CSSでデザインを変更

WordPressには、簡単にCSSのソースコードを追加できる「追加CSS」という機能があります。

ホームぺージ全体に関わる重要なCSSファイルを修正する必要がないため、初心者の方でもリスクがありません。

参考に、当メディアのサイドバーの上部にある「キャンペーンバナー」の吹き出しの色を変えてみますね。

AIコーディングとは？ メリットと注意点

近年では、コーディングにAIが活用されるようになりました。

しかし、AIコーディングにはメリットもあれば、注意点もあるので、初心者の方が実施する場合は事前に知っておいてください。

AIコーディングのメリット

AIコーディングのメリットは、主に以下の3点です。

作業効率が上がる

AIは、ホームページ制作で多用する「定型コード」を瞬時に生成可能。
手作業だと数時間かかるコーディングも数秒で完了し、制作スピードとリソース効率を飛躍的に高められます。

知識不足をカバーできる

HTMLやCSSなどの知識が不足していても、AIを活用すれば目的に沿ったコードを生成可能。
また、AIの出力を参考にすることで、学習のスピードが向上します。

ヒューマンエラーを防げる

AIは、手作業だと見逃しがちなミス（構文エラーやバグなど）を最小限に抑えます。
比較的高い精度でコードを生成しやすく、結果として品質向上につながる可能性があるでしょう。

AIコーディングの注意点

AIコーディングは便利な反面、すべてを信頼できるわけではありません。

AIが生成したコードはあくまで「たたき台」であり、最終的な設計や品質確認は人間によるレビューや判断で行う必要があります。

生成コードは必ず検証・テストする

AIが瞬時にコードを出してくれても、思わぬバグや想定外の動作が混ざることがあります。
開発環境で正しく表示されるか、動くかを必ず確認してください。

機密情報の入力は原則避ける

AIによっては、入力した内容が学習データに取り込まれるおそれがあり、機密情報の流出が懸念されます。

個人情報はもちろん、WordPressなどCMSのログイン情報、データベース接続情報、FTP／SFTPの認証情報などは、原則としてAIに入力しないよう注意しましょう。

セキュリティの脆弱性や著作権・ライセンス侵害に気を付ける

AIが生成したコードに、セキュリティホール（脆弱性）が発見された事例が報告されています。

Pearce 氏は Copilot がリリースされた直後、その機能を試していたという。Python の Flask フレームワークを使い、SQL でデータベースをたたくプログラムを生成させていたとき、あることに気づいた。SQL インジェクションの脆弱性がある、まるで徳丸本の解説に出てくるような典型的ダメダメコードが提案されたのだ。会場では、Copilot が SQL インジェクションを許すコードを提案してくる過程の動画が流された。

（引用：ScanNetSecurity「GitHub Copilot 提案コードに含まれていた脆弱性調査結果一覧」）

また、AIが過去に学習した他人のコードをそのまま出力し、著作権やライセンス違反となるケースもあるので、利用前に入念にチェックしてください。

なお、SQLインジェクションついては、以下の記事で解説しているので、あわせて参考にしてください。

細かいチューニングには不向きな場面もある

AIが生成したコードに修正を依頼しても、必ずしも期待どおりに反映されないこともあります。
やりとりに時間がかかると、かえって作業効率が低下するおそれがあるでしょう。

また、どうしても調整が難しい場合は、手作業で修正が必要になり、結果的にHTMLやCSSなど専門的な知識が求められます。

AI任せにしすぎず、自分でも学習する

AIはあくまで「学習のサポーター」です。
頼りすぎると自分で考える機会が減り、コーディングスキルの伸びしろを逃してしまいます。

生成されたコードを写すだけでなく、仕組みを理解しながら手を動かす時間を意識的に確保しましょう。

コーディングの学習方法

最後に、コーディングの学習方法を紹介します。
コーディングに興味を持たれた方は、少しずつでもよいので学習してみてください。

それぞれの学習方法について、メリットとデメリットを解説します。

オンライン学習サービス（おすすめ）

コーディングの学習をはじめるなら、オンライン学習サービスがおすすめです。

オンライン学習サービスは、インターネット環境があれば、パソコン、スマホ、タブレットなどを使って、好きなときに勉強できます。

なかでもおすすめなのが、『Progate（プロゲート）』です。

▲出典：Progate

『Progate（プロゲート）』は、スライド形式で学習を進めていきます。
自分で書いたソースコードが、ブラウザ上に反映された状態で見えるので、分かりやすいです。

また、レッスン毎にゴールが定められているほか、どれだけ時間を要するかの目安が書かれているため、スケジュール管理がしやすいのも特長です。

なお、無料プランでも基礎レッスンは受講できるため、まず体験してみてはいかがでしょうか。

書籍で学ぶ

本を読むことに慣れている方なら、書籍で学ぶのも一つの手です。

なお、書籍でコーディングを学ぶ場合は、「電子書籍の試し読み」がおすすめです。
書籍を購入する前に、本の内容や雰囲気がチェックできますよ。

また、初心者の方なら、図解が多く使われている本を選ぶと、内容が理解しやすいでしょう。
自分に最適な参考書を探してみてください。

プログラミングスクール

直接講師からサポートが受けられる「プログラミングスクール」を利用する方法があります。

この方法は、独学では不安な方、時間に余裕のある方、確実にスキルを身に付けたい方などにおすすめです。

とくに、ほかと比べて費用が高いのはデメリットです。
コーダーやプログラマーなどの職業に転職を志すなどでない場合は、まず独学から始めてはいかがでしょうか。

まとめ

この記事では、初めて企業のホームページを作る方向けに、コーディングの基礎知識や必要性について解説しました。

また、コーディングに使用する言語についても紹介したため、ホームページの構成や作り方について、今までよりもイメージしやすくなったのではないでしょうか。

これからホームページ制作を始めるときの参考になれば嬉しいです。

それでは、素敵なホームぺージの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！