WEBディレクターの仕事のスピードを格段に向上させる、ワイヤーフレームの作り方。

Pocket
[`evernote` not found]

最近、コーディングよりも企画側の仕事が増えてきたように感じます。どんな仕事でも言えますが、考える事に最大限の時間を使って、アウトプットにかける時間はできるだけ最小限かつ、安定したクオリティを求めたいものです。

ワイヤーフレームの作成は色々試行錯誤をしてきました。定番のイラストレーター、パワーポイント、caccoなどのwebアプリ。
イラストレーターは、使いなれていますし、自由に使える反面、UIパーツから自作しなければならないので、手間がかかります。cacooは、そもそも使い慣れていないし…と、塩原的にはどれもしっくりこなかった訳です。

そんな中で見つけたのがUXPin

UXPinは、有料のワイヤーフレーム制作アプリです。予めUIパーツが定義されていて、ドラッグ&ドロップで配置していくだけ。非常に簡単に、ワイヤーフレームを作成することができます。

UXPin

言葉で説明するよりも、実際のデモを見てもらったほうが早いと思うのでこちらをどうぞ。

だいたい13分くらいでトップページと下層ページのワイヤーフレームができてしまいました!
(内容は超適当ですけどね・・・)

一つのプロジェクトで、複数ページのワイヤーフレームを作ることができ、それらのページが一つのサイトして、プレビューできます。
配置したオブジェクトには、クリックイベントが付与できるので、ワイヤーフレーム上で、実際の動きを確認することができます。

サンプル

ブレイクポイントも設定できるので、レスポンシブ案件の場合でも、動くデモとして確認ができます。

塩原的なUXPinの3つの使い方

1.デザイナーさんへのデザイン指示用

従来のワイヤーフレームの使用用途です。原寸大のフレームが動き付きで提供できるので、デザイナーさんもわかりやすいんじゃないかと思っています。
ウェブベースでのデモもできますし、当然PDFなどでも出力できますので、印刷して細かな指示を書いたりも簡単にできます。

2.クライアントとの情報共有用

ドキュメントベースで原稿を提供してもらっても、お客さんは実際にページにどう反映されるか想像しにくいものです。というか、できないと思っていた方がいいですよね。
従来ですと、デザインがFixして、コーディングを経て、原稿を落とし込んだものを確認という流れになるわけですが、そこまで手をかけて「NG」なんてバルス的なことを言われることもあります。(それをさせないのがディレクターの腕なんですが…)

そこで、こういったブラウザベースで簡単につくれるワイヤーフレームがあると、実際の原稿を実際のサイズ感で落としこんで確認してもらえるので、手戻りがあっても、時間的ロスが最小限に押さえられます。
制作側でも、ざっくりコンテンツを配置して、仕上がりをイメージしながら不足コンテンツを考えたりということも容易にできるのは大きなメリットです。

3.流し込み資料として

2の状態で、クライントとの承諾が取れていれば、後は作りこむだけです。
コーディング担当にいちいち紙ベースで指示書をつくらなくても、出来上がったデモ画面を渡せば、後は調整しながら、作りこんでいくだけです。

1つのワイヤーフレームを作り込むことで、サイトの設計、コンテンツの確認、作業指示ができてしまうわけです。

この使い方以外にも、Photoshopのデータを読み込む事ができますので、モックアップを作って、ボタンにリンクをはったり、サイトの動きをざっくり作って、動くデモを簡単に作ったりということもできるようです。

ディレクターさんは、しっかり企画をたてて、お客さんと社内のスタッフを巻き込んでウェブサイトを作っていくことが主な仕事だと思うんですが、それぞれに共通のアウトプットで行えるといのは、効率がいいと思います。
今回紹介したUXpinが最良の選択肢かどうかはわかりませんが、学習コストが低くて、パフォーマンスが高いツールであることは間違いないです。
塩原的に、もう手放せないツールになっています。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。