ホームページの作り方

【1週間で作れる!】ホームページの作り方

2019年のいまではホームページを作るためのサービスも増えて、実に様々な選択肢が持てるようになりました。 10年ぐらい前まではHTMLがわからない人は、無料ブログかホームページビルダーなどのホームページ作成ソフトを使って ホームページ作成をする人が多かったと思います。ホームページを作る選択肢は多くありませんでした。

それが今ではワードプレスのようにHTMLがわからなくてもある程度ちゃんとしたものが作れるシステムがあったり、 「WIX」などのような”かんたん作成サービス”も増えてきてHTMLを知らなくともデザインや内容に優れたホームページ運営ができるようになっています。

そこで、ここではまず、ホームページの作り方を説明する前に、ホームぺージを作りはじめるとしてどんなサービスがあるのか説明してみたいと思います。

ホームページはどうやって作る?「ワードプレス」や「かんたんホームページ作成サービス」など作り方も様々

1.「ワードプレス」 htmlを知らなくとも自分のブログが持てる”ワードプレス”が今は大人気

いまホームページを作る人の80%以上はおそらくこのワードプレスを使っているのではないかと思えるほど、最近はワードプレスばかり見かけます。 このワードプレスですが、いわゆる無料ブログのシステムをそのまま自分で持てることになります。

デザインや広告の制限なしに使えることや、プラグインやウジェット機能などによりhtmlを知らなくともボタン操作だけでそれなりのものが作れてしまうので、 日本に限らず世界的にとても人気になっています。

【10分でわかる】ワードプレスの作り方

2.「ホームページかんたん作成ツール」 かんたん作成サービスならボタン操作で作れる

グーペWIXのようにボタン感覚でホームページが作れるサービスもここ5年ぐらいでとても人気になってきています。 ワードプレスよりも簡単にホームページが作れるのが特徴です。

昔はこのようなサービスがあってもデザインがいまいちだったり、機能がいまいちでしたがここ最近のものはwebデザイナーが作ったようなものが 作れてしまうぐらいまでになっています。

グーペなどではお店の予約機能をつけれたり、お問合せ機能をつけれたりとホームページを作るだけでなく、店舗運営に必要な機能も 一通りそろっています。

3.「ホームぺージ作成ソフト」ホームページビルダーを使って作る

ホームページを作る3つ目の方法が”ホームページ作成ソフト”を使って作る方法になります。有名なところとしては「ホームページビルダー」や 「シリウス」などの作成ソフトがあります。 ただ、ここ最近ではワードプレスやかんたん作成サービスを選ぶ人が増えてきたためか、あまり作成ソフトを使ったホームページは見かけなくなってきています。

4.「自分で作る」HTMLを使って自作する

なんだかんだ言って、ホームページを作るうえでHTMLを知っていると強いです。覚えるにはそれなりに時間がかかりますが、 その分、デザインの細かな修正などができるようになります。 たとえワードプレス作成でもウィジェット機能だけでは限界があり、最終的にはやはりテーマのファイルのHTMLを修正していくことになります。

そこで次の章からは、このHTMLを使ってホームページを作る方法について詳しく解説していきたいと思います。

1週間でホームページを作ろう!

はじめてホームページを作る方でも1週間で作れるように、まずはかんたんなページを作るための解説をしています。

【1日目】レンタルサーバーに申込みをする

まず、ホームページ作成に必要になるのがレンタルサーバーと独自ドメイン

HTMLで作ったホームページを公開する場合、基本的には「レンタルサーバー」の申込みと「ドメイン」の取得が必要になります。 例えばレンタルサーバーは「エックスサーバー」で借りて独自ドメインは「お名前.com」で取得するといったようにです。

はじめての方にとっては管理画面が使いやすくて各種設定のしやすいところや、機能やサービスが良くて人気があるレンタルサーバーがおすすめになります。 個人的には1番人気になっている「エックスサーバー」や、ワードプレス複数作成するときなどでも、設定がとてもわかりやすい「ヘテムル」が使いやすいのではないかと思っています。

1日目:レンタルサーバーを選ぶ

【2日目】ドメインを取得する

ドメインを取得することで自分だけのURLを持てるようになります。基本的にはレンタルサーバーと同様にドメインも取得しなくてはなりません。 ドメインについては早い者勝ちになるので既に取得されてしまっている場合については、他のドメインを探すことになります。 (→ドメインってなに?

「.com」や「.jp」などが人気になりますが、「.shop」や「.conpany」など100種類以上もドメインの種類がありますので、 このようなドメインであれば単一キーワードの独自ドメインが取得できるかもしれません。

ドメインの管理画面でネーム設定も忘れずに

また、ドメイン側の設定画面で、どのレンタルサーバーを使っているかネーム登録というものをする必要もあります。 ネーム登録についても必ず設定が必要になるものなので覚えておきましょう。

2日目:ドメインを取得する

【3日目】メインページを作る

レンタルサーバーとドメインを申込んだら、次はページデータを作ります。まずメインのページとなる「index.html」という名前のファイルを作成しましょう。 作るには「メモ帳」や「秀丸エディタ」のようなエディタソフトを使って作ります。

このメインページを作るときに必要になるのがHTMLになります。プログラムというほど難しくはありませんが、HTMLをエディタソフトに入力することで ページの大枠部分を作ることができ、文章を入力したり表を作ったりすることが出来るようになります。

このページもメモ帳にHTMLを入力して作っています。HTMLはホームページ作成で1番勉強が必要となるところで1日で勉強しきれるものではないですが、 まず簡単なページだけを作ってみるということで解説しています。

3日目:メインページを作る

【4日目】スタイルシートを作る

「index.html」ファイルを作ったら、次に作るのがこのスタイルシートになります。スタイルシートでは文字の色や大きさを変えたり、 背景色をつけたり、画像の位置を決めたりと、デザインを自分なりに指定することができるようになります。

スタイルシートもとても1日では覚えきれるものではありませんので、まずは1番簡単な文字の装飾から初めてみて慣れていくのがいいと思います。

4日目:スタイルシートを作る

【5日目】デザインする

ホームページはHTMLで作成した大枠を、スタイルシートでデザインを指定するようなイメージで作りこんでいきます。 スタイルシートでは文字の装飾以外にも、多くのことをデザインできます。 5日目ではより応用したページデザインができるよう、覚えておくと便利なHTMLとスタイルシートの使い方を勉強します。

5日目:デザインする

【6日目】ページを増やす

「index.html」と「スタイルシート」を作成した時点でメインとなるページを1ページ作ったことになります。 実際のホームページでは、メインページ以外にも様々なページを作っていくことになるので、ページの追加方法やリンクについての 学びましょう。

6日目:ページを増やす

【7日目】FTPでページを公開する

作ったページデータもそのままではインターネットとして公開されていませんので、データをアップロードする必要があります。 データをアップロードするにはFTPと呼ばれる機能を使います。

FTPはレンタルサーバーの管理画面についているので、レンタルサーバーで使うことも出来ますし 「FFFTP」のような無料ソフトをダウンロードして使うこともできます。

7日目:ページを公開する

まずは簡単なページから作ってみよう

ここまでの操作を行うことでホームページを作ることができますが、まずは文章だけの簡単なものから作っていき、そこから文字の装飾をしたり 背景色を付けたり、2列に分けてみたりと、少しずつ作っていくと勉強になると思います。

ホームページ作成に便利なページ

自分でホームページを作る!と決めた場合に知っておいて欲しい知識を各ページにまとめてみました。 いざ作り始めて便利な”素材サイト”の紹介や”バナー作成ソフト”についてなど、自分でホームページを作りこむためのノウハウ的なポイントを紹介しています。

「HTML」や「CSS」に「ファイル階層の概念」などホームページを作る上で知っておいて欲しい「ホームページの骨組み」について。

どうやったらホームページが作れるのか?どんなファイルを使って、どんな構造になっているのか?どんな作業が必要なのか? 少し内容が難しくなっていますが、ホームページを自作するのであれば、最初に知っておいて損しない内容についてまとめています。

【超基礎】ホームページの作り方まとめ

気持ち鷲づかみの無料・有料のホームページテンプレート!

ホームページテンプレート

なかなか自分が使いたいHTMLテンプレートってないんですよね。けっこう探すのに時間がかかります。 そこで自分で使って見てよかったと思えたテンプレートサイトを紹介しています!

無料・有料ホームページテンプレートの解説はこちら。

おしゃれに!仕事でも使える無料・有料の素材サイト10選

有料・無料の素材サイト

写真やアイコンやイラストを1つでも入れるとページが華やかになりますよね。 そこで仕事での利用にも耐えうる高品質な素材サイトを集めてみました。

おしゃれに!仕事でも使える無料・有料の素材サイト10選の解説はこちら。

「切り抜き」「リサイズ」「カラーバランス」私がフォトショップの操作でよく使う「利用頻度」高めの操作まとめ。

フォトショップの勉強

フォトショップはたまに使っていますが、自分で使っていて使用頻度が高く便利だなと思えた操作をまとめて紹介したいと思います。

フォトショップの操作まとめ

HTML5・CSS3でよく使っている高頻度タグの紹介。

HTML5やCSS3の勉強

いまはHTML5とCSS3が主流になってきているのではないかと思いますが、この運営サイトも数年前にHTML5に切り替えました。 そこで私がサイト作成する上でよく使っている高頻度タグについて紹介しています。

Html5とCSS3を勉強するならこちら。

WEBデザインを構築するときによく使っていたサービスまとめ

webデザインの勉強

Webデザインの参考にする時、1つ1つ勉強になるサイトを探していたのでは時間がかかります。そこでデザインがいいサイトを紹介してくれているまとめサイトを、さらにまとめています。 また配色のときに参考になるようなカラーリファレンスのサイトなどについてもまとめてます。

WEBデザインが勉強できるサイト

誰でも3日あればホームページが作れる!?Webサイトビルダーやホームページ作成ソフトを徹底比較!

ホームページ作成ソフト

ホームページビルダーを筆頭にかんたんにホームページ作成が出来るようになる・・・はずのホームページ作成ソフト。 どのソフトが1番作りやすいのか?メリットやデメリットを含めて徹底的に比較してみました。

誰でもかんたんに作れる!ホームページ作成ソフトを徹底比較!の解説はこちら。

web制作会社に依頼したい方へ

Web制作会社に依頼してホームページを作る。と決めても「料金の目安はいくらなのか?」「どくらいのことまで運営してくれるのか?保守は?」といったように わからない点がたくさんあると思います。そこで制作会社に依頼するための情報をまとめてみました。

自分で作るのか?依頼をするのか?

初めての人がホームページを作るといっても、かなりの労力がかかります。 以前よりツールのなどの登場で作るのがかんたんになったとはいえ、その後の運営なども考えるとまず最初に自分でやるのか?それとも会社に依頼するのか? といった点の考えをまとめなくてはいけません。

自作するか依頼するか?違いや料金のまとめ

10万円以内で作りたい!ホームページ作成の料金相場や目安をまとめてみました。

会社のホームページ作成を急に作ることになってしまった・・・、自分でお店を立ち上げたのでホームページで集客したい。 実際にWeb制作会社に依頼したらどれくらいの価格になるのか、大体の目安をまとめています。

ホームページ作成の料金相場や目安