ワイヤーフレーム

必要な理由

• 要件を整理してクライアントの要望を可視化するため。
• 完成イメージの共有のため。
• クライアントの合意形成のため。

ワイヤーフレームの型

大まかに5つの型がある。

1. 1カラム型

• スマホ
• 視線の流れがスムーズ

2. 2カラム型

• 並列に情報を並べたい時。

3.マルチカラム型

• いろんな情報を横に並べたい場合

4.タイル型

• 商品一覧など一覧性が重視されるようなサイト

5.サイドバー固定型

• 常に固定しておきたい場合
• PCのブログサイトに多い。

制作の流れ

ワイヤーフレームの構成決定

クライアントと相談しながら決めていく。

• どんな情報を入れたいか。
• どんな順番で入れたいか。
• 配置はどうするか。

競合、類似サービスのリサーチ

これも参考にしつつ作っていく。

Figmaおすすめテンプレート

Wireframe

• いろんな型のワイヤーフレームがある。
• スマホ版もある。

Website Wireframes UI Kit

• 完成されたワイヤーフレームをある程度作ってくれる。
• パーツの種類も豊富（ヘッダー、サイドバーなど）

Hand Wireframe

• ラフのようなワイヤーフレームを作りたい時に便利

ワイヤーを作るときのポイント

ワイヤーにはデザイン要素は入れない。

デザインにアイディアが引っ張られてしまったりするのを避けるため。