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
130
ツボを押さえたWFの作り方
ls_pr
March 31, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
210
自作PCのすすめ
ls_pr
0
130
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
240
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
120
ejsのすすめ
ls_pr
0
160
JSにおける正規表現
ls_pr
0
130
Vue.jsの機能を使って色々作ってみた
ls_pr
0
420
NuxtではじめるVue.js
ls_pr
0
280
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
Unsuck your backbone
ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Writing Fast Ruby
sferik
628
62k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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作成⽤途では問題なく使⽤可能。
おわり