「ワイヤーフレーム」もしくは「ワイヤー」とは、Webサイト制作をするうえで重要な設計図です。
一目でどんな情報がどこにどのように配置されているかがわかるもので、サイト制作でもアプリ開発でも必須となります。
Webサイトの見栄えや仕上がりの良し悪しを決める土台であり、自作する場合も制作会社に委託する場合もとても重要な役割を担う資料と言えるのです。
ここではワイヤーフレームの作成目的と作り方、おすすめの作成ツールを紹介します。
ワイヤーフレームとは?意味を簡単に解説
ワイヤーフレームとは、Webサイト制作における設計図です。
どのような情報をどこに配置にするか、簡略化してわかりやすくまとめたベース資料と言えます。
ワイヤーフレームの役割は、スタート時に情報ブロックの配置を決め、おおまかなイメージを固めることです。
Webサイト制作フローの最初に登場する資料であり、自作するにしろ委託するにしろ、大切な指針であることを覚えておきましょう。
ワイヤーフレームと混同しやすいキーワード
ワイヤーフレームと混同しやすいものに、ディレクトリマップとデザインカップ、サイトマップとがあります。
それぞれ見ていきましょう。
ディレクトリマップ
Webサイト全体の情報配置を一覧にまとめたものです。
ワイヤーフレームはページごとのレイアウト図ですが、ディレクトリマップはサイト全体の構造図です。
ツリー形式で階層ごとにURLを書き出すスタイルが一般的で、階層構造を理解するのに非常に役立ちます。
デザインカップ
クライアントに見せるためのデザイン見本です。
完成したときにどのようになるかイメージを視覚的に伝えるためのものであり、関係者の意思疎通のために作成するワイヤーフレームとは目的が異なります。
サイトマップ
サイトの全体像であり、制作時ではなく運用時に使用するものです。
ユーザー用のHTMLサイトマップと検索エンジン用のXMLサイトマップとがあり、仕様も使われるタイミングも完全にワイヤーフレームとは異なります。
類似サービス： GeNEE (0) クライアント企業が構想するアイデアやサービスに、GeNEEが強みとしているテクノロジーを乗算することで、強固なシステムやスケールをスピード感を持って創造することができます。 システム開発会社やアプリ開発会社は無数に存在します。 しかし、GeNEEには、大手金融機関の大規模システムの設計･開発力に加えて、新規事業をゼロイチで立ち上げ、サービスをスケールさせた経験値･ノウハウ、全国に拠点を持つ大手製造業や教育系企業、IT企業などのクライアントにサービスを提供したビジネス推進力があります。 GeNEEは、クライアントからの要望に応じて、ディレクションを担うビジネス担当、信頼性や保守性の高いシステムを開発するテック・エンジニア、ユーザーを惹きつけるUI/UXデザインを考案する知識豊富なデザイナー、SEO対策、ASO対策、Web広告やSNS広告などの幅広い知見を兼ね備えたマーケター、業界業種特有の専門的な知見を持つDX/ITコンサルタントがプロジェクトに入り、チームを組成します。 GeNEEではPHP、Java、C言語各種、Perl、Swift、Android-Javaの他、Ruby(Ruby on Rails)、Scala、Python、Go、Kotlin、Object-Cなどといったプログラミング言語にも幅広く対応しており、クライアントとのミーティングを通して、開発案件やサービス案件の性質を的確に見極めて、最適な技術選定を行っています。 類似サービス： クリエイティブパートナー (0) Webサイトや動画などのクリエイティブの制作を手がけていますが、いわゆる「制作会社」という枠にとらわれず、クライアント企業の経営課題や商品・サービス課題の解消を全力でサポートするパートナーと言える存在で、これまでに業界・規模に関わらず、多くの企業との取引実績があります。 まずはクライアント企業への丁寧なヒアリングによって課題をキャッチアップします。 例えば、「動画を制作して欲しい」という依頼であれば、「なぜ動画を作りたいと思ったのか」「どのような層をターゲットとしているのか」「動画の制作によってどんな効果を期待しているのか」といった深層部分までを深掘りしてくれるため、より具体的な課題の発見につながります。 rayoutでは、これまでに1,500件以上の制作実績、300社以上の取引実績があり、その経験から得たケーススタディによって、最適な企画提案を実現することができます。 クライアント側も、具体的な事例を持って提案してもらえるため、クリエイティブのイメージを持ちやすくなります。 企業が抱える課題に対して、動画やグラフィック、Webサイト構築といった手法の中から何が最適かを選択して課題解消を実現します。おすすめの類似ホームページ制作ツール
月額費用 要お見積もり 最低契約期間 要問い合わせ 初期費用 要問い合わせ 無料お試し 要問い合わせ ビジネス推進力に強み
プロフェッショナルが集結するプロジェクト体制
圧倒的な開発速度を実現
月額費用 要問い合わせ 最低契約期間 要問い合わせ 初期費用 要問い合わせ 無料お試し 要問い合わせ 課題のキャッチアップ
ケーススタディによる提案
クリエイティブによる課題解決
Web制作におけるワイヤーフレーム作成の目的
ワイヤーフレームの一番の目的は、Web制作を効率的に進めることです。
複数人員が関係する場合は意思疎通のため必須となり、1人で制作する場合にも方向性を見失わないためには必要となります。
個別作業を進めていると全体像を見失い、おおもとの道から逸れていくことにもなり得ます。
そんなときにもワイヤーフレームがあればすぐにベースに立ち戻ることができるため、無駄な修正が起こりにくくなるのがメリットです。
情報設計
ワイヤーフレームを作成する最大の目的が、Web制作でもっとも重要となる「情報設計」です。
ワイヤーフレームで漠然とレイアウトを決めることで必要な情報が明確になり、情報整理ができるのが大きな目的です。
意思疎通
Web制作は複数人数が手分けして行うことも多く、ゴールからブレないものに仕上げるためにワイヤーフレームは欠かせません。
ワイヤーフレームには、作業者の意思をまとめる道しるべとして設置する目的もあります。
アイディアの練り込み
ワイヤーフレームという形でアウトプットすると、アイディアを客観的に俯瞰することができるようになります。
それをたたき台としてさらに良いアイディア出しにつなげることも可能であり、企画目的でいくつかワイヤーフレームを作成する手法もあります。
クライアントに提示するようなシチュエーションでは、ワイヤーフレームを社内でたたき、より良い提案をまとめることが有効です。
ワイヤーフレームの基本的な作り方|作成の手順を解説
それではワイヤーフレームの基本的な作り方を解説します。
特に決まった方法があるわけではありませんが、アイディアを効率的にまとめる方法を紹介します。
ステップ1:サイトマップ作成
サイトマップを作成しましょう。
まずサイトの全体像が決まらないと、その中のどのページのフレームワークなのかがわかりにくくなります。
どれくらいのボリュームになるか、必要なページが何ページあるかをまとめてください。
ステップ2:ワイヤーフレーム化するページ決定
大前提としては、すべてのページのワイヤーフレームを作成するのが理想ですが、同じ構成のページが複数ある場合すべて作成していくのは効率的ではありません。
TOPやそれに準ずる重要ページをピックアップし、ワイヤーフレーム化するのが一般的です。
ステップ3:ワイヤーフレーム作成
ワイヤーフレームを作成します。
いくつかの要素に分けてコンテンツを設計し、どこに何を置くかを決めていきましょう。
TOPであれば一番上にヘッダー、一番下にフッターを配置し、上から順にメインビュー、各コンテンツエリアを配置するのが一般的です。
コンテンツは見せたいコンテンツから順に並べ、わかりやすく配置するのがコツです。
ワイヤーフレームを作る際に便利なおすすめツール5選
ワイヤーフレームは、作成作業自体はさほど難しいものではありません。
ノートに手書きでも可能ですし、エクセルやパワーポイント、イラストレーターなどさまざまなツールで作成することができます。
ここでは使いやすいワイヤーフレーム作成ツールを5つ紹介します。
Cacoo
ワイヤーフレームはもちろん、フローチャートやプレゼン資料なども作れるオンライン作図ツールです。
チームで共同作業をする際にも使いやすい機能が揃っており、リアルタイムで図を編集、共有できます。
ビデオ通話やチャットでブレインストーミングや会議、プレゼンテーションなどができるので、メンバーがどこにいてもスムーズに作業を進められます。
テンプレートが豊富なのも魅力です。
画像·出典:Cacoo公式サイト
Moqups
操作が簡単でドラッグドロップで扱うことができるうえ、スマートフォンでも同様の作業が可能です。
図形や各パーツが揃っているので簡単にサイトイメージを形成し、完成したイメージはPDFやPNGなどでダウンロードできます。
サイト内はすべて英語表記となるので注意が必要です。
画像·出典:Moqups公式サイト
Prott
Prott はコードなどがわからなくてもプロトタイプが作れるサービスです。
こちらのサービスでは用意されたパーツを組み合わせるだけでワイヤーフレームを作ることができます。
直感的な操作だけで作成が可能なので、どなたでもできるでしょう。
画像·出典:Prott公式サイト
Google スライド
プレゼン資料作成ツールとしてよく知られるGoogle Slideですが、ワイヤーフレーム作成にも便利なツールです。
魅力はスライド機能でプレゼンしやすいことで、社内会議やクライアントへの提案時にそのまま見せることもできます。
画像·出典:Google スライド公式サイト
Justinmind
イラストレーターで作成したデータをコピーアンドペーストすると、そのまま編集することができます。
ワイヤーフレームにはイベント要素を追加したり編集したりすることが可能です。
簡単な操作でマウスオンアニメーションやスワイプ、リンクアニメーションなどもできるため、モックアップ機能もあります。
画像·出典:Justinmind公式サイト
ワイヤーフレーム作成時の注意点とは?
ワイヤーフレーム作成で失敗する最多例が「作り込みすぎ」です。
結論からすれば、デザイン要素をワイヤーフレームに入れる必要はまったくありません。
目的は情報設計ですので、どんな情報をどこにどれだけ配置するかに重点を置いてください。
ワイヤーフレームは線と文字で構成すべきであり、そうした意味ではスタートが手書きであるのは正解です。
また、スマートフォン版はPC版とは別に作ってください。
画面比率も異なり横幅も狭いため、フレームワークはまったく違うものを一から作成するつもりで行いましょう。
そして競合サイトはどんどん分析し、良い点はどんどん吸収して活かしてください。
適切な手順でワイヤーフレームを作成しよう
ワイヤーフレームはWebサイト制作のスタート時に必須のものであり、サイトの設計図とも言えるものです。
どこにどのような情報を掲載するか土台を決めるものですので、もっとも重要とされる情報設計が目的であることを忘れないようにしてください。
失敗する要因は作り込みすぎることですので、ワイヤーフレームはテキストと線で構成するようにしましょう。
最初は手書きする人が多いですが、まずはアイディアを見える化し、必要な情報をまとめることに徹してください。
