これから新規事業を始めよう、と思っている方にとって大きな課題となるのが「集客」。

集客手段の1つが「ホームページ」による宣伝です。ホームページと聞くと、「作るのが難しいのではないか」「外注しないとクオリティの高いものができないのでは…」と思う方が多いでしょう。

しかし、最近ではホームページを簡単に作れるツールが登場したり、自力で作ることもできるようになってきました。特に、自力でホームページを作ることで他のサイトとの差別化が図れたり、自由に機能を持たせられます。

この記事では、ホームページを作る手段の紹介と自力でホームページを制作するときに必要なプログラミング言語を解説します。

ホームページを作る手段

ホームページを作る方法は大きく以下の3つがあります。

  • ツールを利用する
  • 制作会社に依頼する
  • プログラミングで制作する

ツールを利用する

1つ目の方法は、ホームページ制作用のツールを使うことです。

ツールとは、デザインや配置を選ぶだけでホームページが制作されるもので、多くの制作ツールが登場しています。中には無料利用ができるものもあり、できるだけ手間をかけずに素早く制作したい方におすすめです。

初心者におすすめのホームページ作成ツールについては、下記記事で詳しく解説しているのでご参照ください。

2020.11.17

2024.09.02

初心者におすすめの無料ホームページ作成ツール7選

いまの時代、制作会社に外注しなくても、ホームページを簡単に作れてしまいます。 理由は、自分でホームページを作成するのに便利なツールやテンプレートが存在するからです。それらの多くは無料もしくは低料金で利用できます。 ホームページは、膨大な費用と時間をかけて作るものでは、もはやありません。無...

制作会社に依頼する

2つ目の方法は、制作会社に依頼する方法です。

制作会社は、こちらが提示したデザインに沿ってホームページを作ってくれるため、クオリティの高いものが作れます。また、ホームページを公開するにあたり必要となってくるドメイン取得・サーバー設定などの作業も不要となるため、予算に余裕がある方におすすめです。

しかし、制作会社によって金額はバラバラになるので、実際に話を聞いて比較したうえでの選択が良いでしょう。

プログラミングで制作する

3つ目の方法は、プログラミングを使って制作する方法です。

自分で制作するため、金銭的なコストをかけずに制作が可能です。しかしその分、クオリティの高いホームページを作るためには学習コストがかかってきます。

ただし最近では、フレームワークやライブラリの登場で、簡単にクオリティの高いものを作れるようになってきているのです。

これから始めるという方でも、Web上にある多くの情報を活用すれば充分に制作できるでしょう。

ホームページ制作に必要なプログラミング言語とは

ホームページを制作する場合、大きく3つの要素に分けられます。

  • 文字や文章といった骨格
  • サイト全体の装飾
  • サイト全体の動き

ここでは、3つの要素に沿って対応するプログラミングを紹介していきます。

HTMLでホームページの骨格を作る

1つ目は、ホームページの骨格になるHTML（HyperText Markup Language）です。

HTMLは、タグの間に文章を記載していくもので、メモ帳さえあれば簡単にできます。例えば以下のコードをメモ帳に書いて、「test.html」というファイル名で保存してみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ホームページ制作に必要な基本的なプログラミング言語・フレームワーク</title>
  </head>
  <body>
    <h1>ホームページを作る手段</h1>
    <p>ホームページを作る方法は大きく以下の3つがあります。</p>
    <ul>
	<li>ツールを利用する</li>
	<li>制作会社に依頼する</li>
	<li>プログラミングで制作する</li>
    </ul>
  </body>
</html>

test.htmlを実行すると、ブラウザ上に以下の表示がされます。

ホームページをつくる手段

これはパソコン上のファイルを開いているため、Web上に公開されているわけではありません。公開するためには、ドメインやサーバーなどの準備が必要です。

このように文字の羅列を作っていくことで骨格を形成していきます。

CSSで装飾をする

2つ目は、ホームページ全体を装飾するCSS（Cascading Style Sheets）です。

CSSは、文字に色を付けたり、背景を付けたり、ボックス化したりできます。先ほど作ったHTMLを以下のコードに修正してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <style>
    html{
      text-align:center;
    }
    h1 {
      color: red;
    }
    </style>	
    <title>ホームページ制作に必要な基本的なプログラミング言語・フレームワーク</title>
  </head>
  <body>
    <h1>ホームページを作る手段</h1>
    <p>ホームページを作る方法は大きく以下の3つがあります。</p>
    <ul>
	<li>ツールを利用する</li>
	<li>制作会社に依頼する</li>
	<li>プログラミングで制作する</li>
    </ul>
  </body>
</html>

このコードを実行すると以下の表示になります。

CSSの装飾

これは、一行目に赤文字の装飾を付けて、サイト全体を中央に寄せました。CSSの定義方法は、今回のように直接HTML内に記載する方法とCSSファイルを新たに作成して呼び出す方法があります。

このようにCSSを使うことで、HTMLだけで作られたホームページよりも見た目が良くなりました。

JavaScriptで動きのあるサイトへ

3つ目は、ホームページに動きを付けるJavaScriptです。

JavaScriptはスクリプト言語と呼ばれており、ボタンを押したときや文字にマウスカーソルが当たったときなどに処理を実行できます。

以下のコードでは、ホームページ内のボタンを押すとアラートを表示させるコードとなっています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <style>
    html{
      text-align:center;
    }
    h1 {
      color: red;
    }
    </style>	
    <title>ホームページ制作に必要な基本的なプログラミング言語・フレームワーク</title>
　　<script language="javascript" type="text/javascript">
        function buttonClick() {
        　alert('アラートが表示されたよ');
        }
    </script>
  </head>
  <body>
    <h1>ホームページを作る手段</h1>
    <p>ホームページを作る方法は大きく以下の3つがあります。</p>
    <ul>
	<li>ツールを利用する</li>
	<li>制作会社に依頼する</li>
	<li>プログラミングで制作する</li>
    </ul>
    <input type="button" value="アラートを表示させる" onclick="buttonClick()"/>
  </body>
</html>

「アラートを表示させる」というボタンをクリックすると、アラートが表示されるのが分かります。

Javascript実装例

このように、JavaScriptによって静的だったホームページが動的に変わるのです。

2021.03.28

2022.05.26

【JavaScriptの入門】条件分岐 -if文

if文による条件分岐は、さまざまなプログラミング言語で良く使用されており、JavaScriptにおいても必須の知識です。 今回はプログラミングを行う上で、初期段階で学ぶif文の基本を初心者向けに分かりやすく解説していきます。この記事を通して、if文を深く理解していきましょう。 if文 ...

2021.04.08

2022.05.26

【JavaScriptの入門】条件分岐 -switch文

JavaScriptの条件分岐には、if文とswitch文が使われています。 一般的に良く目にするのがif文ですが、場合によってはswitch文を使う方が可読性が上がることがあります。 今回は、switch文の使い方を解説しながら、if文との比較を見ていきます。 switch文 swit...

【JavaScriptの入門】ダイアログボックス – ワードプレステーマTCD

突然注意書き画面が飛び出してくるようなWebページを見たことはありませんか？このようなユーザーの注意を引くための表示機能をダイアログボックス（ポップアップウィンドウ）と言います。

ホームページ制作を効率化するフレームワーク/ライブラリ3選

プログラミング言語には、フレームワークやライブラリというのがあります。

フレームワークとは、ある機能を実現したいときにあらかじめ用意されている骨組みのことです。フレームワークによってコーディング量が減り、開発スピードが向上するのはもちろん、メンテナンス性も高くなります。

ライブラリは、フレームワークと同じく呼び出すことで機能を楽に実現できるものです。フレームワークとの大きな違いは、ライブラリが部分的であるのに対して、フレークワークは全体を作るという部分です。

しかし、JavaScriptやCSSでは違いが分かりにくいため、特に意識しなくても大丈夫です。

ここでは、ホームページ制作に使えるフレームワークとライブラリを合わせて3つご紹介します。

BootStrap

1つ目は、CSSのフレークワークである「BootStrap（ブートストラップ）」です。

BootStrapを導入することで、初心者でも優れたデザインのホームページ作成が可能となります。

こちらをご覧ください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <!--bootstrap.css-->
    <link rel="stylesheet" href="C:\test\bootstrap-4.5.0-dist\css\bootstrap.css">
    <title>ホームページ制作に必要な基本的なプログラミング言語・フレームワーク</title>
　　<script language="javascript" type="text/javascript">
        function buttonClick() {
        　alert('アラートが表示されたよ');
        }
    </script>
  </head>
  <body>
    <h1>ホームページを作る手段</h1>
    <p>ホームページを作る方法は大きく以下の3つがあります。</p>
    <ul>
	<li>ツールを利用する</li>
	<li>制作会社に依頼する</li>
	<li>プログラミングで制作する</li>
    </ul>
    <input type="button" class="btn btn-success" value="アラートを表示させる" onclick="buttonClick()"/>
  </body>
</html>

このコードを実行すると、以下のようにボタンのデザインが変更されます。

これは、BootStrapのプログラムを読み込み、適用したデザインのクラスをボタンに記載したことで実現されています。赤く囲んでいる「class=”btn btn-success”」という部分が実装部分です。

フレークワークを使わずに実現した場合は、CSSで全て設定しなければいけません。しかし、BootStrapを活用するとたった一行で実現できるのです。

jQuery

2つ目は、JavaScriptのライブラリとして有名な「jQuery（ジェイクエリ）」です。

jQueryは、JavaScriptで何行にも渡るコードをたった数行で実現できるもので、jQueryでしか実現できない機能も存在します。

例えば、非同期処理と呼ばれる「Ajax」はよく使われるライブラリの1つです。

jQueryを利用する際には、JavaScriptで実現すると難しそうだなというときに置き換えとして活用するのがおすすめです。

Vue js

3つ目は、JavaScriptのフレームワークである「Vue.js（ヴュージェイエス）」です。

Vue.jsは、簡単に言うとHTML+JavaScriptの機能を持ち合わせているもので、jQueryと同様にscriptタグを書けばすぐに利用できます。

Vue.jsの特徴は何といってもDOM操作が不要であることです。DOM操作とは、JavaScriptからHTMLのタグにアクセスし、CSSの追加や値の取得をおこなうことです。

Vue.jsはHTMLとJavaScriptの機能を持っているため、それぞれの要素を自動で対応してくれます。JavaScriptの知識があれば習得可能なので、選択肢の1つとして考えてみましょう。

ホームページを自作するなら、Vue.js+BootStrapがおすすめ

自力でホームページを作る場合、開発の手助けとなるフレームワークやライブラリの活用が求められます。もしホームページを自作する、という方がいればVue.js+BootStrapの組み合わせをおすすめします。

Vue.jsでHTMLとJavaScriptを実装し、BootStrapでデザイン部分を構築できるためクオリティの高いホームページを作成できます。

しかし、自作でホームページを作ったもののイマイチな出来に悩んでいる方も多いかもしれません。そんな方は、以下の記事を参考に自作したホームページを見直すのがおすすめです。

2019.03.14

2019.03.31

自作のホームページがイマイチな理由

ホームページは作って終わりではありません、もしあなたが作って放置しているだけでホームページから収益が上がると認識していたら、サイト制作に使った費用と労力を丸々損することに繋がりかねません。この記事では特にホームページを自分で作った場合に陥りそうな要素について考えていきます。近年、WordPressの...

ホームページは作って終わりではありません。むしろ、これから始める事業に向けて見直しを図ったり、解析をしてより良いものにしていく必要があります。

この記事を参考に、一人でも多くの方がホームページ制作に足を踏み入れてくれると嬉しいです。

「ホームページ作成」の記事一覧

第1回：ホームページとは？
第2回：WordPressとは？
第3回：無料ホームページ作成ツール7選
第4回：無料ネットショップ開設ツール5選
第5回：ホームページを自分で作る方法
第6回：Web制作会社の料金相場
第7回：フリーランスの料金相場
第8回：企業ホームページはどのツールで作成すべきか
第9回：ホームページのプログラミング言語とフレームワーク（当記事）
第10回：ホームページ作成ガイド