ワイヤーフレームと混同されやすい言葉に「モックアップ」「プロトタイプ」があります。それぞれ意味が異なるので違いを確認しておきましょう。
ウェブサイトの「骨組み」を表した設計図のようなものです。レイアウトやボタンの位置、テキストの配置などを簡単な図や線で示します。
色や装飾的なデザイン要素は含めず、ページ構造や情報の流れを確認するために使います。見た目はシンプルですが、サイトの基本的な構成を決めるうえで欠かせない重要な工程です。
ウェブサイトの「見た目」に特化して作成されるデザインイメージです。実際に使用する色やフォント、画像などを反映させて、公開時のデザインをほぼそのまま再現したものです。リンクやボタンなどは動作せず、あくまで画面のビジュアルや雰囲気を確認する目的で作られます。一般的に「デザインカンプ」とも呼ばれます。
実際の利用シーンを想定して動作を確認できる試作品です。デザインやレイアウトだけでなく、リンクやボタンなどの機能も組み込まれているため、ユーザーがどのような操作感を得るかを検証できます。公開前にデザインや機能がどのように動くかを確認し、問題点を見つけて改善するために活用します。
ワイヤーフレームは構造、モックアップは見た目、プロトタイプは機能性にフォーカスしているのが特徴です。
ワイヤーフレームを作成する際は、以下の3点を押さえておきましょう。
競合サイトや参考サイトをしっかり分析する
作り込みすぎない
スマホ版とPC版を分けて作成する
ワイヤーフレームはツールを利用して作成すると、効率よく・分かりやすく作成できます。
ここでは、ワイヤーフレーム作成におすすめのツールを紹介します。
画像加工やイラスト作成などで利用されるPhotoshopは、ワイヤーフレームの作成も可能です。
Photoshopはテキストをデータとして残すことができ、さらに他のAdobeソフトとの共有も簡単なので、Web制作でAdobe製品をメインに使っている人におすすめです。
ただし、Adobeソフトを利用するための料金は必要になります。
特別なツールを使わなくても、エクセルでも十分ワイヤーフレームの作成ができます。
普段からエクセルを利用していたり、ツールにコストをかけたくない、関係者が少ないといった場合は、エクセルでも十分でしょう。
ただし、共有先の環境やエクセルのバージョンによってはレイアウトが崩れやすいので注意が必要です。
プレゼンツールとして代表的なパワーポイントも、ワイヤーフレームの作成ができます。
パワーポイントにはプレゼン用のデザインプレートやオブジェクトがエクセルよりも豊富にあるため、そのまま活用して作成することが可能です。
しかし、パワーポイントはスライドの幅などが限定されるため、本格的に作りたい場合は別のツールをおすすめします。
Web上でデザインできるツールであるFigma（フィグマ）は、ワイヤーフレーム作成の機能をほとんど有しているので簡単にワイヤーフレームの作成が可能です。
Web上で作成するため時間や場所を選ばず制作できるだけでなく、複数のメンバーで確認・編集がしやすい点もメリットです。
リモートワークや複数のメンバーで共有しながら作成するならおすすめです。
また、登録すれば無料で利用できるのも嬉しいポイントと言えるでしょう。
Adobe社が提供するワイヤーフレーム制作のためのツールです。ワイヤーフレーム作成ツールとしては知名度が高く代表的なツールともいえるでしょう。
デバイスごとのテンプレートが用意されていて、操作性もシンプルで使いやすいという特徴があり、操作が苦手な人でもクオリティの高いワイヤーフレームを作成できます。また、Adobe XDをインストールしていない人でもワイヤーフレームの確認ができるので、情報共有もしやすいでしょう。
ただし、Photoshop同様、 Adobeソフトを利用するための料金は必要になります。
チームでワイヤーフレームを作成・共有するのにおすすめなのが、Cacco（カクー）です。複数メンバーでも編集可能でチャット機能もついているので、話し合いながらワイヤーフレームの作成ができます。編集権限の付与や個別管理等にも対応しているので、チームや外部のクライアントとも安全に情報を共有できるという特徴もあります。
無料期間は設けられていますが、無料期間を超えて使用する場合は料金が発生するので注意しましょう。
ワイヤーフレームの作成に特化したツールであるWireframe.cc。Web上で利用でき登録も不要です。
操作性にも優れており初心者でも簡単にワイヤーフレームが作成できるので、シンプルなワイヤーフレームを作る際に適しています。
ただし、細かい図形作成などは難しく、無料期間終了後は料金が必要です。