ワイヤーフレーム④作る時の注意点
※オンライン学習サイトUdemyを参考にしています。有料ですが上質なレッスンげ受けれるのでオススメです。
https://www.udemy.com/course/web-design-master/learn/lecture/3876768#overview
まずは、手描きで書くことが重要です。アイデアが思いつかない場合は他のWebサイトを20~30くらいリサーチしましょう。
また、基本的なレイアウトは崩さないようにしましょう。ユーザーが迷子にならないようなWebサイトを作ることが重要です。
その際意識するのは、ファーストビューにメイン画像や最も伝えたいことを乗せると良いでしょう。
人間の視線の動きも意識すると伝えたいことが伝わりやすいWebサイトを作ることができます。
人間の視線は左上から始まって下にいくZ型の動きと、左上から始まって一度右に行ってそして下に下がっていくと行ったF型の動きとがあります。（Webに対する視線の動きはこのF型と言われています。）
どちらにせよ、左上にポイントをおいてあげると良いですね。
ただ理屈で言っても直感的に理解するのは難しいと思うので、多くのWebサイトを徹底的に調査して、より多く見ること、またそれらを参考にいいアイデアを盗んでいくことが重要になってきます。
ワイヤーフレーム③ サイトの構成って？
ウェブサイトを構成するパーツを見ていきましょう。
※名称や基本的な構成は頭に叩き込んでおこう（´-`）.｡oO
※Udemyを参考としています。Udemyの授業は動画でわかりやすく解説してくれるのでおすすめです。 https://www.udemy.com
1.ヘッダー
ヘッダーはWebサイトの1番上部にあります。どのページに行っても1番上部にあるようにする。
2.メインビジュアル
文章よりも画像がメイン。そのページの目玉であり、伝えたいことをダイレクトに伝えることができる。クライアント様に何を1番伝えたいのかをじっくりと聞いてデザインする必要がある。
3.ローカルナビ、コンテンツ
クライアント様の要望によって内容の量やデザインが変わってくる。ネットショップだとカートや商品の詳細などなど。（コンテンツだけでも成り立つ場合があるよ）
4.フッター
グローバルナビゲーションがここにくると使いやすいwebサイトになるよ。
いろんなデザインがあるので自分で調べて、知って引き出しを増やしていくことが重要です。
特別編：ヒアリング
web制作において、最も重要なのがクライアント様とのコミュニケーション。
その中でも、ヒアリングがとても重要なポイントかなと思います。
※Udemyの動画内の説明が分かりやすかったのでそれを参考にしながら説明していきたいと思います。
Webサイトの制作におけるヒアリングは二段階あります。
- サイトの設計や企画
- デザイン、マークアップ、運用や集客
1. 目的（どんなことを目標に？この商品のどんなところを宣伝したいのですか？）
2. ターゲット（どんな人がターゲットですか？その人はどんなところに住んでいて、どんなライフスタイルを送っていますか？｟ペルソナの作成｠）
3.どのように1.2 に働きかける？（スマホが有効？動画は？写真は？媒体を決める。）
4.企画 コンテンツ
5.ページ構成
このように進めていくと良いでしょう。
ただクライアント様によって要望や目的は変わってくるのでその時々によって柔軟に対応しなければいけないですね（´-`）.｡oO
ワイヤーフレーム②ワイヤーフレームをつくる準備
ワイヤーフレームの準備を行いましょう。
クライアントさんとのコミュニケーションですね（´-`）.｡oO
この際も一番大切なポイントは、５W1H です。
クライアントさんに、なんで？何を？誰に？など質問を繰り返しクライアントさんが本当に求めているものを明確にしていきましょう。（コミュニケーションって大切ですね（´-`）.｡oO）
※この時に重要なのが、クライアントさんはWebサイトに対して詳しいわけではない。ということを忘れないこと。
ただただ質問してクライアントさんの要望を引き出すだけでは、私たちデザイナーとの間にギャップができてしまいそうで怖いです。
なので、ここではヒアリング+α で 引き出す作業をしてあげると良いですね。こんなデザインがあるのですがどうですか〜？こんな風にして欲しくないといったご要望はありますか〜？？など、質問の一歩先を見極めることも重要となってきます。
※ヒアリングはとても重要な手順なので、次の記事で詳しく解説しよう（´-`）.｡oO
そして、その後に提案。“他のWebサイト” や “クライアントさんが求めているものと似ているWebサイト”を見つけてクライアントさんと見てみましょう。
その中で見つけたいいアイデアはどんどん真似していくといいですね。
そしてその後、手描きでスケッチするのを忘れてはいけません。
手描きの下手くそなスケッチでもアウトプットすることでより情報がクリアになってくれるはずです。
この次にやっとPCのワークが入ってきます。PCさんお待たせ〜って感じですがこの後から彼らが大活躍してくれるのです(^^)
この清書に入る段階で、本番同様の文や写真などを（詳しく言うとPXなども。。）入力しておくとなお良いです。
明確。分かりやすい。
使うツールとしては
・Adobe XD
・Skech
などなど。。自分に合ったものを見つけるなり、調べてみてその時々に合ったものを使用していくのが良いかもしれませんね
（初心者さん（私）はまずはリサーチからです。途方もない情報の山から自分でピックアップして日々学んでいくしかないのです。。また、感覚派の人（私）は実際にダウンロードして手を動かして手で覚える方法が一番手っ取り早い（´-`）.｡oO）
ワイヤーフレーム①ワイヤーフレームって一体何？？
Q, ワイヤーフレームとは一体何？？
A, Webサイトの基盤となる部分だよ。つまり、設計図だね。
WEBデザインをする際一番初めに考えないといけないこと。
それは、デザインの枠組み。（骨組み）
それが出来ていないと、土台のしっかりなっていない家のように...
基礎ができていないデザイナーのように...後々目的や目標がボヤけて自分を、また、読み手側を苦しめてしまいます。
幾つになっても、プロでもアマでも＂基礎"や"初心"を忘れないようにしたいですね（´-`）.｡oO
さて、では本題に入って。
ワイヤーフレームを作る上で気をつけたいポイントがいくつかあります。
- 誰のために？どこに何をおく？目的やターゲットを一番に考える。
これは、５W1H に置き換えて自分に自問自答するといいですね。
そしてクライアントさんの意図や目的をしっかりと汲み取ってあげる。するとお互いストレスなく楽しいお仕事ができそうですね。
2.自己満足なワイヤーフレームにならないように常に気をつける
自分のために作るWebサイトだったらいいと思うけど、それ以外のシーンでは一番は受け手側のことを考えることがWebサイト制作にはとても大切になってきます。
