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
120
ツボを押さえたWFの作り方
ls_pr
March 31, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
200
自作PCのすすめ
ls_pr
0
130
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
230
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
120
ejsのすすめ
ls_pr
0
150
JSにおける正規表現
ls_pr
0
130
Vue.jsの機能を使って色々作ってみた
ls_pr
0
410
NuxtではじめるVue.js
ls_pr
0
280
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Being A Developer After 40
akosma
90
590k
Done Done
chrislema
185
16k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Music & Morning Musume
bryan
46
6.8k
Facilitating Awesome Meetings
lara
55
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
BBQ
matthewcrist
89
9.8k
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作成⽤途では問題なく使⽤可能。
おわり