おすすめのワイヤー フレームツールを紹介
チームでWebサイトを制作する上で要求される仕様や機能の整理と、イメージの共有に欠かすことのできないものです。その時使用するものがワイヤー フレームです。ワイヤーフレームとはどういったものなのか、どうして必要なのかを整理しました。Web製作やApp製作にも使用することが多いワイヤーフレームを一緒に理解しましょう。
- Part 1.ワイヤー フレーム と は
- Part 2.ワイヤー フレーム作成しなければいけない理由
- Part 3.ワイヤー フレームを作る際の注意点
- Part 4.ワイヤー フレーム作成のためのツールをいくつ紹介する
Part 1.ワイヤー フレーム と は
ワイヤー フレーム と は、「ワイヤー（線）」と「フレーム（骨組み）」という意味からできた言葉で、Webページのレイアウトをどのようにするか、制作前に定める設計図のことです。
Webサイトの設計やデザイン制作の現場では欠かせない要素です。ワイヤーフレームの重要な役割は、これから制作する、まだ見えないサイトを可視化して、制作に携わるメンバー間でサイトのかたちについて共有する設計図としての役割です。Webサイトのイメージをより明確に、制作チーム間やクライアントとの間で共有することができます。
Part 2.ワイヤー フレーム作成しなければいけない理由
ワイヤーフレームが必要な理由は、制作スタッフとの共有とクライアントとの共有です。
製作メンバとは口頭でやり取りしても、なかなか意図が伝わらないことやイメージが伝わらないことが多い。同じ仕事をしていないのだから当然です。そういったときにデザイナーやマークアップエンジニアといった、制作スタッフと、どういうページを作っていくのかの認識合わせや、テキストをコピペするためのマスター原稿、社内資料としての共有があげられます。
クライアントは、形のあるものを求めます。文章だけでは納得してくれないことが多いです。クライアントとの認識合わせのために利用することもありますが、この段階で内容をすべて承認してもらうため、というよりは、主要ページのデザインと併せて、その他のページの概要や骨組みをお知らせするための、補足資料として利用する機会が多いのではないかと思います。
Part 3.ワイヤー フレームを作る際の注意点
ワイヤーフレームは、あくまで骨組みですので、中途半端に色をつけたり、画像を配置したりする必要は全くありません。変に作り込むと逆に誤解を生むリスクもあります。画像を使うとしたらせいぜいロゴくらいです。見た目の判断はデザインフェーズで行うため、ワイヤーフレーム段階では極力シンプルを旨とするべきです。
- Where: どこに（画面の上下部、左右部などの位置を決める）
- What: なにを置いて（ロゴ、メニュー、コンテンツなどを決める）
- How: どのように動作させるか（リンクや出力などの仕様を決める）
これら3つを決定し、簡単な構成案をクライアントやチームに対して視覚的に示すために作成します。
Part 4.ワイヤー フレーム作成のためのツールをいくつ紹介する
1.Mockitt
Wondershare Mockitt はブラウザ動作のクラウドワイヤーフレームです。Webからスマホまで幅広く使用可能なことと動作環境はWindows、Mac、Linux等もサポートしています。またドラックアンドドロップでデザイン編集ができるので、プログラムを作れない初心者でも便利です。
2.BALSAMIQ
ブラウザ動作するワイヤーフレーム作成ツールです。まず、沢山手書きができます。Webツールとしての機能も備わっているので、Webに移行しようかなと考えている人にとっては、入りやすいです。
出典:BALSAMIQ
3. POP
スマホで手書きのワイヤーフレームの写真を撮って、それらを紐づける事が出来るツールです。手書き派の人にも、より作業を効率化してくれるツールです。
出典:marvel POP
4. mockflow
ブラウザ上で使用できるワイヤーフレームツールです。比較的多機能でUIコンポーネントが充実しています。また、チャット機能が付属している為、チームでリアルタイムの作業をするのにとても便利です。
出典:mockflow
5. justinmind
オーソドックスな形式でワイヤーフレーム制作を手軽にやりたい人向けのツールです。インストールして使用するタイプのツールです。
出典:justinmind
今回紹介したワイヤーフレーム作成ツールは一部ですがいかがでしょうか。いろんなものを試して選ぶのもよいですが、今一緒に開発しているメンバと一番やり取りしやすいものを選ぶことが望まれます。
あとは在宅勤務の方が多くなることが想定されるとブラウザで作業ができることや同時編集ができる機能があることなどが求められると思います。ぜひ自分に合ったツールを見つけてください。
