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
99
ツボを押さえたWFの作り方
ls_pr
March 31, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
180
自作PCのすすめ
ls_pr
0
110
Linuxのちょこっと調べ
ls_pr
0
98
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
210
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
89
ejsのすすめ
ls_pr
0
130
JSにおける正規表現
ls_pr
0
100
Vue.jsの機能を使って色々作ってみた
ls_pr
0
380
NuxtではじめるVue.js
ls_pr
0
260
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Cult of Friendly URLs
andyhume
78
6.3k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
A Philosophy of Restraint
colly
203
16k
A designer walks into a library…
pauljervisheath
205
24k
How to train your dragon (web standard)
notwaldorf
91
5.9k
GraphQLとの向き合い方2022年版
quramy
45
14k
Agile that works and the tools we love
rasmusluckow
328
21k
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作成⽤途では問題なく使⽤可能。
おわり