Webサイトデザインのフィードバックをもっと効率的に!

Webサイト制作を請け負うと、デザインをクライアントに提出後、何らかの修正依頼を受けるというフローはたびたび発生する。修正のやりとりは、デザインをPDFやURL(テストサイト)で送り、メールや電話で指示を受けるというのが一般的だ。ここに問題がある。指示の場所がわからない、指示が抽象的すぎてイメージしにくい。さらには内容確認のためにメールが何往復もした挙げ句……という経験は誰にでもあるだろう。

そんな不毛なやりとりに一石を投じるのが『Notable』だ。Webデザインにおけるフィードバックを的確に、かつ効率よく処理するためのサービスだ。一部機能が日本語に未対応のほかはほとんどの操作が問題なく行なえる。Webデザインを巡るクライアントとの調整をスムーズにするためにもぜひ活用していきたい。

効率的なデザインフィードバックを得るためのWebサービス

料金プランの一覧。無料もある

料金プランについて

Notableは、Webデザインに関するフィードバックに効率よく対応できるようにするWebアプリケーションだ。無料または有料プランを用意、無料では3ユーザ/ 3GBのストレージを利用可能。さらにユーザ数とストレージサイズに応じて24ドル/月～119ドル/月まで4パターンの料金体系が用意されている。初めて利用する場合は無料プランで十分だが、各プランに30日のフリートライアル期間が用意されているので、うまく活用したい。

使い方

Notableではまずデザイン提案に使う画像を用意する。Firefoxアドオンを利用したキャプチャ/ 画像のアップロード/ URL指定、いずれからの方法を用いる。社内制作の場合は画像アップロードが主になるだろう。URL指定機能を簡素化したFirefoxアドオンでは、ボタンひとつで画面をキャプチャできるので、Notableを活用していく上では欠かせないツールになりそうだ。公開されているサイトであればURLを指定して登録することができる。

Firefoxアドオンを使った際。アドレスバーの左横に追加されるボタンを押すとキャプチャが実行される

そして登録したサイトをもとにコメントを追加していく。枠には数字が記載され、そこにコメントを追加する。四角い枠を使って修正を依頼する範囲を決めていく。枠はいくつでも追加可能で、日本語も使えるようになっている。サイト全体ではなく特定の範囲に絞り込みたい場合は、切り抜き機能を使えば一部を切り出せる。サイト全体が広い場合や、特定のブロックに限ってフィードバックを得たい場合に便利だ。

枠を追加してフィードバックを行っているところ

切り抜き機能を実行しているところ。一部についてのみフィードバックを得たい時に便利

便利な機能

コメント以外にも便利な機能が数多くある。たとえば、SEO機能はページを解析してメタデータ(タイトル/ 説明文/ キーワードなど)を抽出する、ページ内の頻出単語をピックアップする(日本語は非対応)といった機能がある。そのほか、コンテンツ内のH1、H2タグで囲まれた文字の表示、外部リンクや画像に付けられたalt要素の一覧化機能などを備えている。もちろんこれらの各要素にもコメントできる。サイトのキーワードについてはフィードバックを受けたり、適切なSEO対策がなされているかを確認ができる。見た目だけでは分からない情報なのでとても役立つだろう。

ソースコードの閲覧機能も利用できる。HTML/ JavaScript/ CSSの各ファイルをソースコードレベルでチェックできるほか、コードの行単位でコメントを添えられるようになっている。一般的なクライアントとのやり取りでは使わないかもしれないが、開発会社とのやり取りでは便利そうだ。

PDFエクスポート機能では、スクリーンショットやコメントをPDFとして出力できる。スクリーンショットは日本語も問題なく表示されるが、コメントは文字化けてしまう。ここは今後の開発に期待したいところだ。

SEO対策に役立つメタ情報一覧。キーワードをクリックするとハイライト表示されたり、コメントが行える

コード画面。ハイライト表示されたソースコードと、行単位でのコメントができる

出力したPDF。一部で文字化けが見られる

フラッシュベースのWebサイトには不向き

キャプチャしたサイトは画像になっているので、リンクなどは機能しない。広告があっても安心して作業ができる。Flashは無効になった状態でアクセスするようになっているため、Flashの代替画像を用意するなどの工夫が必要になる。したがって、当然だがFlashベースのサイトのフィードバックは難しいだろう。日本語の表示についてはUTF-8であれば文字化けせずに利用できる。EUC-JPの場合は文字化けが生じるので注意してほしい。

サイトによっては文字化けしてしまったり、Flashバナーが代替え画像のみになる

複数人からフィードバックを得る共有機能

クライアントからフィードバックを得るには、共有機能が欠かせない。共有作業を開始するには、電子メールによる招待を行なうが、招待ユーザもNotableへの登録が必要になる。レビュアーとなるクライアントは、キャプチャ画面の切り抜きはできず、全体または一部へのコメントが許可されるほか、画像のアップロードが可能になっている。画像の差し替え指示やイメージ図を指定するような使い方ができそうだ。

共有機能。メールアドレスを指定して共有設定ができる

コメント機能。キャプチャ全体に対しても可能

iPhoneアプリを使うシーンは?

NotableではiPhoneアプリ版が無料で配布されている。利用できるのは、カメラで撮影またはキャプチャした画像をアップロードする機能のみ。とはいえば、PC版とは異なる利用法が考えられるだろう。WebサイトのiPhone対応状況を確認する際は、一般に実機やエミュレータを利用するが、デザインフィードバックを得るだけなら本ツールを使うと便利かもしれない。なお、iPhoneアプリからアップロードする際、タイトルに日本語を使うと文字化けが生じる点には注意してほしい。

iPhoneアプリ版。アップロードした写真が一覧で表示される

写真またはスクリーンショットが利用できる。タイトルに日本語を使うと文字化けする

まとめ

何度か強調したように、日本語ついては一部に文字化けが発生してしまうケースがある。とはいえ、PDF出力やエンコーディングに気を付ければ、適切に回避できる問題だ。

デザインは感性に拠るところが大きく、フィードバックを得るとなると、曖昧な修正指示を受け取ることも少なくない。そのため、意図したとおりの指示ができず、結果として予想と異なるデザインに仕上がってしまうケースは十分に考えらる。そうならない対策と言うと、Webサイトを印刷してペンで修正内容を指示する──などというフローになりがちだ。Notableを使えば、そんな煩雑なやり取りはオンライン化される。共有機能を備えているので、個人間だけでなく、複数人で情報を共有できるようになる。Webサイトのデザインフィードバックで苦労した経験のある方はぜひ一度ご覧いただきたい。