どんなページを作ればいいか。写真撮影をプロに依頼したほうが良い理由とその相場どんなページを作ればいいか。漏れの無いサイト構...例え不格好でも、とりあえずでもホームページを作...投稿って何?ワードプレスにある投稿をうまく使う...ホームページ運営ワードプレスも使えて月額250円(税抜)~。次世代のものづくり職人たちにイン...生きた工業地域が舞台になる「鉄工島フェス2019」メカトロテックジャパン2019レポート【後編】メカトロテックジャパン2019レポート【前編】ホームページ制作HOME記事一覧ホームページ制作どんなページを作ればいいか。漏れの無いサイト構成図の作り方どんなページを作ればいいか。満2019.09.27TweetShare+1HatenaPocketテクノポートの永井です。弊社徳山の前回のブログにて「Webサイトの各ページの役割分担」について紹介しました。問合せを獲得するためのページ(クロージングページ)の工夫を考慮したサイト構成を考えることで、集客力の高いWebサイトを作成できる可能性が高まるというものでした。詳しくはこちら今回はWebサイト全体の設計図となる「サイト構成図」について解説します。サイト構成図を作ることで、Webサイト制作に必要な項目が明確になるため、Webサイトを作る際にはぜひ参考にしてみてください。手順1.トップページを頂点として、メインメニューとなる項目を配置する手順2.メインメニューの下層となるサブメニューを配置する手順3.サイト構成図を見直す4.サイト構成図の注意点4−1.細かくなりすぎないように注意する。4−2.グループを作ってわかりやすくする。4−3.わかりやすければ重複しても大丈夫です。まとめ1.サイト構成図とはサイト構成図は各ページがどのように配置されているのかをわかりやすく表現した図になります。書き方はいろいろありますが、まずは弊社のサイト構成図を参考にお見せします。サイト構成図を作ることで、Webサイトの全体像が想像できるようになります。ここで簡単にWebサイト作りの手順について説明します。最初に漏れの無いように必要なページの洗い出しを行います。訴求ページ、ランディングやクロージングなどの各ページの役割を設定し、導線を想定します。詳細はこちらサイト構成図を作成します。ワイヤー(線だけの配置図で、製造業でいう図面)を作り、ボタンなどの配置について検討します。デザインをして、個別ページを作ります。以上の手順で行います。ワイヤーは聞き慣れない言葉かと思いますので、弊社のトップページのワイヤーを参考にお見せします。以上のように、サイト構成図を作ることで、Webサイトの全体が把握でき、目的が明確になります。2.サイト構成図を作る意味についてサイト構成図を作ることで、Webサイトで伝えたい情報が漏れなく掲載できているか訴求ページがユーザーの目に止まりやすい位置に配置できているかユーザーがクロージングページに迷いなくたどり着けるかといった内容の整理が簡単にできるようになります。サイト構成図はトップページのワイヤーを作るための素材にもなるため、ユーザーが欲しい情報にたどり着きやすい設計になっているかの確認にも役に立ちます。サイト構成図があると社内で共有する際に関係者が理解しやすいことや、運用する際に管理しやすいことなど様々なメリットがあります。3.サイト構成図の作り方それでは実際にサイト構成図の作り方をご紹介します。手順1.トップページを頂点として、メインメニューとなる項目を配置するまずはメインメニューに何を配置するかを検討します。訴求ページクロージングページ会社概要お問い合わせなど、ユーザーがよく利用すると思われる項目を入れてください。メインメニューは見やすさを考慮して、最大でも9項目程度に収めてください。手順2.メインメニューの下層となるサブメニューを配置するメインメニューが決まったら次は第二下層となるサブメニューを配置してください。サブメニューはWebサイトに初めから表示されないことが多く、メインメニューを押したり、マウスオーバーしたりすると出てくるものになります。サブメニューのように、メインメニューと親子関係になる様なメニューを配置してください。することで、ユーザーが迷うことなく情報にたどり着けるようになります。手順3.サイト構成図を見直す最後にWebサイト構成図を見直してください。コンテンツに漏れがないか、ユーザーが迷いなく情報にたどり着けるようにメインメニューとサブメニューの関係が作れているかなど、Webサイトが適切に設計されているかの確認をします。4.サイト構成図の注意点サイト構成図を作るときの注意点をお伝えします。4−1.細かくなりすぎないように注意する。サイト構成図を作り始めるといろいろと盛り込みたくなり、細かくなりすぎる場合があります。材質ごとにサブメニューを作ったり、自社の取り組みについて細かく書きたくなる場合があります。細かくすることも必要な場合はありますが、細かすぎるとかえって見づらくなるため、Webサイト構成図を作った後は第三者に見てもらうことをお勧めします。4−2.グループを作ってわかりやすくする。サイト構成図はWebサイトの抜け漏れ防止以外にも、ユーザーがわかりやすい構成かどうかを確認する役割もあります。そのため、必要な情報が見つけやすいようにグループを作り、メインニューとサブメニューに分けてください。4−3.わかりやすければ重複しても大丈夫です。メニューが重複すると閲覧者が混乱する場合もありますが、わかりやすければ重複しても大丈夫です。設備紹介をメインメニューにして、会社概要の第二下層にも設備紹介を持ってきても問題はありません。まとめサイト構成図を作ることで漏れの無いサイト構成を作ることができ、さらにユーザーが見やすい構成も作りやすくなります。闇雲にWebサイトを作っていくのではなく、全体像を把握するためにもぜひ構成図を作ってみてください。リニューアルする際に役立つノウハウが盛り込まれたノウハウ集です。Webサイト制作時の企画段階で悩まれている方はぜひご覧ください(全13ページ)。