モバイル端末のUIデザインを検討するプロトタイピングツール「Handmock: Mobile UI Design Prototyping Kit」

テーマ :
Handmock(読み:ハンモック)は、コンセントで開発している、モバイル端末のUIデザインを検討するためのプロトタイピングツールです。

2013年のWorld IA Day 2013では仮称「CHIKUWA」としてスニークプレビューしたものですが、正式名称「Handmock」として2014年のIA Summit(サンディエゴ)にて発表しました。




Handmockはデザイナーの設計ツールとしてはもちろん、非デザイナーとのコミュニケーションを図るためのツールとしても使うことができます。

《キットの中身》

  • ミシン目の入ったロール状になった付箋紙
  • スクリーンサイズの付箋紙
  • よく使われるUIアイコンの入った7種の付箋紙
  • 3Dプリンターで制作したiPhone筐体モック
  • A3サイズの台紙


《Handmockの特徴》

1. クイックで簡単
用意するのはペンだけ。グラフィックデザイン専用ソフトやコーディングなどの知識がない非デザイナーでもUIデザインの議論に参加でき、多様なバックグラウンドのチームメンバー間で迅速な共通理解を得られます。

2. 実サイズ
iOSヒューマンインターフェースガイドラインに準拠したグリッドがあり、またiPhoneモックを使って画面スライドなどの使用感を確かめることができるので実際の利用に近いサイズ感覚が得られます。

3. カット&ペースト
ミシン目の入った付箋紙のため書き込んだUI要素のカット&ペーストが容易。書き損じの修正工程を削減し、クイックにプロトタイプをつくることができます。

《どんなときに使えるか》

  • 抽象度の高いデザインのフェーズ:
    テンプレート設計、コンテンツ/機能/UI要素のエリア定義

  • UIデザインのフェーズ:
    アコーディオンやカルーセル、ドロップダウンといった多様なナビゲーションデザイン

  • 詳細デザインのフェーズ:
    1行にどれぐらいの文字を置くか、アイコンなど画像を使うかといった画面デザイン

《どのように使えるか》

  • ワークショップツールとして
  • デザイナーの設計ツールとして
  • 初期段階のユーザビリティテストツールとして
  • 中間生成物制作ツールとして

《アーリーテスターの声》

2014年のIA Summit限定でアーリーテスターを募りました。
いくつか初期段階のフィードバックをご紹介します。

"The roll of mockup paper with a sticker side on the back is very cool! I really appreciate that the adhesive is re-positionable, so I feel I can stick it someplace without fear that I've permanently pasted it there. (we've already been sticking things to the wall and onto larger sheets of paper) "
「粘着製を持ったロールのモックペーパーはとてもいい!
一度貼ったら貼り直せないという恐怖を感じずに、いつでも貼り直しができると思えるから、再粘着性はとてもいい。(すでに壁に貼ったり大きい台紙に貼ってみたり活用してます。)」
リードUXデザイナー(女性、テキサス)

"Thank you so much for the prototyping kit. It was very impressive presentation and packaging. I've already tweeted some pics, and socialized it to my team. Here is the email I sent them:
'Feel free to sketch up your own design. Use it in a low fidelity usability test. Bring it to a workshop during a sketching ideation session. Brainstorm content prioritization with your clients. It will add to your 'cool factor' for sure.' "
「プロトタイピングキットをありがとう。プレゼンテーションとパッケージングが感動的でした。すでに何枚かの写真をツイートして、チームにも共有しました。チームにはこんな風に伝えました。
“デザインをスケッチするのに自由につかってみてください。忠実度の低いユーザビリティテストに使ってください。スケッチのアイディア出しセッションのフェーズでワークショップに持っていってください。クライアントと一緒にコンテンツの優先順位をつけるブレストにも。Handmockはクールなファクターになるでしょう”」
UXマネージャー(女性、オハイオ)

《どこで手に入るのか》

Handmockは現在はまだプロトタイプです。
現在は販売等していませんが、将来的にご案内できる時にはTwitterやコンセントのFacebookページ等でお知らせする予定です。
現在はA3サイズの台紙のみダウンロードできます。(本記事下)


Handmock | Mobile Design Prototyping Kit


Handmock, pronounced as “hammock”, is a mobile design prototyping toolkit which comes with rolled sticky paper and 3D-printed iPhone mock. With Handmock, all project members even non-designers can take part in the mobile UI design discussion. This prototyping toolkit was introduced at the IA Summit 2014 in San Diego.

[ Items Included ]
- Rolled sticky perforation paper
- Screen size sticky paper
- Small size sticky paper - 7 types
- 3D printed iPhone mock
- A3 size cheat sheet

[ Features ]

QUICK AND EASY
Now everyone can be part of designing mobile UI. All you need is a pen to start things out.

ACTUAL SIZE
Handmock, compatible with iOS UI Guideline, gives actual feeling of holding iPhone in their hands.

CUT & PASTE
Sticky perforation paper makes it easier to add / replace the UI elements.

[ When it works ]

Low Fidelity
Handmock allows to establish templates and designate areas of content, functionalities, and UI elements within the team for building shared understanding to move project forward.

Designing UI
You can quickly create various navigation, accordion, carousel, drop-down and even brand new UI design that you imagine.

Design in Detail
Handmock makes the case that design is in the details - the very small details that make your product friendlier.

[ How it works ]
- Workshop tool for all
- Prototyping tool for designers
- Low fidelity usability test tool
- Mid-term deliverables creation tool

[ How to get ]
Handmock is still a prototype.
It’s not for sale yet, but when it’s ready we will announce that on Twitter and Facebook page.
Only A3 size cheat sheet is available from the download link.

Handmock Poster


Twitter @handmock
ハッシュタグ #handmock
テーマ :

コンセントは、企業と伴走し活動を支えるデザイン会社です。
事業開発やコーポレートコミュニケーション支援、クリエイティブ開発を、戦略から実行まで一貫してお手伝いします。

ページの先頭に戻る