【webサイトができるまで⑥】サイト構成その２ーワイヤーフレーム②
記事コラム
こんにちは、Leycoです。
普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。
（webページとは、ホームページやLP全般のことを指します）
今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。
この記事では次のような方を対象に作っています。
・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある
・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない
「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。
今回は「webサイトができるまで」の６回目です。
【webサイトができるまで⑥】ワイヤーフレーム完成
一般的にwebサイトは、次のような手順で作成されます。
今回は、「【２】サイト構成」の２回目、ワイヤーフレーム完成までご紹介していきます。
はじめに：こちらが完成したワイヤーフレームです！
前回に作った流れにそって、作ったものがこちらになります。
ここからは、ワイヤーフレームを作るときに「これはどうなんだろう？」と思いやすいポイントについてお答えしていきます。
【ワイヤーフレームのギモンその１】手書きでも大丈夫？
回答：何とかなりますが、オススメはしません。
今回のワイヤーフレームは、Adobe XDというアプリを使用して作成しています。
他にも、
・Photoshop
・Illustrator
・figma
・Canva
などがワイヤーフレーム作成で使われるアプリやソフトです。
ただ、規定がなければ何で作っても大丈夫。
私自身、以前クライアント様よりエクセルで作ったものをいただいたことがあります。
ワイヤーフレームの目的は、ページ構成を作ること。
その目的だけを考えれば、手書きでも何とかなります。
ただ、デザイナーの場合は次にデザイン作成があるので、何かしらのアプリやソフトで作る場合がほとんどです。
また、手書きの場合、パソコンなどで他の人と共有がしづらく、少し困ることもあるかもしれません。
【ワイヤーフレームのギモンその２】色をつけても大丈夫？
回答：ワイヤーフレームでは色はつけません。
その理由としては、ワイヤーフレームでは全体のレイアウトや、それぞれのセクションのバランスを見ているから。
色、フォント（文字の種類）などのデザイン要素は、この後のデザイン作成で考えていきます。
【ワイヤーフレームのギモンその３】テキストが決まっていなくても大丈夫？
回答：完成しているのが一番良いです。完成していないテキスト部分はおおよその量（文字数）確認しておきましょう。
今回、作成したワイヤーフレームは、見出しや質問などは具体的な内容が入っていますが、それ以外はほとんど仮テキストになっています。
仮テキストを入れる際に気を付けておきたいことは、完成のテキストの文字数を確認しておくこと。
予想よりも文字数が多かったり少なかったりすると、イメージしていたデザインやレイアウトが大きく崩れることがあります。
まとめ：ワイヤーフレームでページの骨組みをしっかり作りましょう！
ワイヤーフレームは、全体のレイアウトやバランスをみるために、とても大切です。
最終的にはお客様には見えない部分になりますが、しっかり骨組みを作ってより良いwebページを目指しましょう。
ここまでご覧いただきまして、ありがとうございました。
webサイトを作るときに少しでもお役に立てればうれしいです。
webサイトのデザイン作成に関しては、こちらのサービスを出品しております。
よろしければご検討ください。
