【これからWEB制作を始めたい方必見!】初心者でも簡単にワイヤーフレームが作成できる便利なツール5選

こんにちは、営業部の山田菜々子です。

コスト・スピード・お客様の声を反映させたサイト作りを考えたとき、WEBの内製化は有効な手段ですよね!

WEB制作の内製化のメリットについてはこちらの記事をご参照ください!

企業経営者様必見!意外に見落としがちなWEB制作を内製化するメリット・デメリットとは

2016.11.14

ただ、なんの準備もなしに、急にWEB制作の内製化を進めていくのは決して楽ではありません。

しかし、「そうだ、来月からウチの会社もWEBの内製化しよう!」と社長が勝手に判断して、突然、あなたが来月からWEB担当者に抜擢される日が来るかもしれません。

もし、あなたがいきなりWEB担当者に抜擢されたら、

『えぇー?!いきなりWEBの制作なんて、大変だ-!!いくら時間があっても足りないよ-何からやればいいの~?!』

なんて、ドキドキしながら時間と格闘することになるでしょう。

shutterstock_422489755

本日はそんな無茶振りされた(される可能性がある)WEB担当者様に送る、制作を社内でする時に役に立つツール集をお送りします!

はじめに

shutterstock_165672179

ワイヤーフレームとは、 ウェブページの「レイアウト」のことです。

色や細かい装飾といったデザイン面のことは考えず、 「問い合わせボタン」や「お客様の声」や「サービスの特徴」など、何をどこに配置するのかを決めるものです。

要は、家を建てる時の設計図のようなものと言えばわかりやすいでしょうか。

ワイヤーフレームを作る目的は、全体像を把握し、抜け漏れを防いだり、お客様にどういう順で表現したら理解をしてもらえてお問い合わせしたくなるウェブサイトになるかの大まかなストーリーを示したものです。

このワイヤーフレームの完成度が、最終的なページのお問い合わせの数を左右する最も大きな要因の1つになっているので、しっかりと構想を練って制作する必要があります。

WEB制作でワイヤーフレームを作るときに役立つツール集

1、PowerPoint(パワーポイント)

→ PowerPoint(パワーポイント)のインストールはこちら

shutterstock_429081007

MicrosoftPowerPoint メリット

・使ったことがある方が多く、PCに入ってることが多いので、新たにツールを導入しなくてもいい

・ネット環境がなくても使える

MicrosoftPowerPointデメリット

・実寸と異なり、ページをまたいでしまうので、作成しづらい。

・フレームを自分で作る必要がある。

2、cacoo(カクー)

→ cacoo(カクー)の利用はこちら

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-15-16-58-59

cacoo(カクー)は、200万人のユーザーに選ばれているテンプレート集です。一部無料で使えて、WEB上で共有できます。

テンプレートがあり、ワイヤーを書くことに特化しているアプリですので、初心者にもとても使いやすいです。

操作性もPowerPointに近いのですぐに慣れますよ。

また、PNG形式やpdfでエキスポートも出来るので、オフラインでも共有が可能です。

ただし、デメリットとしては、無料の機能に制限があります。

無料で使ってみて、使いやすかったらアップグレードをおすすめします。

3、Illustrator(イラストレーター)

→ Illustrator(イラストレーター)のインストールはこちら

shutterstock_408988057

プロのWEBデザイナーは、なんといってもAdobeIllustratorでワイヤーから作ってしまいますね。

Illustratorのメリットは、ワイヤーフレームの段階から各デバイス向けのデザインを一覧しながら制作できたり、早い段階でデザインに落とし込むことが出来るので、作業効率を上げるためにはとてもいいツールです。

ただし、初心者にはデメリットがとても大きいです。

まず、高度な作業が必要で、専門知識が必要になります。

また、デスクトップアプリケーションなので、ファイルサーバーに落として添付する作業や、Illustratorを持ってない相手にはPDFに変換して共有する必要があるので、かなり上級者向けです。

とっかかりで使うのはおすすめしません。

4、Mockingbird(モッキングバード)

→ Mockingbird(モッキングバード)の利用はこちら

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-15-17-08-00

個人的な感想ですが、圧倒的に操作し易いです。

「テキストの中央寄せ」ができるのが特徴(他ツールでは右寄せ/左寄せばかりで中央寄せは滅多にありません)

ただ、最大のデメリットが画像のアップロードが出来ないこと・・

ワイヤーフレームにとってどこに何の画像があるかを示すこととても重要なので、オススメ度は低めです。

5、手書きでカリカリ・・

shutterstock_416135350

ペンと紙を用意して、頭のなかにあるものを書き出していけばある程度サイトの構成が見えてきます。

メリットとしては、手を動かし作業することで、アイディアが出やすくなったり、情報の優先度を整理したり、大まかなレイアウトを検討したりします。

ただし、実寸ではなかったり、それぞれの位置を変えたりするのはPCでの作業の方が効率がいいです。

ですので、基本的にはPCで作成することをオススメします!

まとめ

いかがでしたでしょうか?

これまで、たくさんのツールをご紹介しましたが、ここまで紹介したツールはあくまでツールであって、ワイヤーフレームに本当に大切なことは、あくまでのサイトの設計をする中身が大切です!

ですので、あなたが実際に使ってみて一番使いやすいツールを選ぶようにしてくださいね。

納得のいくワイヤーフレームが出来たら、きっとお問合わせの得られるサイト構築までもう少し!

さぁ、気合い入れて次の工程に進みましょう〜!

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です