ツボを押さえたWFの作り⽅を ざっくりと解説する ロジカルスタジオ かわち 

⽬次 WFとは WFの作成⼿順 ‧参考サイトの洗い出し ‧サイトマップの作成 ‧情報設計 ‧清書 

WFとは WF（ワイヤーフレーム）とは、制作物の要件をまとめた指⽰書。 デザインの元となる構成が書かれた設計図のようなもの。 例）実際のWFをご紹介する 

WFの作成⼿順 ⼤きく分けて４つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書 

WFの作成⼿順 ⼤きく分けて４つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書 

参考サイトの洗い出し01 探し⽅のコツ ‧同業種 ‧同ジャンル  コーポレート / 採⽤ / LP など ‧⽬的が似ている 例）切り⼝ ‧ターゲットが似ている ‧共通する要素は何か ‧オリジナル要素は何か 例）視点 ‧●●●● 似た特徴をもつサイトを参考にする！ 

参考サイトの洗い出し02 よく使うギャラリーサイト3選 ‧Parts（これだけでもブックマークしてください！） https://partsdesign.net/ ‧SANKOU! https://sankoudesign.com/ ‧MUUUUU.ORG https://muuuuu.org/ 

WFの作成⼿順 ⼤きく分けて４つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書 

サイトマップの作成 トップページ ‧会社を知る ‧⼈を知る 例）採⽤サイトの場合 ‧働く環境を知る ‧募集要項   代表挨拶/データで⾒る〇〇/会社概要 など   社員紹介/クロストーク など 

WFの作成⼿順 ⼤きく分けて４つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書 

情報設計 サイトマップの構成を頭に⼊れつつ、各ページの情報設計に着⼿。 良いWF / 良くないWF ‧ページ内容が理解できる ‧モノトーンで配⾊されている ‧ダミーテキストさえ有効活⽤ 例）良いWF ‧単なる図形、⾒出しの羅列 ‧⽬⽴つ⾊が使⽤されている（⾚とか） 例）良くないWF ‧単調なダミーテキストの使⽤ 

WFの作成⼿順 ⼤きく分けて４つのステップで作成。 1 参考サイトの洗い出し 2 サイトマップの作成 3 情報設計 4 清書 

清書01 各々が使⽤しているツールで、イメージを具体化させる。 ‧⼿書き ‧Adobe XD ‧Microsoft PowerPoint 例）ツール⼀覧 ‧Keynote（Mac純正） 

清書02 Adobe XDのススメ ‧動作が軽い、直感的でわかりやすい ‧コンポーネント機能で、修正を⼀括反映できる ‧便利で、イケてるテンプレートが豊富 例）おすすめポイント ‧共有リンクを発⾏し、WEB上で確認できる 無料版では共有機能などに⼀部制限はあるが、 WF作成⽤途では問題なく使⽤可能。 

おわり