ホームページの使い心地が決まる！ホームページの設計図を作ろう

ホームページの使い心地が決まる！ホームページの設計図を作ろう

リサーチを経てコンテンツが出揃ったら、次はそれらのコンテンツをホームページにどう配置していくか、また今後運用していくにあたってどのような機能があると便利かなどを検討し、”設計図を作っていく”フェーズに移ります。

• サイトマップの作成
• ワイヤーフレームの作成
• 実装する機能の選定

などを通して、ホームページの全体像をつかんでいきます。

ホームページの規模にもよりますが、内容をまとめて仕様書を作成し、制作者と顧客で共有しておくのが一般的です。

サイトマップの作成

ホームページは基本的に、同じ属性のコンテンツをカテゴリーごとに分類し、階層構造(ツリー構造)になるように配置していきます。

情報を整理して並べてあげるだけで、顧客は必要としている情報へスムーズにたどり着くことができるようになります。

上図のような形でサイトマップを作り、コンテンツの配置を確認します。

頭の中だけで考えず視覚的に確認してみることで、

• コンテンツが不足していないか？
• どのコンテンツとどのコンテンツの関係性が強いのか？

などが見えてきます。

この作業をしておくことで、ホームページ全体として完成度が高まりますし、内部リンク※を構築する際の参考にもなります。

ワイヤーフレームの作成

サイトマップを作成したら、次はページ上に「どんなパーツをどのようにレイアウトするか」が視覚的に分かるよう、ワイヤーフレームという“ホームページの設計図”を作成します。

ワイヤーフレームを作成する目的は…

• 実際に制作をするときに、実装する機能やパーツを確認しながら進めるため
• 制作にかかわる人の間で「どんなホームページにするか？」という認識を共有するため
• 事前に設計図を作成することで、行き当たりばったりで制作を進めてまとまりのないホームページになるのを防ぐため

当たり前ですが、設計図もなしにビルを建てたり自動車を作ったりしませんよね？
ホームページも同じで、まず設計図を作って、それに沿って形にしていくわけですね。

実装する機能を決める

コンテンツの配置とレイアウトが決まったら、次はホームページに組み込む機能を決めていきます。

ボタンを押したときのアニメーションなど”表側”の機能のほか、更新やメンテナンスのしやすさなど、運用性を高める”裏側”の機能についてもこの段階で検討しておきます。

表側の機能を決める気をつけたいポイントは、顧客に違和感を抱かせないことです。

あまりに独特な動きをするアニメーションは、顧客を戸惑わせるだけです。

あなたがホームページを運用する目的は、商品に興味を持っている顧客をゴール(成約)まで誘導することですよね？

でも、ゴールへたどり着くまでに違和感を持ってしまうと、そこでホームページを見るのをやめてしまいます。

理想的なのは、「考えなくても使い方が分かる」ことです。

ホームページというと、ついつい独自性にこだわってしまう気持ちが出てきてしまうかもしれませんが、目的を見失わないように注意しましょう。

また裏側の機能は、日頃の更新作業をいかに快適に行えるようにするかが重要です。

ホームページは運用すること、つまり継続的な情報発信が命です。

ところが、更新作業に難しい操作が必要になれば、それだけで更新がストップしてしまう原因にもなりえます。

そのため、できるだけソースコードを触らずに情報の修正や追加ができるような機能が求められるわけです。

最近ではCMSという、ホームページをブログのように管理できるシステムを導入することが一般的です。

ワードプレス(WordPress)という名前を聞いたことがあるかもしれませんが、このワードプレスも代表的なCMSのひとつです。

ワードプレスは世界中のホームページのうち、実に32%以上で導入されているCMSで、Googleがワードプレスのソースを分析しているという話があるくらいですので、SEOに強いと言えます。

ワードプレスを導入することにより、以前ならちょっとした更新でも制作会社に依頼する必要があったものが、あなた自身の手で行えるようになります。

それにより運用コストを大幅に削減できますし、自分のタイミングで更新できるためスピーディーな情報発信が可能になります。