簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

ホームページ制作費用が19,800円〜(税別)!詳しくはこちら詳しくはこちら

12ステップでホームページが完成!知識0の初心者でも作れるホームページの作り方

12ステップ・初心者でも作れるホームページの作り方

ホームページをはじめて作る人、
ホームページを作る途中で挫折してしまった人でも、

サイト(ホームページ)が完成してしまう。
初心者が作るために必要な情報を集めました。ご活用ください。

初心者でも作れるホームページの作り方 対象読者

・ホームページ作成の入門者 ~ 初心者

ホームページ制作の流れを

「大きく2つ」にわけるとすると

「企画」と「制作」

になると思います。

ホームページの設計図を作り(企画)

そのとおりに制作できれば(ホームページを作るスキル=作り方)
いいのですが・・・。

最初から大量のページを持つホームページを作ろうとすると
完成までの道のりが遠く挫折(あきらめる)する傾向があります。

ですのでホームページ作成のスキルが入門者・初心者レベルの場合は
制作ページを少なくして「まず完成させる」ことを意識しましょう。

具体的には「5~15ページ程度」で完成するホームページを目標にしましょう。

※ページ数が多いと収集がつかなくなる恐れがあります


ホームページ初心者がサイトを完成させるポイント


小さなゴール(目標)を決めて
ひとつずつクリアしていく。

インターネット上には数多くの情報がありますが、
情報を集めすぎても「行動」ができなくなります。

「企画」と「制作」についての素晴らしい情報も数多くありますが
ここでは初心者にとって「わかりやすい」ものを「必要最小限」紹介していきます。



まずは「企画」する際にしっておくべきことは
次の3つです。

  • ホームページの目的を決める
  • ホームページを誰に見てもらいたいのか決める
  • 自分・自社の「強み」を確認する



ステップ1:ホームページの「目的」を決める


■まず大事なのはホームページの「目的」を決めることです。


例えばホームページの目的が

  • 問い合わせを増やすことが目的なのか?
  • 問い合わせは電話なのかメールフォームなのか?
  • 多くの人に知ってもらうことが目的なのか?
  • アフィリエイトする商品の紹介なのか?

目的が明確でないとアプローチすべき
「誰に」が決まらなくなります。

逆にいえば目的が決まれば
「誰に」が明確になります。


まずホームページの目的をきめましょう。
 

ステップ2:「誰に」伝えたいかを考える


■次に大事なのはホームページを
「誰に」見てもらいたいのか?


というターゲットの明確化です。

性別は? 年齢は? 職業は? 趣味(興味があること)は?

インターネットに公開するのだから
日本(もしくは世界中)全ての人に
情報を伝えたい気持ちはわかりますが

現実問題として多くの人は
「自分が興味のあること」にしか関心をもちません。

さらにみんなに語りかけられたことではなく
このサイトはまるで「私のためのホームページ」と
思ってもらう必要があります。

「みんな」向けのメッセージは
中途半端になり、結局伝わりません。

ですので不特定多数ではなく
ターゲットを明確にしましょう。

性別は? 年齢は? 職業は? 趣味(興味があること)は?

この4つを考えてみましょう。

 
 

ステップ3:「強み(=選ばれる理由)」を明確にする


■伝えたい「強み」を確認する


ここまでで
ホームページの「目的」と
伝えたい「誰」が明確になったとします。

「誰に」「どんな行動」をとってほしいか(=目的)
がこれで決まりました。

ですが人が行動を起こすには「理由」が必要です。

仮に「問い合わせ」や「商品を購入」するためには
「選ばれるための理由」が必要です。

インターネットだからといって世界で一番安くある必要もありません。

特定の地域(半径○キロメートル)で
一番早く提供できるとか
アフターサービスに自信があるとか
最新の情報をどこよりも詳しくお届けしますとか

競合と比較して「強み(=選ばれる理由)」を明確にしましょう。


ここまでの段階(ステップ1~3)で
初心者がホームページを作るための

「コンセプト」が完成しました。

この「ステップ1~3」までがあいまいな状態だと
仮にどんなにきれいなホームページの「形」を
作っても意味はありません。



ホームページで伝えるメッセージを

「誰に」届けて「どんな行動」をとってほしいのか
が明確にすることが、まず必要です。


ここまで出来たとします。
次にすることは

現実世界でも思っているだけでは
何も伝わらないので

「コンセプト」を具体的な「形」にしていく必要があります。

それでは次の段階に進みましょう。


ステップ4:伝えたいこと必要なことを書き出す


■ホームページ全体の構成図(サイトマップ)を考える


サイトの構成図を作るオンラインのサービスがいくつもあります。
ただホームページを作ろうとする初心者にとっては
ウェブ上で作図できるサイトに登録して、
さらに使いこなそうとすることが
(限られたヤル気を考慮すると)難しい場合があります。



ですので「5~15ページ程度」の
「小さなサイト」「最初のホームページ」作成の場合は

「手書き」
ホームページの構成(サイトマップ)を考えましょう。


※初心者だから使い慣れた道具を使うことが大事です
用意するものは「紙」と「ペン」だけです。


まず伝えたいことや必要なことを書き出します。

例えば

必要なもの
・会社概要や自己紹介
・お問い合わせフォーム
・商品やサービスの案内ページ

伝えたいこと
・商品やサービスのこだわりや開発ストーリー
・お知らせやキャンペーンの案内ページ

などなど。

 

ステップ5:書きだしたものをグルーピングする


書きだしたあとには、
関連するものをグルーピングし
例えば商品A、商品B、商品Cを「商品」という
「くくり」でまとめたりして整理します。

整理されたものの「重要度」を考えます。
重要度が高いものをグローバルメニューに追加して
どこのページからもアクセスできるようにしたり
目立たせたりしましょう。
 

そして1枚の紙に
サイト全体を俯瞰する(一目でわかるような)形にします。

ホームページには「トップページ」があります。

グルーピングされた伝えたいことや必要な情報を
どうトップページにひもづけるかを考えてみましょう。



具体的に紙に書き出すイメージとしては

参考ページ:『Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ』

「 10作業- サイトの設計図、ワイヤーフレームを作ろう!」


をクリックしてみてください。
1枚の紙にサイト全体を俯瞰するイメージがつかめると思います。



ステップ6:全体の構成図(サイトマップ)を完成させる


初心者の場合、何をホームページに載せたらいいのか
どうしても思い浮かばないこともあると思います。

そうした場合は、ライバルまた同業者のホームページを確認し
「サイトマップ」とあるページを見たり、
いろいろなページを回遊するなりして
「必要な項目」「伝えたい項目」を紙に書きだしてみましょう。

初心者の場合「0から考える」のは難しいかもしれませんが
サンプル(競合)を「見ながら」だと
アイデアというものは浮かんできます。


目的やターゲットを
(忘れずに)意識しながら


伝えたことや必要なことを
少しずつ付け加えて

ホームページ全体の構成図(サイトマップ)

完成させましょう。


大事なことなので繰り返しますが
どうにも思いつかない場合(手がすすまない場合)は
競合や同業者のホームページを確認しながら作ってみましょう。
※初心者でもお手本を見ながらだと作ることができます


これでホームページの全体像が決まりました。

ホームページ完成というゴールまでの「地図」ができあがったのです。

それでは次の段階に進みましょう。



ステップ7:ページのレイアウト構成を決める


■ホームページのページ(レイアウト構成)を考える


実際のユーザーが見るのは
ホームページの全体を意識して見るのではなく
(=サイトの全ページを想像しながら見るのではなく)

1つ1つの個別ページを
その都度見ていくことになります。

つまり個別ページのレイアウト構成を考える必要があります。


このレイアウト作成ツールについても
オンラインのサービスがいくつもあります。

が、先ほどと同じくホームページを作ろうとする初心者にとっては
ウェブ上で作図できるサイトに登録して使いこなそうとすると
それだけで限られたヤル気が失われてしまう可能性があります。


ですので

やはりここでも「手書き」でレイアウトを決めましょう。



一般的なホームページのレイアウト構成として


1カラムレイアウト

特徴:行動してほしい目的(ゴール)が1つの時によく用いられる。



2カラムレイアウト

特徴:一般的によく利用されている。
ホームページを見る視線の動きはは左から右へ移る傾向があるので
内容(コンテンツ)を目立たせたい場合はナビゲーション部分が右に
移動して多くのページを見てもらいたい場合はナビゲーション部分が左に
する傾向があります。



3カラムレイアウト

特徴:情報量が多いサイトでよく用いられます。



という3パターンがあります。

提供する商品やサービスが限りなく少ない場合は
1カラムレイアウトになるかもしれませんが

ほとんどホームページは

「2カラムレイアウト」になると思います。



また初めてのホームページ作成の際は、
(0から自分で作るのではなく)
テンプレートを利用したり
無料ホームページ作成サービスが提供するものを
そのまま使うように
しましょう。
※簡単にきれいなサイトを作るためには必須事項です
 



ここまでの段階(ステップ4~7)で
「企画」の段階は終了です。

作りたいホームページの「形」が明確になりました。



ステップ8:HTMLを覚える


■ホームページ初心者のためのHTMLやCSS


ここからは具体的な「形」にしていく「作業」になります。

ホームページ作成するにあたり
「HTML」や「CSS」という言葉を目にすると思います。

ホームページを作成するさいに覚えておく必要がある言語(記述方法)です。

初心者のページ作成であっても
「HTML」だけは覚えておく必要があると思います。
 

最近の無料ホームページ作成サービスやソフトを使うことで
HTMLを覚えなくても「ある程度の形」にはできます。

ですが「ほんの少しのHTML」を覚えておくことで
作りたいホームページの「形」を具体化することができます。


できる範囲でいいので覚えてみましょう。

とはいっても「ホームページを完成させる」ことが
一番大切
なので、

難しいと思った場合は(HTMLやCSSを飛ばして)
次のステップへ進んでください。



ステップ8:HTMLを覚える(レベル1)

一番最小限の知識で済ましたい場合
(0から作るのではなくテンプレートやウェブサービスを利用する場合)

本文で使う「hタグ」「pタグ」「改行タグ」を覚えましょう

参考ページ:『0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-』


「3.の文章構造」を参考にしてみてください。



ステップ8:HTMLを覚える(レベル2)

もう少し覚える余裕があれば

参考ページ:『HTMLの基本テクニック』


を見ながら、

使いたい「タグ」覚えていき
順次マークアップ(タグを使ってホームページを作る)していきましょう。



ステップ8:HTML(+CSS)を覚える(レベル3以上)

さらに余裕があれば「CSS」も、といきたいところですが
ホームページ制作初心者の場合は(HTMLよりも若干難しいので)
「まず完成させる」ことを優先させましょう。

※CSSを理解できていたら、もう初心者ではありません


それでも、どうしても「CSS」が気になる、そんな場合は

参考ページ:『「困った!HTML初心者にどうやって教えたらいいの?」HTMLとCSSの効率的な教え方』


にあるように

1.CSSの基本書式を覚える(id,classもこの時に)
2.良く使われるプロパティを覚える(margin, padding, color)


を覚えて試してみましょう。


先ほど紹介した

参考ページ:『0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-』

で説明すると

1.CSSの読み込み方法
2.指定パターン
→CSSの基本書式
3.marginとpaddingの違い
→良く使われるプロパティ
8.idとclass

の部分が解説として対応しています。
2つのサイトを見ながら作業すすめると覚えやすいと思います。



上記参考ページの「3~6」にあたる

3.floatの基本を覚える
4.floatを使ったレイアウト手法を覚える
5.positionプロパティの使い方を覚える
6.その他のプロパティやCSS3のプロパティを学ぶ

にある「float」などを使う場合というのは
主にページレイアウトを自分で組み立てるときなので
(初心者には若干難しいので)
これ(CSSの応用)に取り組むのは
一度ホームページを完成させてからにしましょう。



ステップ9:デザインの基礎知識を身につける


■ホームページの見た目をよくする必要最小限のデザイン知識


最低限のHTMLを覚えれば「表現」方法がわかるので
ホームページを具体的に作っていくことができます。

ですがホームページはただ伝えるのではなく

「効果的に伝える」必要があります。


例えばホームページの訪問者にとって
最初に目に飛び込む「ホームページの配色」によって
第一印象が決まります。

また見た目の「きれいさ」によっても
ホームページの信頼性が左右されます。

ゴチャゴチャしていてわかりづらいサイトでは
何かうさんくさい感じがします。

例えて言えば掃除がされていないお店のようなもので
ホコリだらけの店内だと

「この店、大丈夫?」

と心配になってしまうような感じです。


ですので、ホームページを作っていくにあたり
最低限の「デザイン知識」が必要
です。

ほんのわずかな基礎知識があるだけで
ホームページの印象は大きく変わります。

 

ステップ9-1:ホームページの「配色バランス」を意識する

それでは、ホームページ初心者にとって覚えておいてほしい
必要最小限にして「大きな効果」をもたらす
デザインの基礎知識を紹介します。


まず、きれいなサイトとおもわれるためには
「バランス」がとれていることが大切です。

参考ページ:『私がWebサイトの配色を決める時の流れ』


を参考に「目的」「期待する効果」
「ターゲット」「伝えたいイメージ」を意識して

「ベースカラー」を決定し
ホームページ全体の「配色(のバランス)」を決定します。


※やはりここでも「目的」「誰」「どう行動してほしいか(効果)」が大事です


テンプレートを利用する場合は
「ベースカラー」は決まっていると思うので

ヘッダーの画像やバナー画像なども含めた
「配色」のバランスをとるようにしましょう。


例えば初心者の場合、
無料ホームページサービスを利用することが多いと思います。

どのようなテンプレートを選んで
作成するバナーを配置したときの「配色バランス」を考えましょう。

 

ステップ9-2:「色」が伝えるイメージを意識する

また色の持つ「イメージ」というものもあります。

参考ページ:『絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎』


の「2.色の三属性について」を確認しましょう。


注意点としては「競合」がいた場合に
「色」のイメージがかぶらないことが大事です。

特に地域ビジネスをしている場合など
ホームページの「色」が同じ場合だと
後から作った側の印象が残りにくくなる
ので気をつけましょう。



ステップ9-3:フォント(文字)を調整する

またバナーを作成する際には
「フォント」をどう選ぶかがとても重要です。

参考ページ:『フォントの基本的な選び方』


フォントに少しだけこだわる

「書体の大きさ」「字間の調整」

この2点を変えるだけでガラリと印象は変わります。

どういう行動をとってもらうために
何をどういうイメージで伝えるかを意識してみましょう。


ここまでホームページ初心者のための
デザイン最低限の基礎知識をまとめますと

・ホームページの「配色バランス」を意識する
・「色」が伝えるイメージを意識する
・フォントを調整する


この3つをまずは身につけましょう。

以上が「ステップ9:必要最小限のデザイン知識」になります。



ステップ10:「写真」や「イラスト」を利用しイメージをわかりやすくする

またデザインといえば
写真画像の素材を用意することも重要です。

例えば、この記事内容のような何かの解説なら
(「初心者向けのホームページの作り方」)
「文字ベース」でも十分かもしれませんが・・・

やはり「文字だけではイメージを伝えづらい」ものがあります。

そうした場合に必要になるのは「写真」や「イラスト」です。

自分で撮影したりイラスト書いたりできない場合は
下記のサイトから必要なものをダウンロードしてみましょう。

参考ページ:『商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版』


参考ページ:『フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。』

 



ステップ11:個別ページのタイトルにこだわる


■ホームページで集客するための「ここだけはこだわって欲しい」こと


上記の10ステップに従ってホームページ作成をすすめると
ホームページ作成の初心者や一度挫折した場合であっても
確実に「一定レベル以上のホームページ」が完成します。


影も形もなかったものが
「企画」され実際に「形」となり

しかもデザイン的にも美しい
「5~15ページ程度」のホームページが完成していると思います。


これを公開すればホームページ作成は
もう終了とも言えますが・・・

ホームページは「人」(最初に想定した「誰」)
が訪れないと意味がありません。

ほとんど訪問者は検索エンジンから

「キーワード」を検索してやってきます。

どうすれば「キーワード」経由で訪問者を呼び込めるかについては
また多くの知識が必要なのですが

ここでも必要最小限で最大の効果を出すために
「こだわるべきポイント」を1つだけ紹介します。
※ホームページ初心者は「やることを絞る」こと大事です



ホームページをはじめて作る場合に
ここだけをこだわってほしい部分というのは・・・

参考ページ:『title要素(titleタグ)の最適化』


です。

(ページ自体のコンテンツの中身があるという前提で)
検索エンジン「Google」が最重要視する部分です。

「titleタグ」の部分に「キーワード」を入れることが必須です。


上記参考URLから抜粋しました

  • 魅力的で簡潔なタイトルを考える
  • ページごとにユニークな(=同じ内容ではない)ものを記述する
  • 気の利いた言葉よりも具体的な言葉を使用する
  • ページの情報の内容を具体的に記述する
  • 複数のキーワードを過度に盛り込まない

この5点を意識してページのタイトルを決めましょう。

 


ステップ12:ボタンにこだわる


■ホームページで成約するための「ここだけはこだわって欲しい」こと


最初に「誰」というターゲットや「目的」を明確にしました。

ほとんどの場合はターゲットである「誰」に
「何らかの行動」をとってもらうことが「目的」になると思います。


どんなにきれいなホームページがあったとしても

「目的」が達成されなくては意味がありません。


訪問者の行動を促すために重要な要素として

「ボタン」

があります。

参考ページ:『クリック率・コンバージョン率を高めるボタン。3つの大きなポイント


上記を参考に
訪問者を行動させるボタンを作ってみましょう。

初心者がすぐにできることとしては
「ボタンに有益な情報を加える」という部分
だと思います。

1.クリックした先に何があるのかを伝える
2.金銭的にお得であることを伝える
3.簡単であることを伝える
4.限定であることを伝える

 



以上が、

「初心者がホームページを作る方法の12ステップ」になります。



■ホームページの作り方(12ステップ)


まとめになります。12ステップをもう一度確認しましょう。


  • ステップ1:ホームページの「目的」を決める
  • ステップ2:「誰に」伝えたいかを考える
  • ステップ3:「強み(=選ばれる理由)」を明確にする
  • ステップ4:伝えたいこと必要なことを書き出す
  • ステップ5:書きだしたものをグルーピングする
  • ステップ6:全体の構成図(サイトマップ)を完成させる
  • ステップ7:ページのレイアウト構成を決める
  • ステップ8:HTMLを覚える
  • ステップ9:デザインの基礎知識を身につける
  • ステップ10:「写真」や「イラスト」を利用し
    イメージをわかりやすくする
  • ステップ11:個別ページのタイトルにこだわる
  • ステップ12:ボタンにこだわる


■最後にホームページをチェックする

最後に完成した「ホームページ」をチェックします。

理想は自分以外の誰かに見てもらうことです。
(無理な場合は自己チェックで)

自分ではできていると思っても
他人の目からみると「できていない」こともあります。



初心者のためのホームページ10項目チェック

  • ホームページの「目的」は明確か?
  • 「誰に」向けてのメッセージかが明確か?
  • 「強み(=選ばれる理由)」は伝わってくるか?
  • 伝えたいこと必要なことは盛り込まれているか?(全体図で確認)
  • 内容のグループ分けは適切か?(全体図で確認)
  • ホームページの配色バランスは適切か?
  • イメージカラーは競合と差別化できているか?
  • 使用画像(写真・イラスト・図など)は内容を適切に伝えているか?
  • 個別ページのタイトルは「誰に」を意識しているか?
  • 「押したくなる」ボタンが用意されているか?


以上、長文となりましたが、

ホームページをはじめて作る人から
作る途中で挫折してしまった人まで

初心者のホームページの作り方(12ステップ)を参考に 「初めてのホームページ」が完成する手助けになれば幸いです。


※アクセス先の情報は公開時点の情報です。コンテンツ内容の実施につきましては、ご自身の責任のもと安全性・有用性を考慮してご利用いただくようお願い致します。外部ウェブサイト・アプリ・ソフト利用によって生じた損害に対しての責任は一切負いかねますので、予めご了承下さい

まずは無料で操作感をチェック!簡単ホームページ作成ツールAMS:FREEプラン >

もしこの記事がお役に立てれば、下記ボタンから共有頂けると運営の励みになります。



AMS簡単ホームページ作成ツール

AMSで作成したあなたのサイトをPRしましょう!

AMSマニュアル

よくある質問と回答

はじめてのAMS

このブログ記事について

このページは、AMSスタッフが2012年11月 7日 13:27に書いたブログ記事です。

次のブログ記事は「初心者でも写真・画像切り抜きが簡単にできる方法(やり方・フリーソフト)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ