ホームページの作り方とは? 初心者でも自分で作成できる手順
ホームページを自分でつくろうとした場合、何から始めればいいのか、そして何が必要なのか。
ホームページを作った経験がなければ、疑問はどんどん出てきます。この記事では、ホームページの作り方とその手順を、初心者の方にもわかるように解説していきます。
目次[非表示]
プロに依頼と自作はどっちがいい? ホームページの作り方
ホームページの作り方は大きく分類すると、「自分で作る」か「プロに依頼する」かの2つになります。
自分で作る
自分で作る方法には、CMSや作成ソフトを使う、もしくはHTMLとCSSを使って完全に自作する方法があります。操作が簡単で、すぐに始めることができるCMSを使う方法が主流です。
プロに依頼する
プロに依頼する場合には、ホームページ制作会社やフリーランスに依頼します。
ホームページは自分で作ることもできますが、プロならではのデザインや効果の面でメリットも大きく、多くの方に選ばれています。
どの方法でホームページを作るかは、ホームページの目的に応じて選択する必要があります。
ホームページを作成してから公開するまでの手順
ホームページの作成は一般的に以下の手順で進められます。
①サーバーとドメインの準備
ホームページを作成し公開するためには、サーバーとドメインを準備する必要があります。
■サーバーとは?
サーバーとは、簡単にいうとホームページのデータを置いておく場所のことです。ホームページは、閲覧者がURLを入力してサーバーにアクセスした後、サーバーが入力されたURLに対応するデータを閲覧者に提供することで見れるようになります。
ホームページ作成サービスに無料でつくサーバーもありますが、無料のものは容量や機能に限界があり、有料のレンタルサーバーを利用するのがおすすめです。有料のレンタルサーバーはサポート体制も整っています。
有料レンタルサーバーには共有サーバー、専用サーバー、マネージド専用サーバー、仮想専用サーバー(VPS)、クラウドサーバーなどがあります。月額数百円の安価で借りられるサーバーもあれば、月額5000円程度の高価なサーバーもあります。
画像などで容量を多く使ったり、機能の充実したレンタルサーバーが良ければ月額料金が高いものの方がおすすめです。作成するホームページの種類や規模に応じてサーバーを選ぶようにしましょう。
■ドメインとは?
ドメインとはトップページのURLのことで「http://www.○○.com」の〇〇以下を指します。
好きな文字列で取得できる、独自ドメインがおすすめです。自社名や商品名を入れることで信頼性も高まり、SEO対策も行いやすくなります。
作成ツールについている無料ドメインには作成ツールの企業名が入ることがあるので、余計な文字列が入ってドメインが長くなり、分かりづらくなってしまうのです。
企業のコーポレートサイトならば、「co.jp」がおすすめ。日本企業にのみ認められているドメインなので信頼につながります。
費用はトップドメインの種類などによって異なりますが、年間数百円~数千円程度です。
➁内容の準備
ホームページに記載する情報をまとめます。トップページや会社案内、事業内容、お問い合わせのページといった必ず必要な情報のほかにも、採用情報や実績紹介など、ページが増えれば内容はどんどん充実していきます。
ホームページで達成したい目標に応じて必要な情報も変わってきますので、目的を明確にし、どのような構成・デザインにするか大まかな枠組みを組み立てましょう。
ページ数の多いホームページを作る場合には、全体像を掴み、情報に抜けがないようにすることが大切です。
➂各ページ作成
実際にホームページを作っていきます。コンテンツの配置はどうするか、フォントの配色やサイズはどうするかなど、具体的なデザインを決めて、準備した情報をもとにページを作ります。
④公開(サーバー転送)
ホームページが完成したらデータを準備したサーバーへ転送します。
ホームページをサーバーにアップロードするにはFTPソフトが必要です。FTPソフトとは、パソコンとサーバー間でデータをアップロードしたり、ダウンロードする際に必要なソフトです。
有料のホームページ作成ソフトには、サーバーにアップロードする機能がついているものもあるので、FTPソフトがいらないこともあります。
サーバーへの転送が完了して、やっとホームページが見れるようになります。
ホームページの作り方①自分で作る
ホームページを自分で作る最大のメリットは、制作費用が抑えられることです。
ホームページの修正や更新をプロに依頼すると、オプションになって、別途料金がかかることがありますが、自分で作るならば基本的には、サーバー・ドメインの費用と制作ツールにかかる費用で済みます。
起業したての会社は、費用が抑えられるのでおすすめです。
プロに依頼すると情報の更新も時間がかかりますが、自分たちで作れば更新もいつでも可能になります。さまざまな情報をリアルタイムで発信できるのが強みです。
デメリットは制作に時間がかかってしまい、時間と手間が奪われてしまうことです。
初心者がホームページを作るとなると、思ったようなホームページに仕上がらないこともあります。自分で作るホームページのクオリティをあげるならば、それなりの知識は必要です。知識の習得にも時間を奪われてしまいます。
ホームページを自分で作る方法はCMSを使うか、作成ソフトを使うか、HTMLとCSSを使うかの3つに分類されます。それぞれの特徴を紹介します。
CMSを使う
CMSとは「Contents Management System(コンテンツ・マネジメント・システム)」のことです。ブラウザ上でテキストや画像をアップロードしてホームページを作成するので、専門知識がなくても簡単に作ることができます。
インストールの必要もなければ、レンタルサーバーの準備も必要なく、初心者でもすぐに始めることができます。
無料のCMSは費用を抑えられるのでとても魅力的ですが、独自ドメインが使えない・サポート体制が整っていない・公開ページ数に制限があるなど、できる範囲に限りがあります。
改善するには有料プランへの変更が必要です。
企業のサイトを、完全に無料で作成することは難しいでしょう。
▼【BtoB向け】17種類のCMSをまとめた比較表もございます。ぜひ参考にしてみてください。
■おすすめ無料CMS①WordPress
ワードプレスは世界で最も利用されているCMSで、全Webサイトの3割以上がWordPressで作られています。
プラグインと呼ばれるツールで、欲しい機能をどんどん追加することができます。
お問い合わせフォームの設置・SNSシェアボタン設置・セキュリティ対策がその例です。
操作自体は簡単なので初心者にもおすすめですが、高度なこともできるので上級者にも好まれています。
利用者が多い分、ネット上に有益な情報が多くあり、疑問点がでてきても問題解決しやすいのが利点です。
ただ、ハッカーの標的になりやすいので、セキュリティ対策は必須でしょう。
WordPressはCMSですが、サーバーの準備が必要なので注意が必要です。
公式サイト:https://wordpress.com/ja/
■おすすめ無料CMS②JIMDO
JIMDOはKDDIウェブコミュニケーションズが提供するツールで、日本語にも対応しているのが魅力です。
JIMDO最大の特徴は「ジンドゥーAIビルダー」です。AIの質問に答えるだけでホームページが作成できるので、初心者にもおすすめです。
ほかにも「ジンドゥークリエイター」と呼ばれる、ドラッグ&ドロップの簡単操作で作成する方法もあります。
ページ数が増えると管理画面が重くなったり、アクセスが増えると表示速度が遅くなってしまうことがデメリットです。
大規模なホームページや集客を目的としたホームページには不向きです。バックアップ機能がないので、誤って記事や画像を削除しないよう注意が必要です。
公式サイト:https://www.jimdo.com/jp/
■おすすめ有料CMS①ferret One
ferret Oneは、BtoBマーケティングを目的としたCMSです。SEO対策・メールマーケティング・広告管理・資料請求・セミナー集客など、マーケティングに特化した機能が付いているのが特徴です。
BtoBマーケティングで成果を上げるために、企業に合わせた施策をサポートする「伴走サポート」が人気です。
レポート、メールといった必要な機能のセットアップや、オンライン操作レクチャーなど、導入面・運用面でさまざまなサポートをしているので、BtoBマーケティング初心者におすすめ。
簡単見たまま操作で、専門的知識がなくてもホームページを作ることができます。費用は初期費用に10万円、月額10万円かかります。
公式サイト:https://ferret-one.com/
■おすすめ有料CMS②Movable Type
Movable Typeは、日本企業が提供しているCMSです。国内では5万件以上の導入実績があります。
CMS自体の保守サポートを企業が責任を持って行っているので、信頼性が高く、安心して利用可能です。不具合が生じた際には企業に問い合わせをすれば、適切なサポートを受けることができます。
Movable Typeの最大の特徴は、サイト公開時にスタティック(静的)HTMLをファイルとして作成することです。スタティック(静的)HTMLとは、いつ誰がどのようにアクセスしても内容が変わらないHTMLページのことで、データベースに負荷がかからないため公開速度も速いというメリットがあります。アクセスの多いホームページを作る企業におすすめです。
スタティック(静的)HTMLを生成するという特徴は、Movable Typeの操作自体を重くしてしまうというデメリットもあり、作業をストレスに感じてしまうこともあります。
自由度の高いCMSですが、導入には専門的知識が必要で初心者には難しい部分もあります。
費用はソフトウェア版で99000円~。年間メンテナンス料金は1年ごとに更新が必要です。
公式サイト:https://www.sixapart.jp/movabletype/
作成ソフトを使う
作成ソフトを使う作り方とは、ホームページ作成ソフトをパソコンにインストールして作る方法です。
インストールやソフトの環境設定が必要なため手間はかかりますが、オフラインでの作業が可能になります。
作成ソフトは、プロが使用することも想定しているので、高度なホームページを作れます。
そのためHTMLとCSSのある程度の知識は必要で、SEO対策もHTMLを直接自分で編集しなければいけません。
■おすすめ作成ソフト①ホームページビルダー
ホームページビルダーは、初心者におすすめの作成ソフトです。
文字や表を挿入すれば自動でコードを入力してくれて、ワープロソフトを扱うような感覚で操作が可能。画像編集ソフトも付属されているので、画像の色を編集したり、画像に文字も挿入できます。
ホームページビルダーは定期的に新しいバージョンが発売されるので、すぐに型落ちになってしまいます。時間が経てばサポートもなくなり、OSがバージョンアップされると以前のホームページビルダーは使えなくなってしまいます。
電話対応も無料で対応してくれるのはソフト購入から2回までで、3回目からは有料になるので、結果費用がかさんでしまいます。
費用は初心者向け「ホームページビルダー・スタンダード」のパッケージ製品で17600円(税込)、ダウンロード版16500円(税込)かかります。
公式サイト:https://www.justsystems.com/jp/products/hpb/
■おすすめ作成ソフト②ドリームウィーバー
ドリームウィーバーは、プロも利用するCMSです。HTMLとCSSの知識が必要で、中上級者向けですが、高度な機能が豊富で本格的なホームページを自分で作れます。
ホームページ画面を見ながらコード編集ができるので、効率よく作業が行えます。コードに関してもヒントを表示してくれるので、知識を身につけながらホームページを作ることが可能です。
月額課金制のソフトウェアなので、常に最新バージョンを利用できます。不具合はアップデートで改善されるのでセキュリティでも安全です。
費用は月額2480円(税抜)かかります。
公式サイト:https://www.adobe.com/jp/products/dreamweaver.html
完全自作
完全自作する作り方とは、HTMLとCSSのコードを利用してホームページを作成する方法です。
自由に作ることができるので、オリジナリティがあり、クオリティの高いホームページを作ることが可能です。
かなりの専門的知識を必要とします。HTMLとCSSの習得にも時間がかかり、完成したホームページを扱える人もHTMLとCSSを理解した人に限られてしまいます。
専門的知識を持つ人が多数在籍しているような企業に向いている作り方です。
ホームページの作り方②プロに依頼する
ホームページは制作会社やフリーランスに依頼することで作成できます。プロに依頼すると、今まで培ってきた実績から、クオリティの高いホームページが完成するでしょう。
自社の社員の手間がかからず、時間を奪われないので、本来の業務に集中できるようになることはメリットです。
プロに依頼する最大のデメリットは料金が高いことです。フリーランスでも10万円~、制作会社では最低30万円~100万円程度の費用がかかります。
制作会社やフリーランスによって得意分野が違ったり、実力に差がある点も注意が必要です。
自社のホームページ作成の目的を達成できる技術を持っているかは、自分たちで見極めなければなりません。業者選びでは必ず複数の業者を比較するようにしてください。
自分たちで作る方法だと、いくら操作が簡単だといっても、初心者には難しかったり、思っていたホームページと全然違うものができあがったりすることもあります。集客につながらず、ホームページの目的が達成できなくては意味がありません。
費用に余裕がある場合には、プロに依頼する方がクオリティの高いホームページになるでしょう。
ホームページに何を掲載する?内容の作り方
ホームページに掲載する情報には以下のようなものがあります。
会社情報
会社名や所在地、連絡先などの会社の基本的な情報を掲載します。会社情報は、信頼を得ることを念頭に置いて、情報を集めることが大切です。
事業内容
何をしている会社なのか、企業のサービスを紹介する情報を掲載します。
飲食会社であればメニュー一覧や画像を載せたり、制作会社であれば料金プランを紹介します。他社と比較する際に参考にするページのため、魅力的かつ具体的に伝えることが重要です。
事例・実績
お客様の声や事例の写真を情報として掲載します。自社のサービスの事例や実績を掲載すると、検索者は具体的なイメージが湧きやすくなります。
お問い合わせ
検索者の疑問を解決するために必要な内容です。お問い合わせのページで個人情報を入力するならば、個人情報の取扱いとして「個人情報の利用目的」も掲載しなければなりません。
よくある質問
検索者の疑問を前もって掲載するページを作ります。ページを閲覧するだけで問題が解決するので、検索者が問い合わせる手間も、企業が返答する手間も省けるのです。
補足:ホームページの目的にあった項目が必要
そのほかにも、採用情報や代表者メッセージなどさまざまな内容がありますが、ホームページの目的を明確にし、目的にあったサイト構成にすることが重要です。
集客して売上につなげたいならば、お客様の声・事例・Q&A・問い合わせフォーム・資料ダウンロードページ・ブログといった内容が必要になります。
名刺代わりのホームページでよいならば、事業内容・連絡先・アクセスなどの情報を載せましょう。求人が目的ならば、企業情報や採用情報を詳しく掲載する必要があります。
ホームページの目的によって必要な情報は変わってくるので、目的に沿って掲載する内容を決めてください。
▼サービスサイトについては、下記の記事もぜひ参考にしてみてください。
→サービスサイトとは?コーポレートサイトとの違いとBtoBで使える構成
ホームページを作成した後は? 公開後の注意点
ホームページは作成した後の運用も大切です。公開後は以下の点に注意してください。
お問い合わせへの対応
お問い合わせにはきちんと対応することが大切です。苦情・商品への質問・取材の申し込み・業務依頼など、さまざまなお問い合わせがきます。
そのままにしていては、お客様との関係構築の機会を逃したり、自社のイメージダウンへつながることになりかねません。関係部署と連携しながら、迅速に対応することが重要です。
更新を怠らない
作成したホームページは更新をして、常に最新の情報を掲載することが大切です。更新がずっとされていないホームページは信頼に欠けます。
企業の情報が変わった場合や、新しいイベント・キャンペーンのお知らせは、すぐに最新の情報に更新しましょう。
ドメインとサーバーの更新
ドメインとサーバーの更新も忘れずに行ってください。
更新を忘れて契約が切れてしまうと、せっかく作ったホームページがなくなってしまいます。ドメインとサーバーの契約情報は把握しておいてください。
解析・検証・改善
作成したホームページの運用状況を解析、検証し、改善していくことが大切です。
「Googleアナリティクス」というアクセス解析ツールにより、どのくらいページに滞在したのか、スマホとパソコンどちらから閲覧されているのかといった、ホームページ内のユーザーの行動がわかるようになります。
「Googleサーチコンソール」というインターネット検索の分析ツールでは、Google検索キーワードの表示回数・順位の推移や、サイトが抱えている問題点などを確認できます。
内容に問題はないか、どのキーワードで検索するとどのように表示されるか、Googleにきちんとページが発見されているか、ペナルティを受けていないかなど、ホームページを解析・検証し、より質の良いホームページへと改善していくことが、ホームページでの集客へとつながります。
▼Googleアナリティクスとサーチコンソールの活用法ついては、下記の資料にまとまっています
→Googleアナリティクス&サーチコンソールの活用方法
ホームページの作り方をマスターしよう
ホームページの作り方には大きく分けて「自分で作る」か「プロに依頼する」の2つがあります。
自社の手間を省き、クオリティの高いホームページを求めるのであれば、プロに依頼しましょう。自作する制作ツールもプロに劣らないホームページを作成することができるので、費用をできるだけ抑えたいならば自分で作る方がおすすめです。
ホームページを作るには、サーバーやドメイン、掲載情報の準備も大切です。ホームページの目的を明確にし、準備をしっかりした上で、ホームページを作ってみてください。
「ferret One」は、ホームページの制作から、分析まで、Webマーケティングに必要な機能を揃えたツールです。サポートチームがつくので、これからWebマーケティングを始める場合でも、何から手をつければよいかが分かります。
BtoB向けのホームページ制作でお悩みの方は、ぜひ無料の資料をチェックしてみてください!
>ferret Oneサービス紹介資料のダウンロード【無料】はこちら