ホームページ、ウェブサイトを作りたいと思ってもどのように始めたら良いのかわからないという方も多いのではないでしょうか。初心者だと、書籍で学ぶのが良いのか、講座か、無料なのかお金がかかるのかわからないと思います。初心者の方向けにどのようにホームページを作れば良いのかをご紹介します。
このページの目次
初心者ならどうする？全体像を把握する
ホームページ、ウェブサイトを作り始めようと思ったらどのように進めたら良いのか、
それはまず「全体像を把握する」ことです。ウェブサイトやホームページを作るために基本的に必要なものは以下の3つになります。
- ドメインを取得する（住所の取得）
- サーバー（土地の取得）
- サイト作成（必要なコードを書くこと）
ドメインを取得する
よく目にしたことがあるかと思いますが、「●●.com」「●●.jp」というのがドメインです。
ドメインは、例えると「住所を取得する」ようなものです。
家を立てるには土地を買わなければいけませんし、住民票をそこで取得しなければいけませんよね。
インターネット上で、住所を取得するためには住所を販売している会社から購入する必要があります。住所を販売している会社は複数ありますので、ここでは初心者の方にオススメの会社のみ紹介しておきます。
また、住所は保有権が１年間などと決まっているので、欲しい住所があったら、毎年契約しておく必要があります。
ドメインを取得する方法・やり方
ドメインを取得するのにオススメのサービスは、「ムームードメイン
」です。理由としては、初心者に簡単に使いやすく、基本的なウェブサイトの公開だけでなく、設定が楽な部分も多いからです。
例えば当サイトのドメイン名で検索すると、下記のような画像になります。
当サイトの場合は、.meとなっているので年間契約も安いですが、有名な「.jp」ドメインになると年間で、2840円かかります。
「ムームードメイン」でドメインを取得する場合は、●が付いているものが取得できるドメインとなっています。✖︎が付いているものは、すでに誰かに取得されてしまっているドメインなので取得することができません。
サービス名などを決める時、良いドメインから先に売れていってしまいますので、サービス名・サイト名が決まり次第早めに取得することをオススメします。
あまり知らない方は、一回ドメインを取得すると買い切りのイメージがありますが、ドメインは毎年継続的に料金がかかります。
公式サイト：「ムームードメイン」
ドメイン切れは要注意！
上で説明していますが、ドメインは１年間の契約になります。
1年ごとに契約を更新しなければいけないので、忘れてしまうとドメインが使えなくなってしまいます。
せっかく自分の「サイトやサービスがよく人にみられるようになった、成長して来た」のにドメインを失効してしまうと全てが水の泡になってしまいます。
※こういう話も少なくありません…。
対応策としては、クレジットカード支払いにして、自動更新設定をしておけば間違いありません。都度払いの必要もありませんので！
もし、クレジットカード支払いや、１年間の更新を辞めたいということでもすぐに設定変更が可能なので心配ありません。最初はクレジットカードで更新設定をしておくことをオススメします。
ムームードメインの特徴
ムームードメイン
は、初心者にも使いやすい画面で、金額もわかりやすい設定になっています。
初心者にも使いやすく、このあと紹介するレンタルサーバーとの連携も早いです。ドメインは先に取られている場合、絶対に同じドメインを取得することができません。
自分の欲しいドメインがあるか、ウェブサイト・ホームページを作成する前にチェックしておくことが大切です。それで先にロゴやサービス名を出してしまうと後から変えるのは非常に面倒ですからね！
これからサイトを作りたい、ホームページを公開したいという方は、ムームードメイン
が良いでしょう。
サーバーを取得する
サーバーは土地を取得するということと同じです。サーバーというのはドメインを取得した後に、取得して、そこに土地を取得して家を作るためのものです。
サーバーがなければホームページ、ウェブサイトを後悔することはできません。ドメインを取得した後に、サーバーを契約する必要があります。
サーバーはいくつかありますが、最初は「レンタルサーバー」と呼ばれるサーバーをレンタルで貸してくれるサービスから借ります。
レンタルサーバーで料金的にも使いやすさとしてもオススメなのが、「ロリポップ
」です。
ロリポップの特徴
- 初心者にも使いやすい管理画面
- ムームードメインとの連携もしやすい
- お問い合わせに親切に答えてくれる
- 独自SSLが無料で使える
- メールアドレスを複数作成することが簡単
サイトを作成する（必要なコードを書く）
ドメインと、サーバーを借りたり・購入したりした後には、公開するためのページが必要になります。ページを作成するためには、HTML/CSS/JavaScriptといったウェブページを構成するものを覚える必要があります。
HTML の書き方についてはこの後に紹介します。
ここまでで大事なことを振り返ります。
ウェブサイト制作を始める時のポイント
- ドメインを取得する
- サーバーを取得する
- ウェブサイトをつくるためのページを作成する
ホームページ作成でまず最初はHTMLが大事
HTMLというのは、ウェブサイトを公開するためのページを作るために必要な言語です。書き方は決まっているので、HTMLの基本的な書き方についてはこちらに詳細があります。
HTMLの基本構造と見え方
<html>
<head>
<meta />
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ウェブサイトの作成の初心者です。</h1>
<p>ウェブサイト、ホームページ制作を学ぶんでいます。</p>
</body>
</html>
上記のコードを、ブラウザ上でみたときにはこのような見え方になります。このようにHTMLは文書を構造的に書くための言語となっています。
このタグやテキスト（文書）を組み合わせて１つのページを作っています。
見た目に関しては全然何もしていないので質素な感じになっていますが、この見た目を変える役割をになっているのが、「CSS」です。
CSSの覚え方に関しては、書籍、独学と色々方法があります。HTML同様そこまで難しい言語ではないので、1日もあれば覚えられますよ！
プログラムを書き始めるにはエディターが必要
コードを書き始めるためにはエディターと呼ばれるツールが必要です。
しかし、エディターは基本無料で利用することができますよ！インターネットで検索してエディターを探してみてください。オススメのエディターに関してこちらの記事を合わせてどうぞ。
無料でホームページの作り方が学べる方法
無料でホームページの作り方が学ぶということは、上記の通り、HTMLやCSSを学ぶということです。HTML・CSSは動画で勉強することもできますし、HTMLのドキュメントをみて学ぶということもあります。
ドットインストール
動画でワンステップずつ学ぶことができるサービスです。エンジニアの方が喋りながら書くコードを自分で写して勉強していく形です。これを写経と言います。
写経は良いコードを書くため、ウェブサイトを作っていくためのまず最初の道になっています。誰でも最初は真似することから始まりますので、まずはHTMLのコードを写して、書いてみてどうやって動いているのかをチェックしてみましょう。
ホームページの作り方でオススメの本
最初は、ドメイン、サーバー、ウェブページを作成するという本を三冊買って概要を理解するというのがオススメです。しかし、「最初からある程度のウェブサイトを作って学びたい」という方のために一冊だけ厳選してご紹介しておきます。
その先が必要な方はこちらのページで詳細をご確認ください。
HTML・CSS、ホームページ制作を覚えるのにオススメの講座
プログラミングスクール・教室が充実してきており、初心者でもプログラミングやWebデザインを覚えて、デザイナーやエンジニアになることができる時代になってきました。
当サイトでも実際に1ヶ月プログラミングスクールに通って、上場企業のエンジニアとして転職した事例も公開しました。
オススメのスクール
ウェブキャンプ、コードキャンプ、テックキャンプという３つのサービスがオススメです。
それぞれオンラインで学ぶことができるもの、リアルにスクールに通うものがあります。
それぞれのメリットを精査すると下記になります。
オンラインで学ぶこと：交通費がかからない、面倒がない、家で学ぶことができる
リアルで学ぶこと：先生にマンツーマンで聞ける、周りの人と切磋琢磨できる
書籍でも学ぶことができますが、独学で学んでいくとつまづいたときに時間がかかります。時間をお金で買うという感覚ですが、エンジニアやデザイナーの先生に勉強の仕方を直接聞いたり、自分の作りたいものを聞いた方が効率が良いです。
書いている私もエンジニアですが、勉強の仕方は間違わない方が良いでしょう。
HTML とCSSを学んだ人はJavaScript
HTMLとCSSは基本的なところですが、次は基本的にどのウェブサイト・ホームページでも使われているJavaScriptを勉強することをおすすめします。
JavaScriptは初心者でも覚えやすい言語である理由や、学習方法はこちらに詳しく説明してありますので、合わせてどうぞ。
ホームページの作り方 mac編
ローカル環境と本番環境（自分の取得したドメインでみえる環境）という違いがあります。
ローカル環境というのは自分のパソコン上で動かしているだけで、世界には公開されていません。そのローカル環境を構築する必要があるサイトは下記のようなサイトです。
ローカル環境を構築する必要があるサイト
ブログやデータを保存したり、するSNS、投稿型の掲示板サイトなどを開発する場合はローカル環境を構築して、デバック（動きの確認）をする必要があります。
これは、上記で紹介したHTMLのクライアントサイド（目に見える部分）とは異なり、サーバーサイドと言います。
その後、ローカル環境でウェブサイトを作って、ウェブページを確認して問題のないものを本番環境（世界中に見える環境）に公開します。
ブラウザのアドレスバーに自分のドメインを入力したり、自分のサイトが何かで検索されたときに引っかかるようになります。
サーバーサイドでの動きをみられるようにするためにはウェブサーバーが必要です。このウェブサーバーは、MAMPと呼ばれる無料のツールで構築することができます。
公式サイト：https://www.mamp.info/en/
ホームページの作り方 ワードプレス利用をする
ホームページ、ウェブサイト作成は非常に簡単になりました。
それはワードプレスと呼ばれるシステムを使うことで最短1分で構築することが可能です。
上記で紹介している、「ロリポップ
」と「ムームードメイン」で必要なものが揃っていればすぐにサイトを公開できます。
無料でサイトを公開できるものもありますが、アレンジが細かくできなかったり、綺麗にならなかったりしますが、自分のサイトを持つことができるというのは気持ちが良いものです。
これからの時代に、自分をプレゼンテーションするツール（サイト）があるのは基本です。
ぜひWordPressを利用して、ホームページを作ってみてください。
ワードプレスについてスクールで勉強したいという方はこちらでオススメしています。
WordPressはPHPと呼ばれるプログラミング言語で動いています。ウェブサイトを作るのは1分で作ることができますが、そのあとのレベルは若干上がります。
なので、スクールで覚えることをオススメしていますが、その後PHPを勉強していきたいという方にはこちらでPHPの学習方法をご紹介しています。
