Schoo受講ログ：Webデザインの骨組み「ワイヤーフレーム」設計

Webサービスやメディアを担当したり、サイト制作のディレクションを行う立場でありながら、Webデザイン設計をロジカルに行う能力が低いなと感じていました。
ありがたいことに会社でSchooを福利厚生として利用でき、Schooにはデザインカテゴリのコンテンツも多いので受講したものをログとして残していこうと思います！
（自分のための覚書のような記事となります。ご容赦ください。）

総括：
Webデザインの流れは家の建築と同じ。設計図が正確でないと、家（Webサイト）は崩れてしまう。

ワイヤーフレームとは？：
もともとは3Dデザインの用語だが、現在はWebサイト用語として扱われることが多い
ワイヤーフレーム設計＝家の設計と同じ！

■Webデザインの流れ
1）ヒアリングシートをもとにヒアリングを行う
2）構成を考える
・手書きのラフ→ワイヤーフレームに起こす
・現場がこれを見て開発できるよう、原寸のピクセルで正しいサイズで作る
・960グリッドベースで書くと、タブレットやスマホ用にリキッドにする時％に変換しやすい！
3）ワイヤーフレームに画像を埋め込みカンプを作成
4）ワイヤーフレーム通りにコーディングする
　　カンプを見ながら使用する画像やメディアを用意する
5）リリース（本サーバーUP）
・ランニングフェーズに移行
・意図通りの成果を上げているか、解析していく

■フルードグリッドとは
・レスポンシブルデザインのサイトを作るとき、サイズを％に変換するときのガイドになる
・960は約数が一番多いので扱い易い

960 Grid System
http://960.gs/

■同一業種のサイトを見倒す
・なぜそれが上位にあるのか？
・上位表示ページの共通点は？
①正しいhtmlの文書構造になっている
②SEO対策（正しいキーワード設計）
③重要なサイトからのリンクが多い
④アクセスシビリティ＝操作性が良い
⑤ユーザビリティ＝親切設計
⑥イメージがターゲットやサイトの目的に合致
⑦導線＝目的への誘導が上手い
⑧モバイルファーストを意識

【演習】女性向けファッションサイトのワイヤーフレームを作ってみる

①レスポンシブルデザイン
②ページのTOPに左右幅いっぱいのビルボード
③1ページのリニア構造（ページ内遷移）
④ショップ（リアル店舗）への集客が目的
⑤通販はやらないのでカートは不要
⑥ターゲットユーザーは18歳〜30歳の女性

■MEMO
・ディスプレイは16:9or16:10なので、ビルボードのサイズを合わせる
・経済産業省のサイトにアクセスシビリティをチェックできるツールがある

・

続きます！