SUNABACOおんらいん1st16日目(ワイヤーフレーム) 1 HNZTKC 2020年5月25日 22:59 ワイヤーフレームとは「webページのレイアウトを決める設計図」実際のデザインやコーディングなどの作業に入る前段階で作成し、完成イメージを「見える化」することが目的で作られるhttps://t.co/ri7PMY73Zc— HNZTKC🦁おんらいん1st (@hnzgraph) May 25, 2020 ワイヤーフレームはコミュニケーションツールサイト作成前に具体的なイメージをすり合わせることで、クライアントとの齟齬をなくすhttps://t.co/Gy69SJrmRhhttps://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 ワイヤーにどこまで書くか実装するにあたりどの情報が「重要な情報」なのか、どの情報(内容)が欲しいのかデザイナーとエンジニア目線でも考えてワイヤーを書く早速自分に当てはまるダメ出しw超印象に残る!ラッキー!#SUNABACO #おんらいん1st— 🌒oyakataan🌒おんらいん1st (@oyakataan) May 25, 2020 ワイヤーフレーム=骨組みデザイナー=肉付け少しずつ上手くなれるよう練習せんば!#おんらいん1st— ぽんでん (@animal1218) May 25, 2020 ダウンロード copy #SUNABACO #おんらいん1st 1