SUNABACOおんらいん1st16日目（ワイヤーフレーム）

2020年5月25日 22:59

ワイヤーフレームとは
「webページのレイアウトを決める設計図」
実際のデザインやコーディングなどの作業に入る前段階で作成し、完成イメージを「見える化」することが目的で作られるhttps://t.co/ri7PMY73Zc
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ワイヤーフレームはコミュニケーションツール
サイト作成前に具体的なイメージをすり合わせることで、クライアントとの齟齬をなくすhttps://t.co/Gy69SJrmRh https://t.co/MPklrtkiv0
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

クライアントとディレクタ間だけでなく、デザイナやエンジニアとのコミュニケーションにも使う
ワイヤフレームはデザイン、コードの設計図（骨組み）にもなる、
超重要、スーパー大事
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

1.掲載する情報を整理
配置する情報を「ピックアップ＞グルーピング＞ランキング」の順で整理していく
2.レイアウトを決める
3. 紙とペンで下書きする
4. 実際に書き出す
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ペーパープロトタイピング
アプリやソフトウェア、Webサイトなどの開発を始める前に、どのように動作するのか？どんな機能があるのか？などのシミュレーションができる試作品をプロトタイプという。ペーパープロトタイピングは実寸大で、紙とペンで書いていく。https://t.co/HXwj52FYpk
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

フレームワーク演習
実際にSUNABACOのサイトトップページをワイヤーフレームまで分解する↓https://t.co/NVOaUBNeK9 pic.twitter.com/u5tbDK4FsU
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ワイヤーフレームをコミュニケーションツールとして使えるようにするには、「伝える」を意識する
・余白を上手く使う
・比率を守る
・注釈を描く
（※ほかの人が読める字で書く）
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ワイヤーフレーム演習2

注釈の使い方重要
ワイヤーフレームを見る人はだれか？
→クライアント、ディレクタ、デザイナ、エンジニア
この人たちに対して過不足無く情報を伝えるために注釈を書く
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

・長さ意識しすぎて時間がかかった
→長さはデザイナにとって余計な情報

・エンジニアに必要な情報が抜けている
→スライドショーになる、カテゴリ・日付を表示する、ホバーで情報が切り替わるなど pic.twitter.com/gDIxoZYpt9
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ワイヤーフレーム演習3
背景動画に混乱
→「検証機能で背景動画オフにする」という講師のアドバイス
→！！！背景動画が消えて見やすくなりました

一つ賢くなりました
でも現段階で書けるワイヤーフレームはこんなもんですた

ほかの受講生めっちゃ見やすく書いてたので参考にします pic.twitter.com/Y6OWE7u2Jp
— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020

ワイヤーフレームなるほど！！絶対必要なやつじゃん
ホームページを作る上での設計図でありコミュニケーションツール。イメージのすり合わせに必要。#sunabaco #おんらいん1st
— ポールダンサー魅や@おんらいん1st (@poledancermiya) May 25, 2020

ワイヤーにどこまで書くか
実装するにあたり
どの情報が「重要な情報」なのか、どの情報（内容）が欲しいのか

デザイナーとエンジニア目線でも考えてワイヤーを書く

早速自分に当てはまるダメ出しｗ
超印象に残る！ラッキー！#SUNABACO #おんらいん1st
— 🌒oyakataan🌒おんらいん1st (@oyakataan) May 25, 2020

ワイヤーフレーム=骨組み
デザイナー=肉付け

少しずつ上手くなれるよう練習せんば！#おんらいん1st
— ぽんでん (@animal1218) May 25, 2020