ホームページ制作

【初心者向け】ホームページってどうやって作るの?どんな方法があるのか解説

tomomi@clap-create.com
  • 初めてホームページを作る人
  • ホームページの制作工程が知りたい人
  • ホームページ制作を自作するか外注するか迷っている人

ホームページが必要!いますぐ作りたい!でも、どうやって作ったらいいの?と悩んでいませんか?

しかし、急いで具体的な制作手順を調べて、失敗する方が多数いらっしゃいます。
なぜなら、ホームページの制作方法は、予算や機能に合わせて選ぶ必要があるのですが、全貌を知らないまま制作を進めてしまうからです。

今回は、ホームページを作るのにどんな方法があるのか、どうやって選べばいいのかを解説します。

この記事を読むと、作りたいホームページにぴったりな制作方法を選ぶことができます。

この記事の結論

ホームページ制作は大きく2つに分けられます。1つ目は自作する、2つ目は制作会社に依頼する。この2つは制作工程が大きく異なります。
予算や詳しい条件をもとに、目的に合った制作方法を見つけましょう。

※この記事では、Webサイトのことを一般の方にわかりやすいよう「ホームページ」と記載しています。正確には「Webサイト」のことを示しているのであらかじめご了承ください。

ホームページ制作は大きく2つに分けられる

ホームページは、大きく分けて2種類の制作方法があります。

  1. 自分で作る
  2. 制作会社に依頼する

シンプルに思われるかもしれませんが、この2つは制作方法や手順が大きく異なります。
まず、それぞれの制作方法・手順を知ることで自分に合ったホームページを制作することができます。

良いホームページ制作に必要な考え方は、別の記事で解説します。

ホームページ制作はカレー作りに似ている!

イメージが湧かない方もいらっしゃると思うので、ホームページ制作をカレーに例えてみましょう。

カレーライス、自分で作れますか?

当然作れるよ、という方が多いのではないでしょうか。しかし、「作れるよ」と答えた多数の方は、市販のルーを使うことが前提になっていませんか?

もちろん、市販のルーを使ったカレーも立派なカレー。
(少なくとも私は市販のルーを使ったカレーしか作ったことがありません…)

ですが、本格的なカレーを作りたいと思ったら、スパイスの調合や具材の煮込み具合など、あらゆることにこだわる必要が出てきます。

私と同じで「そんなめんどくさいことは嫌だけど、たまには本格的なカレーを食べたい!」と思う人は、定期的にお店のカレーを食べるのではないでしょうか。
もちろんお店のカレーを食べるには、家庭のカレーを作る時よりもお金がかかります。

何度も念押ししますが、どちらも立派な「カレー」。

ホームページ制作も同じで、同じ「ホームページ」というツールに対して何をどこまで求めるかで選び方は変わります。

例えば、「ホームページを使ってバリバリ集客したい」という方が、自作して集客できるようになったら、それはもうプロの領域。しかし、スパイス調合1回目でうまくいくほど簡単な世界ではありません。

一方、「名刺がわりのホームページがとりあえず表示されればいい」という方は、制作に多額の予算をかける必要はありません。

その塩梅を判断するには、一般的な制作工程を知ることが大切です。
制作工程が分かれば、どの部分がスパイスで、どの部分が市販のルーなのかがわかります。

プロの制作工程とは

筆者が一般的なホームページを作る際の工程を簡単にご紹介します。

ヒアリング・企画立案

そもそもホームページがなぜ必要なのかを明確にすることが大切です。
お客様にじっくり話を伺い、どんなホームページにしていくか全体像をすり合わせます。

お見積・スケジュール提示

STEP1の内容を制作するのにかかる費用と、現時点での制作スケジュールを提示します。制作スケジュールは、進行中の修正ボリュームによって公開日の変更を相談する場合があるため、仮の状態です。

設計

どんなページ構成になっているかを示すサイトマップ・各ページの内容を示すワイヤーフレーム。このような書類を作成し、ホームページの設計図が完成です。

デザイン(PC版・スマホ版)

内容が確定したら、いよいよデザイン制作に取り掛かります。
この時点でできあがるデザインはあくまでもイメージ。まだ家づくりの際のシミュレーションのようなものです。

コーディング

確定したデザイン案をもとに、ホームページの制作に取り掛かります。この工程がないと、ホームページとして機能しません。

システム開発

デバック

あらかじめ決められた実機で表示確認を行います。内容の間違いやリンク先の設定ミス、細かい設定などもこの時点で最終確認いたします。

公開

お客様の確認が全て終わったら公開します。公開時はGoogleアナリティクスの設置や、サーチコンソールの設置、古いサイトからのリダイレクト設定なども行います。サーバやドメインの使用条件によって公開手順が異なります。

サイトマップ提出

公開・リニューアルしたことをGoogle側に早く認知させるため、サイトマップを提出します。

以上がプロの制作工程です。これがスタンダードな制作工程ですが、予算の都合で仕方なく工程をカットする場合もあります。

また、原稿作成のための取材、写真撮影、イラスト制作、映像制作なども必要であればSTEP3〜4で対応することもあります。

この工程表とは別で、

  • サーバ準備(ホームページのデータを置く場所)
  • ドメイン準備(ホームページの住所)

をしていただく必要があります。基本的にはお客様側でお申し込みいただきますが、代行する場合もあります。

サーバとドメインについては別の記事で詳しく解説しています。

ポイント

ホームページの制作は誰でもできるわけではありません。専門領域も多岐に渡り、ホームページ制作には「Webディレクター」「Webデザイナー」「コーダー(マークアップエンジニア)」「システムエンジニア」と多くの専門家が一緒に1つのサイトを作り上げます。

自作する場合

「プロに頼むと高そうだから、まずは自分で作ってみよう」と考える方が多いのではないでしょうか。もちろん、自分で制作できるに越したことはないのですが、ホームページ制作は向き不向きが大きく分かれます。

それは、制作工程が多く単純に時間が膨大にかかる、専門用語も多く、一つ一つの用語の意味を理解するのがとても大変という特徴があるからです。

私も初めてこの業界に入った時は、専門用語が多すぎて、周りの人が全員ルー大柴に見えました…。

後述する方法を詳しく調べてみて、内容が理解できなさそうだったら、おそらくホームページ制作に向いていません。潔く依頼することをオススメします。

制作方法1:ノーコードツールを利用する

難易度 

WixペライチCanvaStudioなどのホームページ制作サービス(ノーコードツール)を利用して、コーディングの工程を省くことができます。

ただ、思い通りにデザインにはある程度知識が必要なので、まずはテンプレートの文言と画像を差し替える程度だと思っておいた方がいいでしょう。

制作方法2:WordPressのテーマを利用する

難易度 

ご自身でサーバーを契約、ドメインを取得、SSLの設定など一通りできそうな場合は、WordPressというCMSをインストールしてテーマ(テンプレートのようなもの)を利用しましょう。

テーマによっては、かなり見た目のクオリティが高いホームページができます。

デザインの美しさはダントツ「OLTANA」です!

自作する場合の注意点

稀に依頼すること=ダメなことと依頼するのに罪悪感を抱いてしまう人もいらっしゃいます。(初めて家事代行サービスに家事を依頼するときの感覚でしょうか…)

だからこそ、1人で制作しようとするのは無謀なことなのです。

そして、忘れないでほしいのは、ホームページを作る目的です。あなたはなぜホームページを作りたいと思ったのでしょうか?

  • とりあえずホームページが必要だと思った
  • 集客・セールスのため
  • 採用活動を強化したい

目的は人によって様々ですよね。ですが、目的達成のためのホームページ制作に膨大な時間がかかってしまうようでは本末転倒。目的を見失わないようにしましょう。

依頼する場合

制作会社に依頼する場合、基本的には前述したすべての工程をオリジナルで作成します。ただし、予算に合わせて作り方が大幅に変わるので、まず必要な情報を整理することから始めてみましょう。

あわせて読みたい
ホームページ制作はどこに発注したらいい?制作会社の選び方を完全解説
ホームページ制作はどこに発注したらいい?制作会社の選び方を完全解説

制作方法1:オリジナル開発

いわゆる完全オリジナルのホームページです。html、cssに加え、システム部分はスクラッチで開発します。スクラッチ開発とは、システム部分をオリジナルで開発すること。つまり、すべてオーダーメイドのホームページです。

詳しい説明は別の記事で解説しています。

制作方法2:WordPressなどのCMSを利用する

システム部分の開発コストを抑えたい場合に、WordPressというCMSを使用するケースがあります。WordPressを利用すると、システム部分の開発が多いホームページは、オリジナル開発に比べ安価になります。

しかし、規模が小さいホームページはオリジナル開発した方が安く済む場合もありますので、一概にWordPressだから費用が抑えられるわけではありません。

特に、WordPressは脆弱性があるCMSです。そのリスクを理解した上で依頼しないといざというときに大変なことになります。

詳しい説明は別の記事で解説しています。

制作方法3:ノーコードツールを利用する

自作の場合でもご紹介した、ノーコードツールを利用するケースも増えています。ただし、自作と大きく異なるのが、デザイン部分はオリジナル制作するという点です。お客様の予算に合わせるため、コーディング・システム開発の工数を減らすことを目的として利用されるケースが多いです。

また、コーダー・エンジニアが在籍していないデザイン会社では、Studioを使った制作のみ行うこともあります。
Studioは、ノーコードツールの中でもプロ向きで、ある程度知識がないと編集すること自体が難しいツールです。しかし、Studio専門の制作会社はデザイン力があることが多いので、デザイン力のみを求める場合はそういったところに依頼するのも一つの手です。

制作方法4:テンプレートを利用する

こちらは、自作の場合と作業自体はほぼ同じです。自作するのは難しい、ですが開発にかけられる予算が少ない場合に作業を代行します。

この場合、ページ構成などをじっくり考えるといった工程を踏むことはほとんどありません。

中にはテンプレート利用であることを公表せず、制作を請け負っている会社、フリーランスもいるので注意が必要です。

依頼する場合の注意点

制作方法を4つご紹介しましたが、1〜4の制作方法を説明せず、さも全てオリジナル開発かのように見せている会社もあります。また、制作方法が決まっている会社も多いため、見積条件を揃えなければ比較することすら難しいという状況に。

専門用語が多いので、全て任せたくなってしまうと思いますが、いろんな制作会社に話を聞くことで危険な契約を回避することができます。

打ち合わせの中で、「この人はあまりデジタルの知識がないな」と足元を見てくる会社もあると聞きます。複数社検討していると打ち明けてもいいので、親身に相談に乗ってくれる会社を見極めてください。

複数社検討しているというと、必ず「ちなみにどこですか?」と聞いてくると思います。答える義務はないですし、トラブルを避けるために話を濁しましょう。

まとめ

ホームページ制作は大きく2つに分けられます。1つ目は自作する、2つ目は制作会社に依頼する。この2つは制作工程が大きく異なります。
予算や詳しい条件をもとに、目的に合った制作方法を見つけましょう。

ABOUT ME
伊藤 友美
伊藤 友美
Clap create 代表 / コミュニケーションデザイナー
1992年生まれ、愛知県出身のグラフィックデザイナー。 名古屋芸術大学デザイン学部デザイン学科を卒業後、印刷会社に6年勤務。 内2年間グラフィックデザイナー、4年間Webディレクター・プランナーを経験しました。 その後食品メーカーのインハウスデザイナーを経て独立開業。 プライベートでは一児の母として育児に日々奮闘中。
記事URLをコピーしました