Web制作の流れとサイト設計の全体図を徹底解説！ | 在宅ワーク・内職の求人・アルバイト情報なら主婦のためのママワークス 在宅ワーク・内職の求人・アルバイト情報なら主婦のためのママワークス

大企業はもちろん、フリーランスで活動する人でも、自身のホームページなどを持っている時代、インターネットの世界には、数多くのページが存在しています。

長いURLを一文字ずつ打ち込んでページを表示させることももちろん可能ですが、その作業なしに、キーワード検索をして、情報を得ることの方が圧倒的に多いのではないでしょうか？

ではWeb制作に携わる際に、制作者はどんな流れで、どんなことに気をつけてページを制作・サイト設計をしているのでしょうか？

ここではWeb制作の流れをサイト設計の全体図について、解説していきたいと思います。

1.目的・ターゲットを明確にする

Web制作をするにあたって、そのページを制作するための「目的」が必ずあるはずです。

その案件の目的を明確にすることなく、なんとなく制作を始めてしまうと、後でページの構成を大幅に変更することになったり、場合によっては０から作り直す必要が出てしまったりして非効率です。予算オーバーの原因にもなります。

まず、どんな人をターゲットにしてそのページを制作するのか、ということを、Web制作を依頼する人と制作する人の間で明確にしてから、制作を開始することが重要です。

企業ページでも、既存の顧客向け、潜在的な顧客向け、採用希望者向け、投資家向けなど、いくつかターゲットとなりうる人たちがおり、それぞれの人が欲しいと思う情報は当然同じではありません。

キャンペーンの案内の場合は、広告から直接、LP（ランディングページ）に飛ばす、という手法もあります。

またどのターゲットに対しての情報を一番目立たせるのか、それぞれにどんなアクションを取ってもらうことを目的としているのか、という優先順位についても、具体的なWebデザインをする前に考えなければなりません。

それぞれ、情報を届けたい人を明確にイメージすることで、その人たちにとって、使いやすい、見やすいページを制作することを目指すことができるのです。

ユーザビリティ（使いやすさ）が向上することはもちろんのこと、実はSEOにも影響を与えます。

SEOとは、Serch Engine Optimizationの略で日本語では「検索エンジン最適化」などと訳されます。

通常、インターネットユーザーはGoogleやYahoo!などの検索エンジンで検索をして、上位に表示されるページをクリックして情報を得ることが多いはずです。

ページ制作の目的やターゲットにもよりますが、より多くのユーザーに情報を届けたいという場合、一般的にはこの検索順位が上位で表示されることを目指します。

この上位表示されるための基準となる仕組みは、検索エンジン側で随時見直しが行われていますが、ユーザーにとって使いやすいページ、見やすいページ、情報の価値が高いページが上位表示される傾向があるのです。

2.「要件定義書」を作成する

Web制作を依頼する人と制作者が異なる場合、両者の間で齟齬がないようにすることも大切なことです。目的やターゲットを明確にするとともに、そのためにどんな仕様にすべきかについて「要件定義書」を作成して、文書で残しておきます。

目的・ターゲットについての情報を共有しておくことで、Web制作を依頼する人と制作者の間での認識のすれ違いを防ぎ、コミュニケーションをよりスムーズなものにします。

そして、定義書には制作スケジュールや予算、最終的な成果物なども明記することで、いつまでに、何を、というのを明確にしたうえで、いざ制作開始です。

外注などをせず、Webページを自作する場合には、必ずしも要件定義書の作成は必要ない場合もあります。

3.「サイトマップ」を制作する

サイトマップとは、ページの構成を地図のように一覧にしたものです。

企業のホームページなどにも、「サイトマップ」というページを設けて表示していることもあります。いわゆる目次です。

ページの目的・ターゲットを明確にしてから、早い段階でこのサイトマップを制作することで、目的・ターゲットに対して、適切なサイト設計を考えていきます。

「欲しい情報に簡単にたどり着ける」という点を検証するのに、サイトマップがあると便利です。構成が複雑になって欲しい情報にたどり着くのに、何クリックもしなければならないとなると、ユーザビリティが下がり、ユーザーはそのページから離れてしまいます。これではSEO対策上も不利になるのは前述の通りです。

サイトマップはWebページの全体像を捉えるのに適しているとともに、最終的にはホームページ等にサイトマップを各ページへのリンク付きで掲載することによって、ユーザーにとっても、知りたい情報のありかや、ページの全体像を把握するのに役立ちます。

4.「ワイヤーフレーム」を制作する

サイトマップはページ全体を俯瞰するのに役立ちますが、ワイヤーフレームは具体的にページの構成を図式化したものです。言わばラフ案です。

ワイヤーフレームは、「UI」「UX」と呼ばれる点を意識して制作されます。

「UI」というのは、User Interface(ユーザーインターフェース)の略で、簡単にいうと、ページの見た目や操作性です。例えば、スクロールのしやすさや、ボタンのわかりやすさなどです。

文字の大きさはもちろん、フォントの種類、情報の配置、ボタンの位置、フォームの入力内容など、工夫すべき点はたくさんあります。

最近ではスマホで検索することも多いため、スマホでも閲覧がしやすいか、という点も考慮してWeb制作されていることが一般的になってきました。

「UX」は、User Experience(ユーザーエクスペリエンス)の略で、ページ利用者がユーザーとして得られる体験・感情のことです。

例えば、住所を入力する画面で、郵便番号を入力すると自動的に住所が途中まで入力されて表示されると、自身で入力しなければならない文字が少なくなって嬉しいという経験はありませんか？

逆に、内容を確認しようと一つ前のページに戻ったことによって、アンケートなどの入力内容が全て消えてしまって、もう一度入力するのが煩わしくなり、入力自体を諦めたくなることもあります。

EC（イーコマース：電子商取引）サイトの場合、入力フォームの煩わしさで購買意欲をそがれてしまって、結局顧客獲得のチャンスを失ってしまっては、二度とそのサイトから購入したくないという結果に至ってしまうことでしょう。

ユーザーとしての体験・感情というのは、企業としては、非常に重視すべきポイントなのです。

そして、良いUXを実現するためには、良いUIを構築する必要があります。

顧客にどんな良い体験をしてもらうか、について、より深く検討したうえでUIを構築したWebページは、企業イメージそのものの向上に貢献してくれるものになりうるのです。

5.コンテンツを制作する

次に、いよいよWebサイトに掲出をするコンテンツ内容を決めたり、デザインを決定したりしていきます。

Webページはパソコンであれスマホであれ、画面越しに読まれることを想定していますので、画面のサイズはもちろんのこと、目が疲れにくい色使いなども気にすべきポイントです。

また、特定の色が見えにくいという人もいます。色覚の多様性に配慮した、誰もが見やすいデザイン・色を意識すると良いでしょう。

さらに、デザインだけでなく、文書の表記ルールを明確にしておくことも、読みやすさを高めることに貢献します。

デザインや表記がページごとに統一されていることはもちろん、サイト全体で一貫していると、統一感が生まれ、読みやすさもアップします。

動画やイラスト、テキスト文書など、必要なコンテンツを決めて、準備していきます。

6.作成作業に入る

実際にWebサイトとして表示されるために、いざ作業に入ります。

作成作業には、ホームページ作成ツールを使用した比較的難易度の低い方法、CMSを使った方法、HTML・CSSを使って作成する難易度高めの方法などがあります。

まず、作成ツールを使用した場合ですが、難易度が低いものの、できることの範囲が限られることから、クオリティが下がってしまうため、あくまでの簡易的なWebサイトとなります。

ホームページを作成する予算が取れない、個人事業主でとりあえず簡単なページだけでも作成しておきたい、などというニーズには対応できるでしょう。

逆に難易度が高いですが、自由度が高いのは、HTMLやCSSを使ったWeb制作です。

HTMLとは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、Webページを作成するための言語です。

CSSとは、Cascading Style Sheet(カスケーディング・スタイルシート)の略で、Webサイト上でのフォントの色や大きさ、背景色などを指定するための言語です。

専門の言語を習得する必要があるため、難易度は高くなりますが、言語を使って自由に設計することが可能なことから、より複雑な要求に応えることが可能となります。

また、中間的な存在として、CMSがあります。Contents Management System(コンテンツマネジメントシステム)の略で、作業工程は多いですが、工程を覚えれば、初心者でも比較的簡単にWebサイトの管理をすることが可能です。

ブログの更新や、ニュースリリース・お知らせなどは、掲出頻度の高い作業となりますので、担当部署でCMSを操作してページ管理をさせることが可能です。

CMSの代表例は、WordPress(ワードプレス)です。

使いこなすには学習や慣れが必要ですが、HTMLやCSSを使ったWeb制作に比べて、高度な知識なしに操作することが可能であり、世界中で広く普及しています。

他にもECサイト特化型のCMSなどもあります。

7.リリース(公開)

Webページをリリースするにあたっては、まずドメインを取得します。

ドメインは、「〜.co.jp」や「.com」「.net」といった各ページの住所のようなものです。

そして、サーバーを確保する必要があります。

レンタルサーバーという選択肢もあります。

Webページは、リリース前に実際にテスト画面などで操作確認などが行われ、問題がないことを確認してリリースされます。

パソコン、タブレット端末、スマートフォンそれぞれで、問題なく見られるか、レイアウト崩れはないか、文字化けがないか、など確認をしていきます。

リリース後にも、不具合を生じたり、改修が必要になったりすることもありますし、定期的に新しい記事などを掲出していくなど、Webページのリリースはゴールというよりスタートです。

ここまでWeb制作の流れ、サイト設計の全体図について見てきました。

随時、見直しをして、改修をすることで、PDCAを回して、サイトのユーザビリティを高めていけると良いですね。