webサイトのデザインをする前に必ず作る「ワイヤーフレーム」を知らない方は必見です。
今回の記事ではワイヤーフレームに関する説明と、作成ツールについてご紹介していきます。
webデザインの初心者向けの情報もご紹介するので、ぜひ参考にしてみてください。
目次
ワイヤーフレームとは
ワイヤーフレームとは、webサイトに載せる情報をどのように配置するかを示す設計図のようなもののことです。
いわば、デザインするときの設計図のことです。
ワイヤーフレームを考えるときのポイント
参考にするサイトをいくつか用意する
1つ目のポイントは、「参考にするサイトをいくつか用意すること」です。
webサイトの作成に慣れないうちは、1からデザインするのには時間がかかってしまいます。
このような場合に有効なのが、似た目的や業種のサイトを参考にすることです。
このとき、参考にするサイトのありのままの情報を、自分の中に2次情報として落とし込めると、より効果的です。
また、デザインからワイヤーフレームのみを抜き出して考えてまとめておくと、自分自身の引き出しが増えるのでより効果的です。
競合サイトを参考にする
2つ目は、「競合サイトを参考にすること」です。
サイト全体の構成を考えるときは、競合サイトや類似サイトを確認することも大切です。
中でもサイトマップは、全体の構造を把握するのにとても有効な情報です。
自分の作ろうとしているサイトに抜けている情報がないかの確認もできるため、一石二鳥です。
ここまで他社のサイトを参考にするというポイントを解説してきましたが、まったく同じものにするのはNGです。
あくまで参考にする程度で、できれば要素を抜き出せると良いでしょう。
スマホとPCのワイヤーフレームは分けて考える
3つ目は、「スマホとPCのワイヤーフレームは分けて考えること」です。
スマホとPCで最も大きく異なるのは画面の幅で、それによりワイヤーフレームも左右されます。
PC版のワイヤーフレームを考える際は、レスポンシブかどうかも考慮できるとベターです。
デザインを考えないこと
4つ目は、「デザインを考えないこと」です。
ワイヤーフレームはあくまで設計図で、デザインはその上からかぶせる装飾です。
デザインはデザイナーの仕事であり、そのような細部にこだわっている時間はありません。
その時間は骨組み設計を練るのに充てたほうが生産的です。
あくまで試行錯誤できるシンプルな形で、ワイヤーフレームは考えましょう。
ワイヤーフレーム作成ツールの選び方
ここでは、ワイヤーフレーム作成ツールを選ぶ際の判断基準となるポイントをご紹介します。
共有・共同編集しやすい物を選ぶ
1つ目のポイントは、共有・共同編集しやすい物を選ぶことです。
共有・共同編集がしづらいツールの場合、デザインの修正指示が非常に煩雑になります。
これでは、最も大切な点にリソースを割けません。
共有・共同編集しやすいツールを選ぶことは、より良いデザインのためにも大切です。
導入形態には、インストール型とクラウド型があります。
共同編集が必要な場合はクラウド型が、予算が少ない場合はインストール型がおすすめです。
操作感が自分に合っているものを選ぶ
2つ目は、操作感が自分に合っているものを選ぶことです。
操作に違和感を感じるツールの使用は、ストレスになりデザイン作成に適しません。
自分に合ったものを選ぶのが大切です。
おすすめのワイヤーフレーム作成ツール
Figma
1つ目は「Figma」です。
これはオンライン上で簡単にワイヤーフレームを作成できるツールで、時間や場所を選ばずに使用可能です。
アカウントを取得すればリモートワークも可能です。
ただし、フリープランは二人までしか使用できない点には注意が必要でしょう。
Cacoo
2つ目は、「Cacoo」です。
これは日本シェアナンバー1のプロジェクト管理システムを提供するヌーラボ社のオンライン作図ツールです。
ワイヤーフレームだけでなくフリーチャート、マインドマップ、ネットワーク図、プレゼン資料の作成が可能です。
チームでの作業ができるような機能と、100種類以上のテンプレートがあるため容易に作図ができます。
個人で使えるフリープランもあるので、一度試してみるのも良いかもしれません。
Adobe XD
3つ目は「Adobe XD」です。
これはスマートフォンやタブレットでもワイヤーフレームが作成できるよう、デバイスごとにツールが設定されています。
機能が豊富で、パソコンに疎い方でも使用可能なユーザビリティが特徴です。
基本的な機能は無料なので、一度試してみるのもおすすめです。
Sketch
4つ目は「Sketch」です。
これはBogemian Coding社が提供しているmac用作成ツールです。
直感的に使用できるのが特徴です。
デフォルトのショートカットやテンプレートを使用すれば作業時間を短縮できます。
全ての機能を30日無料で使用できます。
Mockinbird
5つ目は「Mockinbird」です。
これはブラウザ上で編集ができる作成ツールで、必要な要素をドラッグするだけで配置できます。
PDFやPNG形式にも対応しており、データとしての保存が可能です。
アカウント作成をせずに導入できるので、とても気軽に試せます。
moqups
6つ目は「moqups」です。
これは直感的な操作で使用できる作成ツールで、フォントやアイコンなどが豊富に揃っているため細かなレイアウト設計が可能です。
そのため、クオリティの高いデザインをしたい方におすすめのツールです。
Prott
7つ目は「Prott」です。
これは素材をドラッグ・ドロップするだけで簡単に使用できるワイヤーフレーム作成ツールです。
アニメーションや画面遷移といった動きを搭載したものを作成するのも可能で、完成イメージもしやすいです。
全ての機能を30日間無料で試せます。
Wireframe.cc
8つ目は「Wireframe.cc」です。
これはweb上で自由に作成できるツールで、登録せずに利用可能です。
簡単に操作できるため、ストレスなく作業することが可能です。
時間をかけずにワイヤーフレームのレイアウトを考えたい方向けです。
7日間の無料トライアルができるため、それを使用するのも良いでしょう。
marvel
9つ目は「marvel」です。
これは直感的な設計とプロトタイピングツールにより、速やかな設計が可能なツールです。
また、どんなデバイスからでもレイアウト設計が可能なのも魅力です。
さらに無料プランで無制限にプロジェクト作成ができます。
mitekakuについてご紹介します！
mitekakuとは、デザインを実寸サイズで見ることができ、簡単に修正指示を書き込める、デザインに特化したコミュニケーションツールです。
今回紹介してきたワイヤーフレームについて話し合う際ももちろん利用できます。
クラウド型ですが基本機能は無料で使用できますし、インストールが不要なので導入が容易です。使用も直感的に行うことができ、指示媒体が統一されていないことによるストレスもありません。
上記で紹介した作成ツールと合わせて、ぜひご利用ください。
使うときは、以下のような流れで行います。
mitekakuの利用の流れ
1：画像や動画の取り込み
2：書き込み（デザイン修正指示）
3：送信
4：確認
相手が確認した時は開封メールが届くため、確認漏れの心配もありません。
数日確認されなかった場合は自動的にリマインドメールが送られるのも魅力です。
まとめ
今回は、webサイトの設計図であるワイヤーフレームについてご紹介してきました。
ワイヤーフレームを作る際は、作る目的を忘れずに作ることが大切です。
また、今回は作成ツールもご紹介しました。
様々な作成ツールがあるため、ぜひ自分に合ったものを探してみてください。
当社で提供しているmitekakuはデザイン修正指示ツールで、デザインの際に発生するコミュニケーションに特化しています。
導入も運用も非常に容易なツールとなっています。
作成ツールと一緒に、お気軽にご利用くださいね。
