フラゾアではウェブサイトを制作する際、ページのコンテンツを設計するためにワイヤーフレームを作成します。この記事ではなぜワイヤーフレームが必要か？をご説明します。
ワイヤーフレームとは
ワイヤーフレームはホームページ制作時にコンテンツや要素、レイアウトを定めるための設計図にあたるものとなります。骨子案や図面的な役割を持つといえば分かりやすいですね。ホームページはグラフィックデザインと違い階層分けされた立体的なプロダクトになるため、デザインに取りかかる前にどこに何を配置するか決める必要があります。
また、ホームページにはユーザーエクスペリエンス（ユーザー体験）の概念もあるため、いきなりデザインに取りかかるより、事前にお問い合わせボタンをどこに置くか？や動的なコンテンツはどう見せるか？など計画していくことが重要になります。
ヴィジュアルだけでなくサイトの機能も含め全体をしっかりとデザインするために、ワイヤーフレーム作成の工程を重要視しています。
ワイヤーフレームで行うこと
こちらは弊社ホームページのワイヤーフレームの一部です。グレースケールでどこに何を配置するかを示したものになります。ワイヤーフレームはあくまでレイアウトや要素を示したものでデザインカンプではありません。これまでの制作会社は初稿でデザインカンプを提出されていたかと思いますが、弊社ではプランニングの段階ではこの様にワイヤーフレームだけで進めていきます。この事により、デザイナーはデザインを作成することに集中できるので最終的な仕上がりの精度が高くなります。
ワイヤーフレーム提出時には「何だ？デザインがシンプル過ぎないか？」などと心配されてしまうかもしれませんが、ご了承頂けると幸いです。
プランニングの段階をワイヤーフレームで進めていると様々なメリットがあります。まずデザインを実装していないので、「やっぱりもう1コンテンツ追加したい」「キャッチコピーを差し替えたい」「ページ分けた方が良いかな？」などの要望を簡単にかなえることができます。制作時にもPDCAサイクルを回せることがメリットの一つです。
ワイヤーフレームを作成するツールについて
ワイヤーフレームを作成するツールは様々なものがありますが、弊社ではおもにAdobe XDを使用します。PDFの書き出しを行えるため、クライアント様にはPDFでご確認頂いています。PDFでご提出させていただいているので、修正点などを直接書き込んでいただいています。
また、Adobeのアプリケーションの中では比較的新しいものですので、随時バージョンアップが行われており、デザイン制作も行えるくらいの性能になってきています。現在はデザインカンプはPhotoshopを用いていますが、今後はそのままAdobe XDでデザインまで行っていくことも検討しています。
Adobe XDは非常にシンプルな使い心地なので、非デザイナーでも扱いやすいためチラシなどのグラフィックデザインの構成案作りにも向いています。ウェブサイト以外のクリエイティブでもワイヤーフレームの概念が広がればいいですね。
まとめ
弊社ではランディングページや数ページ規模のプロジェクトでも、しっかりとワイヤーフレームを使って設計しています。より良いホームページを制作する上でもワイヤーフレーム作成の工程を知って頂けると幸いです！