ホームページの制作というと、業者さんに頼んだり、知識があまりなくても作れるシステムの利用など、色々な方法がありますが、自分でイチから作ってみるという方法を考えたことはありますか？
ある程度の専門知識は必要ですが、実はそんなに敷居は高くありません。
自分で制作すると、コスト面も抑えられますし、レイアウトやデザインも自由自在と、たくさんメリットがあります。
この記事では、自分で作ってみたいという人向けに、ホームページの作り方をご紹介していきます。
※今記事では、CMSツール（WordPressやJimdoなど）を使うことを想定していません
コンテンツ
ホームページ開設までの流れ
ではまず、制作はどういった流れで行われるのか、何をすればいいのかということをご紹介します。
1.ワイヤーフレームを作成する
ホームページを作るには、完成図（デザイン）を画像として作成するのが一般的ですが、
ワイヤーフレームとは、そのデザインの原画のようなもので、デザインのメモ描きをざっくりと行います。
これを、ラフと呼んだりもします。
作りこんだデザイン画を修正するのはとても手間と時間がかかるので、大まかな構成図を予め決めておくことで、デザインの作成をスムーズに行えるのです。
プロの現場では、Adobe XDなど、効率よく使えるソフトを用いているところも多いですが、鉛筆などによる手描きで構いません。
ある程度細部まで決めておくことで、次の工程が楽になりますので、
どういった目的でホームページを作りたいか、ホームページを作るにあたって掲載したい情報は何なのかなど、必要な情報は予め書き出しておき、ワイヤーフレームの段階で、ある程度具体的に完成図を思い描ける程度まで作りこんでおきましょう。
2.デザインを作成する
デザインは、作成したワイヤーフレームを元に、実際にブラウザで見た時にどのように映るのか、完成形を一枚の画像として作成するものです。
制作の現場では、色や各項目の幅、文字サイズなど、ミリ単位（実際はピクセルという単位が用いられることが多いです。）で決めて、次の工程に進んで行きますが、正直なところ、かんたんなサイトを作ってみるという場合には、省略してもいいでしょう。
（省略するときは、ワイヤーフレームを特にしっかりと作りこんでください。）
ただし、イメージやバナーなどの加工画像をたくさん使いたいという場合には、全体のバランスを見るためにも、ある程度デザインは作ったほうが、次の工程に響かずに済みます。
デザインをしっかり作れば作るほど、次の工程で手間が省けるということは覚えていてください。
3.コーディングをする
コーディングという言葉はあまり耳なじみのない言葉かもしれませんが、
これはデザインを元に、言語を用いて要素を一つ一つ取り出し組み合わせていく作業です。
ちょっと難しく思えるかもしれませんが、
デザインが設計図だとすると、コーディングは大工さんや内装やさんのような仕事となります。
ホームページをみるとき、部分的に動いたり、ボタンだけ押せたりしますよね。
これは一つずつバラバラなものが組み合わさって成り立っているからです。
この工程を踏むことで、ボタンが押せたり、カーソルを合わせると色が変わったり、
スマホで見た時も、単に小さく縮小されただけではない、見やすく表示されたページになったりします。
4.サーバーを契約する
ホームページのデータは、コーディングまでで完成です。
では、これをいろんな人に見てもらうには、どうすればいいでしょうか。
データが完成しただけでは、自分のパソコンでしか見られません。
このデータをみんなが見られる場所に置く必要があります。
その場所がサーバーです。
サーバーは、いつ契約しても構いません。
コーディングが終わるまでやってはいけないということはないのですが、
契約したときから料金がかかります。
ですので、理由がなければデータが完成してから契約するのがいいでしょう。
5.ドメインを取得する
サーバーがホームページを置く土地だとすると、ドメインは住所にあたるものです。
「〜〜〜〜.com」「〜〜〜〜.co.jp」
というような文字列と聞くとピンとくる人も多いと思います。
ドメインの種類（「.com」「.co.jp」「.org」「.jp」など）はたくさんあり、料金が違ったり、要件を満たさなければ取得できないものもあります。
ホームページの設置目的などに合わせて選びます。
一方、「〜〜〜〜」の部分は、自分の好きな文字列を決めることができます。（すでに取得されているなどで、希望のものが取れないことはあります。）
好みのものを選ぶといいのですが、一般にはわかりやすく簡潔なものが良いとされています。
ホームページを作ると決めたら、少しずつ考え始めてみてもいいですね。
ドメインを取得したら、サーバーと関連付け設定を行う必要があります。（このドメインはここのサーバーに置きますというような設定です。）
この作業も難しくありません、契約サーバーのページからわかりやすく行えるようになっていると思います。
大抵のサーバーサイトは専門知識がなくても操作できるようになっていますし、わからないときはサーバー会社に聞いてみると教えてくれると思います。
6.FTPアップする
自分の手元にあるホームページデータを、サーバーに置くという話を先ほどしました。
その方法がFTPです。
といっても、難しいことはありません。
ffftpやFileZillaなどのフリーソフトを使ってアップロードする、それだけです。
アップロードをすると、Web上にデータが置かれた状態になります。
取得したドメイン名を、ブラウザのアドレス欄に入れると、自分の作ったホームページデータが、Web上から閲覧できるようになっていますよ。
必要な知識について
では、覚えるべき知識は具体的にどのようなことがあるのか、ご紹介します。
画像を加工するソフトの操作方法
デザインデータはAdobe社のPhotoshopというソフトで作られることが多いです。
デザインを作らずに進めたいという人でも、素材として使う写真の切り取り、色の加工、ちょっとした文字乗せなども、Photoshopを使うと便利です。
有料ソフトではありますが、プランによっては比較的安価に契約できるので、
これを機に画像編集や加工、もしくはホームページ制作を覚えたいという人には、操作を覚えると便利なソフトです。
ただし、Photoshopでなければできないということはありません。
画像の加工や文字乗せのできるソフトを何か使えるようれあれば問題ありません。
ご自分に合った、画像加工のソフトを見つけて、文字乗せや加工などの方法を学んでください。
HTML・CSS
この二つの言語は、必ず覚えなければいけない言語です。
とはいっても、難しく構える必要はありません。
言語とは言うものの、決まり事を覚えるような感覚で覚えることができます。
主にHTMLは骨組み部分、CSSは装飾部分に使われる言語です。大まかなことさえ覚えれば、大体は検索でカバーできます。
「html 表組」「css 右寄せ」などと検索すれば「tableで表組を作る方法」「cssで右寄せにする方法」というような記事が無数に出てきます。
基本の概念がわかれば、検索しながらでも作っていけますし、作りながらだんだん覚えていくと思いますので、自分に合う学習サイトや学習本を、一通りすると十分覚えられます。
難しそうと尻込みをせず、ちょっとやってみると「意外に難しくない」と思う人も多いと思います。
サーバー、ドメインについて
これは、仕組みを知るというよりは、サーバー会社やドメイン会社の商品（プランやコース）を調べる必要があります。
どこの会社が良いとか悪いとかいう話ではなく、色々なプランがありますから、ホームページの設置目的に合わせて選ぶ必要があります。
商品（プランやコース）のページはどの会社さんもわかりやすく紹介していると思いますから、どういった商品（プランやコース）があるのか、よく調べてみてください。
まとめ
いかがでしたか？この記事では、イチからホームページの制作をしてみたい人に、制作の流れと、最低限知っておいて欲しいことをご紹介しました。
はじめから、システムを使わずにホームページを作成すると言うと、なんだか難易度が高い感じがしてしまいますが、やってみると、システムでは実現しにくいようなレイアウトも、自由につくることができますし、凝ったレイアウトでなければ、思ったよりかんたんにできたということもあるでしょう。
わからないことは、無数の解説サイトがありますので、ぜひチャレンジしてみてほしいです。
ホームページは何度でも修正を重ねてバージョンアップしていくことが可能です。
まずは試しに作ってみて、だんだん自分の理想に近づけていくこともできますので、恐がらずに作ってみてほしいと思います。少しでも、自分でホームページを作ってみたいという人の参考になりましたら幸いです。
