シリーズ「ウェブサイト制作の裏側」の第二回となる今回は、

「ウェブサイトの設計」をテーマにお話しさせていただきます。

まだ第一回のコラムを読まれていない方は、こちらの

ウェブサイト制作の裏側 第1回 ウェブサイトと印刷物の違い

からお読みいただけますと、今回の内容がよりわかりやすくなると思います。

今回のテーマとなる「設計フェーズ」ですが、
ウェブサイト制作全体のプロジェクトの中では2つ目のステップとなります。

ステップ1の調査フェーズの結果、どういうウェブサイトであるべきかの姿が見えたら、
それを設計書（専門用語でワイヤーフレームとも呼ばれます）に落とし込む必要があります。

例えば家を建てるときに、設計図を作る前にいきなり工事をはじめたらとんでもない家が出来上がってしまいそうですよね。

家と同様、ウェブサイトについてもまずは設計書を作成するところから制作フェーズがはじまります。

どのステップも重要なのですが、その中でも特にこの設計フェーズは重要です。
どんなに見た目が美しいウェブサイトでも、求める情報の掲載がなかったり、情報が探しづらかったりしたら気持ちよく利用していただけません。

情報設計がきちんとされていて、求める情報がすぐに見つかる

ということがとても重要です。

極論ですが、どんなにデザインの酷いウェブサイトでも設計がきちんとされていて便利なサイトであれば使っていただけますし、綺麗なだけで中身のないサイト、不便なサイトであれば人は離れてしまいます。

では、実際に設計を進めてみましょう。

まずはウェブサイト全体の設計（サイトマップ）から考えはじめます。
個別のページの設計を考える前に、サイト全体のページ設計を考えることが大切です。

たとえば、一般的な企業のコーポレートサイトであればこのような全体構造になることが多いです。

企業によって掲載したい情報量にも違いがありますので、その企業ごとに合わせて調整していきます。 たとえば、

• ・事業内容は会社情報ページに収まるくらいのボリュームしかない
• ・実績は掲載したいが、個別の実績にそこまでの情報量はなく、実績数も少ない
• ・採用情報は外部の採用代行サービスサイトにリンクを飛ばすだけで良い

という場合は、このようなサイトマップになります。

かなりすっきりしましたね。

企業側としては、「たくさんページがあって、たくさん情報が掲載されているほど嬉しいだろう」と考えてしまいがちなのですが、ウェブサイト閲覧者の立場では、「できるだけ少ないページに、重要な情報だけが濃縮されて掲載されている方が嬉しい」という場合の方が多いです。

ウェブサイトは閲覧者のためのものという大前提から、

望月印刷では、できるだけスリムなサイト設計をご提案させていただいております。

さて、ウェブサイトの全体設計が決まったら、次に個別のページの設計に移ります。

このときのワイヤーフレーム制作の注意点として、

• ・まだデザインではないことを明確にするために、原則的にモノトーンで作成する
• ・PCサイト向け表示とスマートフォン向け表示のどちらから設計するかはアクセス解析から判断する

というものがあります。
こちらが実際のワイヤーフレームの例です。

上記のワイヤーフレームは、Adobe XDというソフトを使って制作しています。

下記がそのプレビュー画面になりますが、ボタンにリンクを設定したり、一部の要素を固定表示にできるなど、実際のウェブサイトに近い状態で設計を確認することができるため、クライアントとの間で認識のずれが起きにくいというメリットがあります。

実際のプロジェクトでは、クライアントからフィードバックをいただいて設計の修正対応も行うのですが、プレビュー画面上にコメント機能もついているため、フィードバックコメントも直接ここに書き込んでいただけます。

https://xd.adobe.com/view/60da4400-bd2f-40f1-baff-a60aed660bec-3589/

サイト全体の構造設計を行なったあとに、こうして個別のページの設計を行なっていきます。

このタイミングで、どの部分をCMSにするのか、フォームに入力された情報はどう処理するのかといったシステム面の認識合わせも行います。

いかがでしたでしょうか。
ウェブサイトの設計について、少しでも理解を深めるお役に立てていたら嬉しいです。

ウェブサイト制作はぜひ望月印刷におまかせください。
ご相談は無料です。お気軽にお問い合わせください。