個人ブログ運用
PR

自分でつくるワードプレスを使ったホームページ制作の手順

自分でつくるワードプレスホームページ制作の手順
hisashi_demo
記事内に商品プロモーションを含む場合があります

「できれば、お金をかけずにホームページを作りたい」

「ホームページ制作、楽しそうだから自分で作ってみたい」

そう思って、ホームページ制作について色々調べていたりしますか?

大丈夫です!ホームページは自分で作れます!

このブログ、ぼくはワードプレスを使って自分で作りましたしね。

ワードプレスを使えばですね、プログラミングを覚えなくても簡単に自分のホームページを作ることができるんですよ!

のざき寿
のざき寿

こんにちは、のざき寿(ひさし)といいます。

前職はホームページ制作会社でWebエンジニア(WordPress制作)をしていました。

Webライターとしても活動しています。

今さっき「ワードプレスを使えば簡単にホームページを作れます!」と言いましたが…

とはいえね..

パソコンが得意でない方にとっては、何から手をつけたらいいのか、わからないですよね。

あなた
あなた

とにかく作ってみよう!作りながら考えよう!

いやいや、それはそれで素敵なことなんですが、

それだとね、効率悪いですし、間違った作り方で進めてしまうとやり直しとか無駄な作業が発生してしまいすから…

時は金なり。賢くいきましょう。

ぼくはですね以前、ホームページ制作会社に勤めていたんですね。

あなたラッキーですよ、ぼくワードプレスエンジニアだったんです。

中小企業のホームページを50社ほど作った経験があります。なので…

今からホームページ制作の手順を、ギッチリお伝えしていこうと思ってます。

のざき寿
のざき寿

まずは設計です。

建築も設計図を書くことから始めますよね!

ホームページ制作も一緒です。まずは設計図を書くことから始まります。

それでは、ホームページ制作の手順について解説していきますね!

ぜひ、最後までご覧ください。

のざき寿(ひさし)
のざき寿(ひさし)
元Webエンジニア
Profile
Webライター・ブログ運用などで活動しています。現在介護職員。ホームページ制作会でWordPress・Webエンジニアをしていました。元よしもとの元お笑い芸人。
プロフィールを読む

ホームページ制作の制作工程

いきなり作っちゃダメです!

はやる気持ちを抑えてですね、まずはホームページ制作の全体像を頭の中にブチ込みましょう!

つっても簡単。

大きく分けてふたつです!

ホームページ制作の工程
  • 設計フェーズ
  • 制作フェーズ

フェーズって「工程」のことです。カッコよく言ってみました。

のざき寿
のざき寿

設計の工程から解説していきますね。

設計の工程

のざき寿
のざき寿

設計と制作を同時並行で進めないこと。

コンセプトがブレブレになってヘンテコなホームページが出来上がってしまいますよ。

ホームページを作る目的を明確にする
  • ターゲットを定める
  • 何を伝えるホームページなのか
ホームページに載せる情報を整理をする
  • 事業内容
  • メッセージ
  • 所在地など

ドメイン・サーバーなどの準備も進めていきます。

ホームページのページ構成を決める

サイトマップを決めて、ホームページのページ構成を考えます。

ホームページへの集客方法も考えていきます。

トップページの設計をする

ホームページの顔になる、トップページのレイアウトやコンテンツのアイデアを考えます。

下層ページのレイアウトを考える

トップページから移動できる下層ページの構成を考えます。

のざき寿
のざき寿

ここまでが設計フェーズ(工程)。

次は制作フェーズです。

制作の工程

のざき寿
のざき寿

設計図に沿って制作を進めていきましょう。

思いつきで制作しないようにしましょう。

ライティングをする

ホームページに掲載する文章を考えていきます。

  • キャッチコピー
  • Webライティング
デザインコンセプトを決める
  • メインカラーやサブカラーなどを決める
  • フォントなどの選定
トップページのデザインをする

トップページの設計書をもとに、デザインを作っていきます。

コーディング

ホームページをインターネットで閲覧できるようにしていきます。

  • サーバーにワードプレスをインストールします。
アクセス解析などの設置

ホームページのアクセスを計測するために、Googleアナリティクスを導入していきます。

不具合の調整など

ホームページを公開する前に、不具合がないかなどチェックしていきます。

ホームページ公開

ホームページ公開!おめでとうございます!

お疲れ様でした!

のざき寿
のざき寿

ホームページ制作会社では、このような工程でホームページを作っていきます。

ちょっと…大変そうに感じますか?

いやいや、出来上がるホームページを想像したら、ワクワクしてくるでしょ。

ホームページの設計とは

のざき寿
のざき寿

では、設計の工程から詳しく解説していきますね。

ホームページの設計とは
  1. ホームページを作る目的を明確にする
  2. ホームページに載せる情報を整理をする
  3. ホームページのページ構成を決める
  4. トップページの設計をする
  5. 下層ページのレイアウトを考える

ホームページを作る目的を明確にする

のざき寿
のざき寿

まず、ホームページを作る目的を整理しときましょう。

作ったあとに「あれ?なんのために作ったんだっけ?」ってなると、それはお金と時間をドブに捨てるようなもんですから。

ホームページの目的
  • 集客・認知
  • 販売
  • お問い合わせの獲得

おおむねこんな感じの目的ですよね。

ぼくも「集客・認知」のためにこのブログを立ち上げました。

ホームページの目的が決まったら、目的に応じたホームページの形式を選択していきます。

複数のページで構成するホームページなのか、一枚のページで構成するランディングページのようにするのか。

目的が整理できたら、つぎはホームページのコンセプトを考えます。

コンセプトとは?
  • 誰に(お客さん)
  • 何を(商品・サービス)
  • どのように(見せ方や伝え方)

ターゲット・ペルソナを明確にして、「3C分析」などを使って自分の商品を分析しましょう。

たとえば、ぼくのこのブログだったら、

このブログのコンセプトは…

「(誰に)個人ブログを立ち上げたい人へ」

「(何を)ブログの作りかた方を」

「(どのように)体験談を交えて」

というブログコンセプトで制作しています。

自分の伝えたいことではなく「お客さんが知りたいことはなんなのか」を考えていくことが大切です。

のざき寿
のざき寿

あなたは、どんなホームページをつくりますか?

お客さんを楽しませられるホームページがいいですよね。

ホームページに載せる情報を整理をする

ホームページにはどんな情報を載せますか?

思いつきで情報を足していくのではなくて、あらかじめ載せる情報を洗い出しておいた方がいいですね。

情報整理を整理の項目
  • 事業者名
  • 所在地
  • 事業内容
  • サービス紹介
  • 活動内容
  • 企業メッセージ

どのホームページを見ても、だいたいこのくらいの情報は載せていますね。

のざき寿
のざき寿

ぼくが勤めていたホームページ制作会社では、これらの項目をエクセルでまとめていました。

もっと詳しくホームページの情報整理について詳しく知りたい方は、こちらの記事を参考にしてくださいね。

独自ドメイン・レンタルサーバーの準備は先にしておく

また、この時点で「独自ドメイン」「レンタルサーバー」の契約も進めていきます。

独自ドメイン・レンタルサーバーとは?

あなた
あなた

まだ設計の段階でしょ!?早くない?

って思うかもしれませんが、いざ制作に入ろうとした時に、

  • 使いたいドメインが、先に使われてしまっていて使えない
  • レンタルサーバーの契約に思ったより時間がかかってしまった

みたいなケースが制作会社でもありがちなミスで、

のざき寿
のざき寿

うわぁ〜、ドメイン名を使えないじゃん!

みたいなことがちょいちょいあります。たとえば先に名刺を作っていて、名刺にURLを印刷してしまっていたとしたら…全部やり直しですね。

なので、ドメイン・サーバーは、先に契約を進めておきましょう。

ページの構成を決める

のざき寿
のざき寿

情報整理で洗い出した内容をもとに、具体的に「どんなページをつくる」かを設計していきます。

一般的なホームページの構成
  • トップページ
  • 会社概要
  • 所在地・地図
  • 事業内容・サービス概要
  • 企業メッセージ(理念・ミッション)
  • 会社沿革
  • 採用情報
  • お知らせ(更新コンテンツ)
  • お問い合わせ(送信フォームの設置)

中小企業のホームページは、だいたいこのようなページ構成になっています。10ページ前後ですね。

のざき寿
のざき寿

ホームページ制作会社では「サイトマップ」と言います。エクセルを使って作ったり、デザインソフトを使ったりもします。

A4用紙に手書きしてもいいですよ!

個人ブログの場合は更新するコンテンツが中心になります。ブログ型のページ構成を知りたい方は、こちらの記事を参考にしてみてください。

トップページの設計をする

のざき寿
のざき寿

設計の最後の工程は、トップページ設計図を書くことです。

ホームページおいてトップページはいちばん重要なページなんです。

ユーザーはトップページを基軸にして、他のページに移動するからね。

だからトップページさえしっかり作り込んでおけば、他のページはトップページに似せて作ればいいので、それほど手間はかからないのよ。

トップページ設計のポイントはね、下層ページへの動線になるように設計することね。

トップページ構成
  1. ロゴ
  2. グローバルナビゲーション
  3. メインビジュアル
    • キャッチコピー
    • リードコピー
  4. 企業メッセージ
  5. サービス内容
  6. 新着のお知らせ
  7. 採用情報
  8. お問い合わせ

強調したいコンテンツを目立たせるように構成してくこと。

たとえば「サービス内容」の概要を配置して、詳細ページにリンクさせるような設計にするとか。

ブログのトップページの構成を知りたい方は、こちらの記事を参考にしてみてください。

ホームページの制作とは

のざき寿
のざき寿

設計ができたら、今度は制作の工程です!

ホームページの設計とは
  1. ライティングする
  2. デザインコンセプトを決める
  3. トップページのデザインをする
  4. コーディング
  5. アクセス解析などの設置
  6. 不具合の調整など
  7. ホームページ公開

ざっくり分けてこれだけの皇帝があるんですけども、

ここからはどんどんホームページが形になっていくので楽しいですよ。

ライティング(Webライティング)

のざき寿
のざき寿

まず文章から考えます。

設計図をもとに、トップページから文章を書いていきます。

画像とかレイアウトとかデザインとかは後です!

装飾などの細かいところをから先に手をつけてしまうと、ホームページ制作は一向に前に進まないから。

文章を書いて、文章ではわかりにくい表現の部分を画像にしたりイラストにしたりします。

見せ方を工夫するためにレイアウトや装飾をしていくんです。

だから文章から書くんです。

ホームページの文章は、Web(SEO)ライティングで書く

ホームページの文章は、Webライティングで書いていきます。

Webライティング(SEOライティング)とは、

Googleの検索エンジンに対して、ホームページが検索上位に表示されるように文章を書く技法です。

自分の言いたいことではなく「ユーザーが何を知りたいか」を意識して文章を構成していきましょう。

デザインのコンセプトを決める

のざき寿
のざき寿

まだ細かいデザインをしてはダメです!

デザインの大枠を決めてから、細かいデザインに入っていきます。

デザインのコンセプトを決めましょう。

デザインコンセプト
  • フォント
  • カラー
    • メインカラー
    • サブカラー
    • アクセントカラー
  • 装飾などのあしらい
  • ロゴ
  • 写真やイラストの選定

「かっこいい」「かわいい」「やわらかい」などの形容詞を決めて考えていくのもいいですね。

ユーザーに対して「どんな印象を持ってもらいたいか」という視点も大事です。

他のホームページをベンチマークする

とはいえ、デザイン経験のない人が「コンセプトを考えろ!」って言われても難しいですよね。

そこで「ベンチマーク」をします。

ベンチマークとは「他のホームページを参考にする」ことです。

ベンチマークしよう
  • 同業他社のホームページを探す
  • 目標になる企業のホームページ探す

大きな声では言えないですが、ベンチマークしたサイトを真似すればいいのです。

絶対にパクってはダメですよ。あくまで参考にするということです。

トップページのデザインをする

デザインコンセプトが決まったら、やっと、トップページのデザインをしていきます。

のざき寿
のざき寿

ベンチマークしたホームページを参考にしながら、レイアウトや装飾などをアレンジしていきましょう。

なんか「ベンチマークってズルいなぁ〜」とか思ってたりします?

いやいや、デザイナーでもない限り、一からデザインすることって難しいですよね。

ベンチマークからデザインを進めていく方法は、ホームページ制作会社でも普通に行われていることです。だから安心してアイデアをもらっちゃいましょう。

ただし、さっきも言いましたが、パクったりコピーしてはダメですよ。最悪の場合、著作権の侵害で訴えられますよ。

コーディングしてWebページにする

コーディングとは、デザインしたページをインターネットで閲覧できるようにプログラミングしてWebページすることです。

ホームページ制作で使われているプログラミングは、つぎのような技術です。

プログラミングに必要な技術
  • HTML
  • CSS
  • JavaScript
  • PHP

こうした技術を使ってWebページ作って、サーバーにWebページをアップロードすると、ホームページをインターネットで見れるようになるわけです。

だから、ドメインとレンタルサーバーが必要になるわけですね。

はっきり言います…

素人がこれだけのことを覚えるには、2年くらいかかります。

のざき寿
のざき寿

後ほど、素人でもデザイン・コーディングができる方法を紹介しますね。

アクセス解析などの設置

ホームページを公開したら「どれだけの人がホームページに来てくれているのか」確認したいですよね。

ですので、ホームページにアクセス解析を設置します。

ページビューとか滞在時間とかの計測ができるようになります。

分析ツール
  • Googleアナリティクス(閲覧数などの計測)
  • Googleサーチコンソール(検索キーワードの調査)
  • Googleタグマネージャー(クリック数などの計測)

ホームページの運用・改善策を考えるために、データの分析を行なっていきます。

  • ホームページの訪問数
  • ホームページの滞在時間
  • 成果の件数

これらの成果を計測していきます。

アクセス解析の設置方法についてはこちらの記事を参考にしてみてください。

不具合の調整など

いよいよ最終段階です。

ホームページを公開する前に、不具合がないか・間違いがないか確認します。

公開前のチェック項目
  • 誤字脱字のチェック
  • レイアウト崩れのチェック
  • リンク切れのチェック
  • アクセス解析のチェック

公開前のチェックをしっかり行います。

ホームページ公開

のざき寿
のざき寿

設計・制作、本当にお疲れ様でした。

設計から制作までは、10ページ前後のホームページでも3ヶ月くらいの制作期間がかかります。

制作の工程を紹介してきましたが…

個人でここまで作業するのは現実的ではありません。

ぼくは、はじめに言いました。

「個人でも簡単にホームページを作ることができます!」って。

それを実現するツールが、ワードプレスです。

それでは紹介しますね!

ワードプレステーマ「JIN:R(ジンアール)」を使って

ワードプレスを使えば、ホームページ制作にデザイン・コーディングをしなくてもWebサイトができます。

今まで説明してきた制作工程のほとんどを、ワードプレスが担ってくれます。

ワードプレスには「ワードプレステーマ」という機能があります。

ワードプレステーマを使うと、ほぼデザインが完成された状態からホームページのカスタマイズができるので、大幅に制作工程を短縮することができるんですね。

ぼくがおすすめしているワードプレステーマは「JIN:R」です。

ホームページ制作で大切なこと

一番大切なことは、

  • 何のためにホームページをつくるのか
  • どんな成果を求めるのか
  • ホームページを公開した後どのような運用をするのか

これらのことを忘れてホームページ制作を進めてしまうと、想定とは違った出来上がりになり大切な時間とお金を無駄にしてしまいます。

ホームページ制作の全体像を理解しておくことは、目的達成の手助けになるでしょう。

不要な工程は省略するなどして、ぜひあなたの制作にお役立てください。

記事URLをコピーしました