初心者がホームページの作り方を勉強する前に理解しておきたいホームページ制作の全体図。


このブログを見ている人の中には、まだホームページを持っていなくてこれから作りたいと思っている人も多いと思います。
制作会社に頼むとお金がかかるので、まずは自分で作ってみようと考える人も多いです。
ホームページを作るのにはどこから手を付けたらいいでしょうか。
何もわからない状態では何から勉強をしたらいいかすらわからないという人もいるでしょう。

せっかくたくさんの人に来ていただいているので、
ホームページを自分で作りたいという方のために、
これだけ知っていればとりあえず何をすればいいかわかるっていうことを、これまで自分が独学してきた目線で書きたいと思います。

かなり前に、HTML講座とかCSS講座とか自分で書いてました。
自費出版でオンラインで雑誌を販売していたこともありましたが、
技術的なことを書き出すときりがない!!
ので、技術的な話は別で勉強してください。
それよりも、何を勉強すればいいのかがわかることが大事なので、その辺について書きます。
どうやってホームページを勉強していくのかという話を通して、ホームページの作り方の大切なところがわかってくると思います。

ホームページを作るためのアプローチ

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

ホームページの作り方

イチから自分で作る

テキストエディタやホームページ作成ソフトを使って自分でHTMLやCSSを書いて作ります。
HTMLやCSSを覚えることで思い通りのホームページが作れるようになります。
ただし、それらを勉強するのにもちろん時間がかかりますので、
本格的に自分で作れるようになりたいと考えている人以外はサービスを利用する方がよいでしょう。

ツールを使って作る

HTMLやCSSなんてよくわからないものを覚える時間がない。
手っ取り早くお金をかけずにホームページを作りたい。
そんな人のためにあるのがホームページ作成ツール(サービス)で、
デザインを選んでマウスのドラッグアンドドロップで自分の思い通りに作れます。
無料のものと有料のものがありますが、無料でもホームページを持つには十分な機能を備えています。
デメリットとしては、そういったツールに頼っているとツールの機能以外のことができません。
また、作ったものはそのサービス上でしか動かないのでずっとそのツールを使い続ける必要があります。

ホームページ作成ツール(サービス)についてはこちらを参照してください。
厳選!無料のホームページ作成ソフトのチェック項目を公開。プロ視点の重視したい機能の解説付き。

ホームページ制作会社にお願いする

本格的にホームページを作りたい場合は、ホームページ制作会社にお願いするのが一番です。
日々情報が変わっていくホームページ業界では、それらの情報に常に触れられる状況でないとついていけません。
制作会社にお願いすることで、常に新しく適切な技術でホームページを作ってもらえます。

今回はホームページを自分で作るっていうのをざっくりと一通り紹介していきます。

ホームページを作るざっくりとした話

ホームページを作ってそれを公開する。
その流れをざっくりと紹介します。
細かいことを読む前に、だいたいのアウトラインを知っておくことは後の理解のために大切です。

サーバー上にファイルを置くことでホームページを公開する

ホームページというのはHTMLという言語でできたファイルをブラウザで読ませることで表示させています。
そのデータは誰でも見れるところに無いといけないので、自分のパソコンではなくてサーバーという場所に置きます。
このサーバーはホームページのデータを置くのに必要だと理解してください。
img
こんな感じでファイルをサーバーに上げます。

サーバー上のファイルをブラウザで閲覧するためのドメイン

このサーバーのデータを見るためにはアドレスが必要です。
ブラウザの上部に表示されるURLです。
img
このURLはドメインというものを取ることで使えるようになります。
例えば、
URLが「http://y-com.info」であればドメインは「y-com.info」になります。
先ほどのサーバーとあわせて、こちらのドメインも取得しておく必要があります。

自分のパソコンで作ってサーバーに上げる

最低限必要なのが上で挙げた「サーバー」と「ドメイン」で、
作ったHTMLファイルをサーバーに上げることで、ドメインをもとにしたURLからページを見れるようになるんです。
で、そのHTMLファイルはどこで作るかっていうと自分のパソコン上です。
自分のパソコン上で作ったHTMLファイルを含む一式をサーバーにアップすることで、
取得したドメインでホームページを見れるようになります。

なので、大雑把に書けば、
1.自分のパソコンでホームページを作る
2.作ったホームページをサーバーに上げる

この手順です。

ホームページを作るために必要なこと

ホームページ作成のための環境

ホームページを作るのに必要な環境を上げていきます。
基本的には、先ほど書いた話をより具体的に紹介する形です。
細かい部分はここでは書かないので、参考サイトを挙げる形にします。

サーバー

ホームページのデータを置くための場所であるサーバーを用意しましょう。
初めはレンタルサーバーを借りるのがいいでしょう。
どこを使えばいいのかっていうのは用途によっていろいろとありますが、
初めてホームページを作る人は以下のどちらかでいいでしょう。
さくらインターネット
Xserver
どっちでもいいです。
厳密にはいろいと選ぶ基準はありますが、初めての人はどちらでもいいです。

ドメイン

ホームページの置き場所ができたら、次はURLを決めましょう。
ドメインを契約すればURLも決まります。
初心者の人は、サーバーのところでも紹介した
さくらインターネット
Xserver
これらでサーバーの契約と同時に取れるのでその方が設定とか少なくて済むのでいいです。

複数ドメインを持ちたいとか、ドメインを別で契約したいとかいう場合は、
ドメインを契約するサービスがいくつかあります。
ムームードメイン
お名前どっとこむ
このあたりでいいでしょう。

Xampp

少し高度(?)な話なので難しければ途中で飛ばしてください。
いずれは使うことになるのでざっと見ておくといいかもしれません。

ホームページはHTMLファイルでできているといいました。
「index.html」というファイルをパソコンで作ってその中に適当な言葉を書いてみてください。
img
それを「index.html」として保存する。
img
これをブラウザにドラッグすると、先ほど書いたテキストがブラウザ上に表示されます。
img
本来のHTMLに必要なルールを完全無視した一番シンプルな形。
だけど、これがホームページを作るっていう感覚です。
HTMLファイルに書いた内容をブラウザで表示するっていうこの感覚をまず体感してください。

こうやってホームページを作っていきます。
その具体的な方法はここでは紹介しませんが、その作り方はネット上で探してもいいし本で読んでもいい。
いくらでも情報はあるので、例えば次のところで勉強してみましょう。
AllAboutデジタル(ホームページ作成)

本もわかりやすいのがいくらでも出てるので、Amazonとかで探すといいですよ。
実際に勉強したものではないのでどれがオススメというのはないので、直接Amazonにリンクを貼っておきます。
ホームページ作成

HTMLの勉強のコツは、本をイチから読むのではなく、自分の作りたいサイトをまず考えて、
それを作る中で必要なものをリファレンス的に読むのがいいです。
イチからすべて読んだとしても、使わない内容も意外にあって、全てまじめに勉強すると時間の無駄です。
経験で学ぶ方が早いですよ。

おっと、話が飛んでるじゃないか!ここではXamppの話をしているのでした。
Xamppというのはサーバーと同じような環境を自分のパソコン上で再現するということ。
Xamppじゃないといけないといわけじゃなくて、他にも同じようにローカルのパソコンをサーバー化するアプリケーションはありますが、僕がこれを使ってるのでこれを紹介しておきま鵜s。
簡単なホームページであればXamppは入れなくてもいいのですが、
もし高度なことをしたい(例えばPHPとかDBなどを使いたい)という人は入れないといけません。
Wordpressを使ったホームページとかを考えている人は、
パソコン上でそのままでは動かないので、Xamppの上で動かします。
Xamppの説明はここでは省きます。

WordPressでホームページを作る人は必要なので
独断と偏見でここ紹介しておきます
初心者でも簡単!XAMPPを使ってローカル環境にWordPressをインストール!

私まだホームページのこと何もわかっていません、な人はXamppは飛ばして大丈夫です。

ホームページ作成ソフト

ではホームページを作りましょう。
ホームページを作るにはHTMLとかCSSとかを書かないといけません。

  • HTML:ページの文章構造を決定する
  • CSS:ページのデザインを定義する

具体的な話は、ホームページの作り方の書籍やサイトを読みましょう。

これを書くために特別なソフトが必要なのかというとそうではありません。
Windowsについているメモ帳でも作れます。
が、メモ帳は機能が貧弱なのでフリーでも優良なテキストエディタはたくさんあるので探して使ってみましょう。
その辺についてはここで書きました。
プロが使っているおすすめのホームページ作成ソフトって何ですか?にプロが答えます。

FTPソフト

ローカルで作ったホームページをサーバーにアップするためには、FTPというソフトが必要です。
FTPの機能が付いたホームページ作成ソフトもありますが(Dreamweaverとかその他いろいろ)、
ここではそういったソフトを持っていなくても単独で動くFTPソフトを紹介します。

FFFTP
日本の定番ソフトです。シンプルなので使いやすいと思います。

FileZilla
インターフェースが少し複雑に見えますが、1画面で操作できるので時短になります。僕はこっち。

サーバーからFTP情報を与えられるのでそれをFTPソフトで設定します。
これだけと言えばこれだけですが、初めての人には難しいと思います。

肝心の設定方法とか使い方についてはここでは触れないのですが、
「FTP 設定」とかで調べてもらうとわかりやすいサイトがたくさん出てくるのでそこで調べてみましょう。

ホームページ作成のための技術について

環境はそろったので実際にホームページを作ります。
と言っても、ここでは具体的な作り方については触れませんので、
キーワードを調べて勉強してください。
ネット上で勉強するのもいいですが、本当に初心者の人は1冊くらい初心者向けのホームページの作り方の本を読むといいですよ。
HTML、CSS、Javascript、PHP、DB このあたりを紹介します。

HTML

ホームページというのはHTMLという言語で作成されています。
こんなのです
img
HTMLっていうのはページの文書構造を表す言語で、
どういう意味かというと、
「ここは見出しです」
「ここは画像です」
「ここはリストです」
というようなことを表しています。
それがどのように表示させるという情報ではなく、あくまでどういった役割かを示しているだけです。
これらの構造を表示するブラウザが各自解釈してそれに合った表示をします。
なので、ブラウザによってこれらの初期の解釈の仕方は異なります。
デザインはHTMLでは行いません。
次に紹介するCSSというものを使ってデザインを適用します。

CSS

CSS(Cascading Style Sheets)は一般にスタイルシートと言われるものです。
このCSSはデザインを指示するもので、色だとかサイズだとか様々なデザインに関するものを設定できます。
こんなのです。
img

HTMLで見出しと役割づけたものを、CSSによってデザインする(色を変えたりサイズを変えたり)
という流れです。
HTMLとCSSさえ覚えればホームページは作れます。
まずはこの2つを覚えましょうね。

Javascript / jQuery

例えば、クリックしたら光るボタンとか、画面をスクロールすると動くアイコンとか、
みんながあっと驚く仕掛けはこのjavascriptっていう言語を使います。
変数や、ループや、条件分岐などと組み合わせて、HTMLで指定した要素に対していろいろな命令ができます。
ここからは完全にプログラミングと呼ばれる領域でレベルが一気に上がります。

たまにjQueryというものを聞くと思いますが、
これはjavascriptをもっと使いやすくしたものと考えるといいでしょう。
javascriptだと10行書かないといけないところを数行で同じようなことができるような言語です。
僕もjQueryにはむちゃくちゃ助けられてます。
もはやこれ無しにjavascript書く気にはなれない。

レスポンシブデザインサイト

レスポンシブデザインについてここではさませてもらいます。
レスポンシブデザインについてはこのあたり
技術者じゃなくてもわかるレスポンシブデザインって何?誕生の経緯とその特徴。

デバイスの解像度にあわせて、それに最適なデザインにするというものです。
具体的な技術についてはこのブログでは取り上げてないので、
「メディアクエリ」
という言葉で検索するといいです。

レスポンシブデザインは解像度ごとに異なるCSSを用意してそれを切り替えているだけです。
なので、それについて調べるために「メディアクエリ」を検索して調べましょう。

PHP

どんどんレベル上がります。
初心者向けの記事なのでこんなのは書かなくてもいいのですが、興味がある人向けに。

このPHPもjavascriptと同じようにプログラムです。
動くのがサーバーサイドかクライアントサイドかっていう違いがあるのですが、
そういう話はまた説明が必要なのでまたまた省略。

PHPを使う一番の理由はデータベースを使えるということです。
データベースっていうのはデータを保存しておく場所と思ってもらえるといいけれど、
たとえばソーシャルメディアとかで投稿したものがずっと表示されるのは、
投稿時にデータベースに保存されてそれがフォロワーに向けて表示されている。
そんな感じで、PHPだとソーシャルメディアみたいなものもできちゃうってことです。

実際にはこんな言語使ってる、こんな感じらしいです。

Twitter、Evenote → Java
Facebook → Hack
Yahoo → PHP
Dropbox、Instagram、Pinterest → Python
mixi、はてなブックマーク → Perl

超有名なWebサービスで使用されているプログラミング言語まとめより

WordPressはPHPです、なのでPHP知ってたらWordpressなんかも作れるんだってことで理解してもらったらいいかも。
実際にすでにあるのにイチからWordpress作るのはバカですが、それだけ有用ですっていう話ですもちろん。

データベース

データベースっていうのは先ほどちょっと触れたけれどデータを記録しておくもの。
投稿した記事をいつでも表示させるためにはどこかにデータを記録しておかないといけない。
そのためのものがデータベースだと思ってください。

例えばレビュー評価のレートとかは、
各投票された評価を記録しておいて、表示する時にはそれらの平均値を集計して出しているとか。
いろいろとできます。

CMS/ブログ

CMSというのはホームページの制作を分業するためのもので、
HTMLが書けなくてもホームページが変更できるという特徴から多くの人に使われます。
ただ、それだけ聞くととても便利なもので簡単にホームページが作れるツールと勘違いされますが、
もちろんメリットばかりではないので、その使い方には気を付けないといけません。
それについてはこちらの記事をどうぞ。
CMS誰でも簡単に触れる神話について、しっかり知っておいてほしいこと。

ただ、うまく使えると開発スピードや運用コストが下がります。
MovableTypeやWordpressが有名ですが、
個人的にはWordpressをお勧めします。
完全無料なのと、シェアが大きいため技術情報が充実しています。
これも細かい話を書くときりがないので、Wordpressオススメという程度で。

ホームページを作るうえで知っておきたいことをむちゃくちゃざっくり書きましたが。
ただ、これらのキーワードをそれぞれしっかりと勉強すれば、ホームページを作るのなんて簡単です。
何から手を付けたらいいかわからないという人は多いでしょうけれど、
この記事で大まかな役割とか流れとかわかると思うので、あとは個別に勉強するのみです。

本を1ページ目からまじめに読むとかあんまり効率よくないので、
ざっと流し読みする程度で、あとは何か作りたい題材を決めてホームページ作りましょう。
実践が一番早いです。

がんばってください。

大阪のホームページ制作会社YCOMの制作サービスのご紹介