理想のホームページに近づく！サイトマップとワイヤフレームについて | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

岡山のWEB戦略・WEBマーケティング・ホームページ制作をしている会社

有限会社ニッティ・グリッティです✨

会社運営していくうえでホームページ制作は欠かせないものとなってきましたね。

ホームページ制作は簡単ではなく、様々な工程を踏みます。

その第一段階としてサイトマップとワイヤーフレームというもの作成する必要があります。

この二つは簡単に言うと、ホームページの設計図のようなものです。

今回はなぜをサイトマップとワイヤーフレームを考える必要があるのか、その重要性と作り方をご紹介します💪

１．そもそも「サイトマップ」や「ワイヤーフレーム」って？

サイトマップとは直訳すると「サイトの地図」です。簡単に言うとホームページの全体像を図にしたものです。

Webサイトは複数のページで構成されていますので、訪問した方がたどり着きたいページに到達できなかったりすることを防ぐためにサイトの構成をわかりやすく伝えるための役割です。

ワイヤーフレームは、サイトマップの中の一つのページの構成を図にあらわしたものとなります。

webページのレイアウトやコンテンツの配置を決めたもので、パッと見ただけでどこに何を配置しているのかが分かる内容になっています。

この設計図を考えずいきなりホームページを作成してしまうと、なんだか想像していたものと違うサイトが出来てしまったり、

「このページを入れ忘れてしまった！」ということが出てきてしまいます💦

そういったことにならないように、情報整理を行いどのページが必要なのか、何をアピールしたいのかを書き出すことで整理することが大事になります❗❗

またホームページ制作は基本一人では行いません。

例えば会社のホームページを制作するなら、社内の人や上司、代表取締役の方にどのようなホームページを作成しようとしているかの確認をしたり

デザイナーさんや、ライティングを担当される方に、どんな内容を作成しようと思っているのかを伝える必要もあります。

この段階で設計図がないと、あいまいに伝わってしまい思っていたものと違うサイトが出来上がってしまう可能性が出てきます💦

それを防ぐためにも、ホームページ制作に関わる人と共通認識を持つためにも必ず作成しましょう❗

２．サイトマップとワイヤーフレームの作り方

【 サイトマップの作り方 】

①　方針を考える

初めに制作するホームページの方針を考えます。どのようなページを作成するのか、どのようなコンテンツを掲載するかなど目的を明確にすることが大切です。

②　コンテンツを整理する

次に作成するページ数を決定し、コンテンツを整理します。各ページにどのような情報を掲載するか、どのような階層構造にするのかを決めていきます。

③　サイトマップの設計

ページ数と階層構造が決まったところでサイトマップを設計します。

サイトマップは全ページの階層構造を示した図表です。流れ図のような形で表現することもあります。WordやExcelなどの媒体を使い表などで示していきます。

④　レイアウトの決定

最後にページのレイアウトを決定します。各ページ内でのブロックの配置やナビゲーションの位置、コンテンツの配置などを決めていきます。

【 ワイヤフレームの作り方 】

①　ページのサイズを決定する

初めに制作するページのサイズを決定します。Web標準の幅や高さを基にするといいです。

②　ページの構成を考える

次にページを構成する要素を考えます。例えば、ヘッダー、メインコンテンツ、サイドバー、フッターなどの内容構成です

③　要素の配置を大まかに決める

要素が決まったら、それらの配置を大まかに決めていきます。例えばヘッダーはページ全体の上部に配置するなどです。

④　それぞれの要素の詳細を考える

最後にそれぞれの要素の詳細な配置やデザインを決めていきます。

メインコンテンツにはどのような画像や文章を配置するか、フォームにはどのような項目を設置するかなどです。

以上がサイトマップのワイヤフレームの基本的な作り方です。

これはあくまでも基本的な作り方で、実際に制作していくには工夫が必要になってきます。

基本は分かったけど「どのようにして作ればいいのかわからない！」となりますよね・・・😢

でも大丈夫です✨

私たちホームページ制作会社には一定の実績があり、どのページが必要かなどはある程度理解をしていますのでご安心ください😊

今までの実績の中で、お客様からヒアリングをしたりしてどのページが必要が、逆にどのページが不要になるかなどを考え

お客様に合わせたサイトマップやワイヤーフレームを作成いたします✨

３．まとめ

今回はサイトマップとワイヤーフレームについてご紹介しました❗

理想的なホームページを作るうえで重要になってくる大切な部分になります。

理想のホームページを作りたい・・・というかたは是非❗お気軽にお問い合わせください✨