wireframe-sketches
HOW TO2017.5.19 (Fri)

仕事を終わらせて早帰り! Webディレクションがはかどるツール4選

0229shimada.png

  • 島田恵一 | Keiichi Shimada
  • 株式会社シグナル Webディレクター

こんにちは。Webディレクターの島田です。
突然ですが、みなさん「働き方改革」してますか? Web制作の現場は長時間労働になりがちですが、できれば早く仕事を終わらせて帰りたいのが本音じゃないでしょうか。

かく言う僕も長時間労働をしがちなタイプです。しかし、最近ではツールを使って作業を効率化することで、これまでよりも1~2時間早く仕事を終わらせることができるようになりました。そこで、シグナルで実際に導入してWebディレクションがはかどったツールをみなさんにもご紹介したいと思います。

Webディレクションにおすすめしたいツール4選

(1)ワイヤーフレーム作成には「Cacoo」

cacoo

・Cacoo https://cacoo.com/

ワイヤーフレーム作成におすすめなのが、図の作成ツールCacoo(カク―)です。テンプレートやワイヤーフレームに使えるパーツがあらかじめ用意されており、図形の描画も簡単にできるのでササッとワイヤーフレームを作ることができます。これだけでもPowerPointでワイヤーフレームを作るよりかなり楽になるのですが、Cacooの良いところは作成した図がクラウド上で一元管理できるところにあります。

ディレクションする上では、大量のワイヤーフレームを作らなければならないことが多々ありますが、Cacooなら場所を選ばずにチームで分担作業することができます。そもそもが共同作業を想定したツールなので更新の差分や履歴が残せるようになっており、「誰がどこをいじったのかわからない!」なんてこともありません。

作成した図は、画像やPDFとして出力できます。また、過去に作成したワイヤーフレームをコピーして、新たな図を作成するのも楽々です。このCacooのおかげで、僕の場合はPowerPointに比べ、20%くらいは工数が減らせました。

(2)プロトタイプ作成には「Prott」

prott

・Prott  https://prottapp.com/

最近では、要件によってサイトのプロトタイプを作成することがもはや常識! でしょう。ある程度の規模の開発になると、やはりプロトタイプがあったほうがクライアントとのイメージのすり合わせがスムーズです。ページ同士のつながりや操作性を検証する精度も確実に上がりますから、手戻りを減らすことにもつながります。

シグナルでプロトタイプ作成に使用しているのは、Prott(プロット)です。こちらもクラウドのサービスで、ワイヤーフレームやデザインといった画像をProttにアップロードすると、画像上でドラック&クリックするだけでリンクや動作の設定ができ、実際のWebサイトに近い動きを表現できます。チームでの共有も可能で、作業履歴の記録やコメント共有機能もあります。

実際にプロトタイプを動かしてみると、サイトマップや構成上では見つけられなかったページ間のリンクもれが見つかることもありますし、UIやデザインの確認はプロトタイプがあったほうが断然楽だと感じます。たとえばコーポレートサイトの場合、確認には1日かかっていたのですが、Prottを使うようになってから2時間程度にまで減らせました。クライアントに見せる際もProttで共有すれば、PDFなどに比べて確認作業の負担が減る分、進行がスムーズになります。

(3)ダミー画像を自動生成「Placehold」

dummy_image

・Placehold https://placehold.jp/

ワイヤーフレームを作ったとき、デザイナーを困らせるのが、ページに画像が入りきらないというケース。「だいたい4つくらいの画像を横に並べたい」などとざっくり考えてしまうとデザインの段階でつまづくことになります。

視覚的に確認するにはダミー画像を使ってワイヤーフレーム上に実際に並べてみるのが一番ですが、このダミー画像を簡単に作れるのが、Placehold(プレースホールド)です。使い方は簡単で、「幅(width)」と「高さ(height)」をピクセル単位で入力して、「画像を生成する」ボタンをポチッと押すだけ。シンプルな機能ながら、手作業で画像を作るよりもずっと早くできるので助かります。

(4)ダミーテキストを指定文字数で「ダミーテキストジェネレーター」

dummy_text

・ダミーテキストジェネレーター
 https://webtools.dounokouno.com/dummytext/

こちらも、ちょっと助かるツールです。ワイヤーフレーム上で文字量を検討する際、「この文章はダミーです」などの文言を入れますよね。そんなときダミーテキストジェネレーターを使えば、文言を指定文字数で自動生成してくれるんです。

使い方は、文章パターンと文字数を指定し、「生成」ボタンを押すだけ。「この文章はダミーです」以外にも、「坊ちゃん」や「徒然草」、英字の「lorem ipsum」もあります。

早帰りはちょっとした省力化から

こうしたツールを使いだしてから、作業がはかどるようになっただけでなくミスが減り、関係者との連携もスムーズになったことを実感しています。細かい作業も多いディレクターの仕事。ちりも積もれば山となると言いますが、ちょっとした省力化の積み重ねが早帰りにつながったりもします。日々の作業に追われて忙しいディレクターのみなさん、ぜひ試してみてはいかがでしょうか。

構成:福田さや香