こんにちは。Webデザイナーのtamaです。
私たちALL CONNECTデザイン部では、無駄な作業時間を発生させずにデザイン品質を向上させるために「Marvel（プロトタイピングツール）」を活用しています。
今までの「ワイヤー・カンプとサイトマップ」でプロジェクトを進めていくやり方だと、実装したあとに画面遷移などの動作が上手くいかずにデザインしなおしたりと余計な時間がかかっていました。
また、デザインの方向性のすり合わせもエクセルでまとめたり口頭で伝えたりしていたので認識ズレが起きていました。
しかし、「Marvel」を導入したことにより効率的にデザイン作業ができる環境になったので、今回は「Marvel」を導入しどのように社内で活用しているかをご紹介したいと思います。
■目次
1. 導入する前に起きていた問題
2.「Marvel」の導入と主な機能
3. 社内で「Marvel」をどう活用しているか？
4. まとめ
1.導入する前に起きていた問題
問題①：仕様の認識ズレ
コーダー・プログラマに仕様を伝えるとき、画面遷移などの動作を確認しながら説明できなかったので認識ズレが起きやすかった。
問題②：実装後に動作の問題に気付く
実装してみたら画面遷移などの動作が成り立たないことに気づき、デザインしなおす無駄な時間が発生していた。
問題③：非効率なデザイン修正依頼
デザインチェックの時の修正指示は、画像をエクセルに貼り付け修正内容をまとめていた。
2.「Marvel」の導入と主な機能
コーディングやプロミングなしでプロトタイプが作成できるツール｢Marvel｣ですが、ウェブページやアプリの画面をデザインの段階で画面遷移などの動作をつけ操作ができ、不具合や設計上の間違いがないか洗い出していくことができます。
プロトタイピングツールは他にも数多くありますが、私たちALL CONNECTデザイン部では｢Marvel｣を導入いたしました。
｢Marvel｣の基本的な機能は下記のとおりです。
・コメント機能
・貼り付け用コード発行・共有機能
・リンク・アンカーリンク設定
・時間経過で自動的にページ遷移
・ライトボックスの作成
・固定ヘッダー・フッターの設定
・複数ページに共通の項目を設定
ちなみに導入にあたって気をつけたことは、
操作に迷わないように基本的な機能の設定方法をまとめたドキュメントを作成したことと、各プロトタイプがバラバラにならないようにプロジェクトやチームごとにフォルダを分けて管理するようにしました。
3.社内で「Marvel」をどう活用しているか？
活用①：プロトタイプ機能
静止画の状態でデザインの実機確認を行っていたので、実装してみて画面遷移などの動作の不具合を発見したり、必要なページが作成されていないことに気づく時がありました。
そうならないために画面遷移などの動作を事前に確認するために「Marvel」を活用しています。
活用②：仕様共有のための プロトタイプ機能
コーダー・プログラマに仕様共有をきちんと伝えられずに認識がズレてしまい、余計な修正時間が発生したことがありました。
仕様共有の際に動作確認ができた方が認識のズレもおきずに、細かく説明をする時間も短縮されるので、仕様共有の際にも「Marvel」を活用しています。
活用③：コメント / 共有機能
今までは依頼主・クライアントにデザインを確認してもらうためにデータが格納されているフォルダを共有していましたが、認識ズレがない状態で確認してもらうためにそのやりとりも「Marvel」を活用しています。
4.まとめ
いかがだったでしょうか？
私たちALL CONNECTデザイン部では、デザイン / コーダー・プログラマ / 依頼主・クライアント間で認識ズレを起こさず、関わるスタッフと共通の認識でイメージを具体化しデザイン品質を向上させるために「Marvel」を活用しています。
私自身も実際に実機・動作確認を行ってみないと動作の不具合や設計上の間違いに気づかなかったりするので、デザインの段階で実装のイメージを固めることが重要だと思っています。
