サイト制作から運用まで！個人向けWebサイト制作方法まとめ

個人でWebサイトを作成する時の作業行程まとめ

Webサイト作成を始める前の事前準備

これから作る Web サイトの目的を明確にする

これから公開しようとしているWebサイトには、必ず明確な目的が存在します。受注数の増加や問い合わせ数・申し込み数の増加、情報共有など。目的は1つの場合もあれば複数ある場合もあり、目的の数が増えるほどWebサイトの制作は複雑になってきます。

流行りのWeb サイト・デザインを一応見ておく

時代の流れと共にWebサイトのデザインにもトレンドがあります。スマホを意識したWebデザインは当たり前となってきていますし、InternetExplorerやGoogleChromeなどブラウザ機能の進化と共に、様々なデザイン要素・機能が加わっています。制作前に、一度は自分の常識をブチ破るような Web デザインに出会っておく必要があると思います。

Web サイトにどんな機能を搭載するか検討する

Webサイトの目的を明確にすると、その目的をスムーズに達成するためのサイト設計が必要になります。このサイト設計の時に、どれだけ多くのWeb 機能や表現方法を知っているかで目的の達成度も変わってきます。基本の HTML、CSS をはじめ、GitHub や jQuery、WordPress のプラグインも知っておけば、ベストな Web 機能を選択することができます。

Webサイトを制作・運営するプラットフォームを選択する

ある程度作りたいWebサイトのイメージが固まってきたら、今度はそれを形にしていく必要があります。制作ストレスや管理時間も変わってきます。ツールによって強み・弱みがありますので、自分の作ろうと思っている Web サイトとWeb 制作ソフトがマッチしているか検証しておく必要があります。

代表的な Web 制作ソフト　セルフ系

ご自身で Web ページを作成し、サーバー設定、ドメイン設定などを行うパターンになります。テンプレート機能を使えば、Web 制作初心者でもデザインの概要をつかむことはできますし、様々な Web 機能（jQuery プラグインなど）を搭載できる特徴があります。本格的な個性的な Web サイトが作成できる一方で、最初にツールの使い方を覚える必要があります。

• メリット／無料で利用できるソフトが多い、レイアウトの高い編集度や多彩なWeb機能の選択肢

• デメリット／サーバー設定などの基礎知識が必要、ソフト操作を覚える必要がある

各ソフトのイメージ動画

・WordPress

・Microsoft Expression Web 4

・Coffee Cup

・ホームページビルダーバージョン20通常版

・Adobe Dreamweaver CC

代表的なWeb制作ソフトコンプリート系コンプリート

HTML、サーバー設定など煩わしい作業が一切なく、ワード感覚で Web サイトが作れるソフトになります。早く・簡単に Web サイトをリリースすることはできますが、jQuery などのアニメーション機能（例：animate.css など）が搭載できないなどアレンジ性に欠けます。

• メリット／作成・公開までが早く、簡単、キレイなデザイン。直感的に作成できる
• デメリット／月々のコスト。Web機能の制約性、ワンパターン化されるデザイン

各ソフトのイメージ動画 ・WIX

・Jimdo

・weebly

・Bind

多くの方がどのソフトで Web 制作に挑もうか悩まれると思います。一つの目安としては、今世の中に出回っている Web サイトがどのソフトで管理されているか知っておくと、参考になると思います。こちらのサイトで Web サイトの管理ソフト・シェアを確認することができます。 約 25 % の Web サイトが、WordPress を使って運営されていることに驚かれると思います。これは WordPress 特有のシステムにあり、サイドバーやフッターなど各エリアのコンテンツを個別に管理・編集でき、ページ数が膨大に増えても管理・編集しやすい特徴があります。また無料のプラグインも豊富に用意されているので、難しい JavaScript などの Web 機能が分からなくても、簡単に最新の Web 機能をだれでも使える特徴があります。

サーバー・ドメインを選択する

セルフ系の Web 制作ソフトを使って Web サイトを公開する場合は、レンタルサーバーの契約とページを公開するドメインを用意する必要があります。国内のレンタルサーバー業者は10社以上あり、どれがいいか悩むと思います。選ぶ際のポイントは、月々のコストとサーバー稼働率、WordPress 適応サーバーであることなどが挙げられます。 **参考／レンタル・サーバー比較サイト、稼働率に関しての参考記事

具体的なWebデザインとサイト構成を考える

Web 作成ソフトが決まってくると、なんとなく Web サイトのデザイン・機能もイメージ出来てくると思います。テクニカルな問題は置いておいて、一旦自分の理想とする Web ページのデザイン、サイト構成を紙に書いて可視化してみます。理想の家のデザインもまずはスケッチに書いて、間取りや外装などのイメージを膨らませるのと同じような作業になります。 この時にお手本となる Web サイトがあると、これから作る Web サイトのイメージが固まり易いと思います。コーポレート系であれば TOYOTA やブログであればホリエモンドットコム（WordPress 製）など好みのサイトを参考に、自分なりにアレンジを加えていきます。 トップデザインやサイトマップなどある程度形が決まれば次のステップに作業を進めていきます。ワイヤーフレームやモックアップについては、プロは専用ツールを利用して作業しますが、個人の場合は紙などに書き下ろすスタイルのワイヤーフレームでも OK と思います。

Web 広告掲載やアフィリエイトを利用して広告費を稼ごうとしている場合

Web デザインを考えていく中で、広告やアフィリエイトの掲載場所・掲載方法などもある程度事前に把握しておく方が、後々の編集が楽になります。例えば、Google アドセンスを利用する場合は、表示される広告のサイズを事前に知っておくと、考えている Web デザインにうまく埋め込むことができます。広告のサイズ（Google アドセンス）は、Google アドセンス・ガイドを参考にすることができます。

問い合わせフォームやユーザー登録機能を搭載する場合

問い合わせフォームやユーザー登録機能を搭載する場合は、スパムへの対策を検討しておく必要があります。無防備にサイトを公開してしまうと、後でスパム処理に追われる可能性もあります。 **スパム・・・公開している Web サイトの意図とは異なる目的で利用するユーザー。例えば、ブログのコメント欄に関係ないことを書いたり、問い合わせフォームから一方的なセールス・メールを送ってくるなどです。スパム対策については、有償から無償まで幅広いサービスが提供されています。

例／筆者の運営しているWebサイトのスパム状況 by CleanTalk

経営計画を立てる

Web サイトを維持・運営していくにもお金がかかります。年間コストが必要なドメイン費用、毎月のレンタルサーバー代金、有償スパムや有償SEO、Web 広告への掲載を利用していく場合はその代金、など数百円単位のお金でも10年20年のスパンでみると大きなコストとなってきます。特に個人の場合はその負担割合が大きく感じられ、せっかく作った Web サイトも維持できなくなるというケースも珍しくありません。

• 計算例
  • ドメインコスト年間　1400円
  • レンタルサーバー代金　年間4400円
  • スパム対策費用　年間1000円
  • 累計年間維持コスト　6800円
  • 10年間にかかるコスト　68,000円

しっかりと費用対効果が見込める Web サイトに作り上げないと、維持が難しいことが分かります。

Webサイトの制作スタート！パーツ編

Web制作ソフトやサーバー、大まかなデザインが決まってくると、今度はそれを実際に組み立てていく作業となります。まずはWebサイトを組み立てていく為のパーツパーツ

Web制作に必要なパーツ例

• Webサイトのロゴ
• ファビコン
• 自分のサイトがシェアされる時（facebook等）に表示される画像や文章の設定（参考サイト）
• コンテンツの写真や動画、アイコンの用意
• 文章
• フォント・デザイン
• Web機能に必要なプラグイン（jQueryやWordPressプラグインなど）
• プライバシーポリシーや利用規約などの防御的情報の準備

意外と細々としたパーツもいるんだな、めんどくさいな、と思われる方も少なくないかもしれません。はじめは確かに面倒かもしれませんが、一度セットすればOKな部分も多いので、がんばってパーツ作成に励むことが推奨されます。

Webサイトの制作スタート！要領編

サイト・イメージを可視化したメモ書きを元に、Web 制作ツールを立ち上げて、各パーツを配置していきます。この時にできれば、1日程度しっかり時間をとって、使用する Web 制作ツールの機能（何ができて何ができないか）を学習しておくと、制作過程で発生する 2度手間 3度手間を少なくすることができます。 またテンプレートを使用する場合は、作成段階で画像表示やレイアウトでバグが発生することも少なくありません。特定のテンプレートに拘しすぎないように、気持ちに余裕を持っておく必要があります。 どうしても納得のいくデザインにならない場合は、プロやフリーランスの方にテンプレート作成を依頼してみる方法も悪くないと思います。

Webサイト公開後の作業

Web サイト公開後もホッとしておられないのが Web 業界の悲しいところで、冒頭に立てた Web サイトの目的を達成するためには、Web サイトの管理環境を整えておく必要があります。

一般的なWebサイト管理環境

• Google Web マスターツール、bing Web マスターツールなどに登録
  目的／検索エンジンに自分のサイトがうまく読み込まれているかチェックするため。掲載順位を向上させると、より多くの人に Web サイトを見てもらえ、目的達成に近づきます。
• Google Analytics などの統計サービスに登録
  目的／自分のサイトを見る人が、どういうルートで入ってきて、どれぐらいアクセスしているか世の中のリアクションをチェックして、サイト更新や維持のモチベーションに繋げるためです。
• 広告配信会社やアフィリエイト提供会社への申し込み
  目的／広告掲載費やアフィリエイト・ボーナスを取得するためには、各サービス会社に自分の Web サイトを申し込む必要があります。
• WordPress など CMS 利用の場合は、定期的に更新通知がきていないかチェック
  目的／高いシェアを占める WordPress は、悪意あるハッカーから狙われやすいです。最新のプログラムに更新して、自分のサイトが乗っ取られない様に注意する必要があります。
• Google PageSpeed Test などを利用して、より視聴者にとって使いやすいサイトになるように改善に努める
  目的／不要な画像やプログラムをブラッシュアップしていくと、よりユーザーに好かれるサイトになる可能性があります。

まとめ

いかがでしたでしょうか？Web制作の大まかな流れをご紹介させて頂きましたが、実際の作業現場では、各工程の要所要所で悩むポイントは多く、時間と体力を消費します。大変そうだな、と思われる方もいらっしゃるかもしれませんが、Webサイトの目的がシッカリしていればある程度の困難は乗り切れ、その度に小さい自信も積み重ねられていきます。

尚、本投稿ではレスポンシブ・デザインやモバイル・フレンドリーについて触れていませんが、モバイル・ファーストが常識となりつつある今、あえて取り上げる必要がないと判断し、割愛させて頂いています。