こんにちは。
ワイヤーフレームに取り組みました。
Webでデザインするうえでレイアウトを定める設計図となります。
ワイヤーフレームを決めておかないとデザインをした時に、レイアウトが崩れてきたりするので非常に大切になります。
ワイヤーフレームを作る上で必要なことがあるのでワイヤーフレームについてお話しします。
載せる要素を選ぶ
サイトにより異なりますが、必要なものを書きだして確認をする事が大切になります。
ロゴ
写真
電話番号
会社情報
商品情報
アクセス
お問い合わせ
よくあるご質問
お知らせ
など・・・・色々と出てくると思います。
制作するサイトによって要素は異なりますが、ECなどの場合は商品も多くなってくるので、かなりの量になってくると思います。
情報量が多い場合は一度書き出してみて重複しそうなものは、まとめて1つにしたり選別をしたほうがいいかもしれませんね。
紙に書いて大変な時はポストイットなどを活用して並べて見て不要なものは外していく方法がスムーズにできると教えてもらったことがあります。
一目瞭然で分かりやすく変更しやすいのでおススメですよ。
サイトの目的を確認
「その目的は誰に伝えるためのものなのか？」を考えるのも必要です。
そして、伝えたい内容と優先順位を決める。
「何を大きくする」「すぐに目につく場所に置く」など決めやすくなります。
どれも大切で悩みそうですが、優先順位を決めておくと配置を決めやすくなります。
ターゲットによっても変わってくるので、「ユーザーがどのように感じるか？」「どのように行動するか？」などの視点もひつようとなってきます。
情報量の多いものになるとかなり色々と考える必要があるので悩んだ時は相談してアドバイスをいただいてもいいかもしれませんね。
レイアウトを決める
カラム数を決める。
情報量により異なりますが、どのように見せたいのかにもよって変わってきますね。
ページを閲覧したユーザーの視点に立って、ワイヤーフレームを作る必要があります。
例えばサイドバーが存在するサイトは、メインコンテンツの横に別の情報が設置されているので、縦に2列あります。
その場合は、2カラムのサイトとなります。
1カラム → シンプル、スタイリッシュな印象にさせる
3カラム → 情報が多いのでバナーやナビで整理して見やすくしたり工夫が必要
ワイヤーフレームを作り込めると完成後に必要な情報が欠けていると慌てたりすることがないので、制作する上で大切な要素となります。
サイトの目的やボリューム、構造によって変わるので他のサイトを見てどんなレイアウトになっているのか分析をするといいと教えていただいまし た。
初心者の私はデザインを見ていると「こういった配置にするんだ」と勉強になります。
大きくフレームを決めておいてから、中の詳細を決めていくとデザインがしやすくコーディングの時もスムーズになります。
私はまだまだ初心者なのでスムーズにすることが出来ないですが、デザインをする上で大切になってきますので、しっかりと作っていきたいと思います。
頑張りましょうね！
本日もありがとございました！