Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ツボを押さえたWFの作り方
Search
ls_pr
March 31, 2021
0
59
ツボを押さえたWFの作り方
ls_pr
March 31, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
130
自作PCのすすめ
ls_pr
0
70
Linuxのちょこっと調べ
ls_pr
0
50
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
160
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
48
ejsのすすめ
ls_pr
0
87
JSにおける正規表現
ls_pr
0
62
Vue.jsの機能を使って色々作ってみた
ls_pr
0
290
NuxtではじめるVue.js
ls_pr
0
220
Featured
See All Featured
Designing with Data
zakiwarfel
95
4.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
77
42k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Cult of Friendly URLs
andyhume
74
5.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Designing for humans not robots
tammielis
248
25k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Building an army of robots
kneath
300
41k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
ツボを押さえたWFの作り⽅を ざっくりと解説する ロジカルスタジオ かわち
⽬次 WFとは WFの作成⼿順 ‧参考サイトの洗い出し ‧サイトマップの作成 ‧情報設計 ‧清書
WFとは WF(ワイヤーフレーム)とは、制作物の要件をまとめた指⽰書。 デザインの元となる構成が書かれた設計図のようなもの。 例)実際のWFをご紹介する
WFの作成⼿順 ⼤きく分けて4つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書
WFの作成⼿順 ⼤きく分けて4つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書
参考サイトの洗い出し01 探し⽅のコツ ‧同業種 ‧同ジャンル コーポレート / 採⽤ / LP など
‧⽬的が似ている 例)切り⼝ ‧ターゲットが似ている ‧共通する要素は何か ‧オリジナル要素は何か 例)視点 ‧•••• 似た特徴をもつサイトを参考にする!
参考サイトの洗い出し02 よく使うギャラリーサイト3選 ‧Parts(これだけでもブックマークしてください!) https://partsdesign.net/ ‧SANKOU! https://sankoudesign.com/ ‧MUUUUU.ORG https://muuuuu.org/
WFの作成⼿順 ⼤きく分けて4つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書
サイトマップの作成 トップページ ‧会社を知る ‧⼈を知る 例)採⽤サイトの場合 ‧働く環境を知る ‧募集要項 代表挨拶/データで⾒る〇〇/会社概要 など 社員紹介/クロストーク
など
WFの作成⼿順 ⼤きく分けて4つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書
情報設計 サイトマップの構成を頭に⼊れつつ、各ページの情報設計に着⼿。 良いWF / 良くないWF ‧ページ内容が理解できる ‧モノトーンで配⾊されている ‧ダミーテキストさえ有効活⽤ 例)良いWF ‧単なる図形、⾒出しの羅列
‧⽬⽴つ⾊が使⽤されている(⾚とか) 例)良くないWF ‧単調なダミーテキストの使⽤
WFの作成⼿順 ⼤きく分けて4つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書
清書01 各々が使⽤しているツールで、イメージを具体化させる。 ‧⼿書き ‧Adobe XD ‧Microsoft PowerPoint 例)ツール⼀覧 ‧Keynote(Mac純正)
清書02 Adobe XDのススメ ‧動作が軽い、直感的でわかりやすい ‧コンポーネント機能で、修正を⼀括反映できる ‧便利で、イケてるテンプレートが豊富 例)おすすめポイント ‧共有リンクを発⾏し、WEB上で確認できる 無料版では共有機能などに⼀部制限はあるが、 WF作成⽤途では問題なく使⽤可能。
おわり