19のベストプラクティス〜UIモックアップを高速化〜
UIモックアップの作成は、デザインプロセスにおいて重要なことの一つです。デザイナーは、忠実度の低い基本的なワイヤーフレームに命を吹き込み、忠実度の高いプロトタイピングとユーザーテストに移行する必要があります。
この記事では、ワークフローを改善し、より良いUIモックアップを設計するためのデザインにおけるベストプラクティスを探ります。また、ガイダンスやインスピレーションを得るのに役立つおすすめのツールもご紹介します。
UIモックアップとは？
UIモックアップとは、最終製品の画面を正確に視覚的に表現したものです。UIモックアップは、視覚的な要素のみで、機能はなく、クリックできるものもありません。静的なモックアップなのです。UIデザイナーは、カラー、タイポグラフィー、アセット、実際のコンテンツを用いて、最終的な製品やWebサイトのモックアップを作成します。
UIモックアップのベストプラクティス「19のリスト」
1) アイデアをスケッチする
「素早い」「簡単」「リスクがない」ということを踏まえて、まずはアイデアをスケッチしてみましょう。
ピクセルやグリッドの寸法に飛び込む前に、最初のドラフトを開発し、ページ上でアイデアを整理するためにあなたの考えをスケッチしてください。ブレインストーミングに時間をかけ、さまざまなコンセプトで実験することで、創造力が湧いてくるはずです。紙は安価ですし、自分が最もクリエイティブで心地よいと感じる場所でアイデアをスケッチすることができます。
様々な構図をスケッチし、様々なテンプレートを並べて比較することで、どの方向性が最も魅力的であるかを確認することができます。
2)モバイルスクリーンから始める
モックアップ、ワイヤーフレーム、プロトタイプのいずれをデザインする場合でも、常に最小のスクリーンから始めて、最大のビューポートに拡大するようにします。逆に拡大縮小すると、不要な要素や複雑なレイアウトになり、小さい画面ではうまく表示されず、必ず振り出しに戻ることになります。
モバイルファーストデザインのワークフローを導入することで、最も重要なコンテンツとUI要素を優先させることができます。また、モバイルファーストのデザインは、レスポンシブWebデザインにも不可欠な戦略です。
3) モックアップツールと互換性のあるワイヤーフレーム・プロトタイピングツールを使用する
デザインプロセスの異なる側面に別々のツールを使用されている場合は、互換性があるかをご確認ください。ワイヤーフレーム、プロトタイプ、モックアップを1つのツールで行えるのが理想的です。モックアップからインタラクションデザインに移行し、インタラクティブ機能、アニメーション、ページ遷移を追加して、モックアップを完全に機能するプロトタイプに変換できるようにする必要があります。
UXPinは、コンセプトからデザインのハンドオフまで迅速に行うための機能とツールを備えた、エンドツーエンドのデザインツールです。UXPinの画面左のプロパティパネルにあるフォームボタンを使用して「入力」「ボタン」「チェックボックス」「ラジオ」などから選択し、ワイヤーフレームをすぐに組み立てることができます。
また、iOSやMaterial Design（Android）、Bootstrap、Foundation、User FlowsなどのUXPinの組み込みデザインライブラリを使用し、ワイヤーフレームをスキップしてモックアップに直接移行することも可能です。
各スクリーン（UXPinではページ）を高度なインタラクションで接続し、コーディングされた製品のように見え、機能するプロトタイプを構築します。チームはUXPinのコメントを通じてコミュニケーションをとり、同僚をタグ付けしたり、特定の相手にコメントを割り当てることができます。
ワイヤーフレーム、モックアップ、プロトタイプの作成において、1つのツールを使用することで、デザインを転送する時間を短縮しツールの切り替えによるエラーをなくすことができます。
4）他のビジュアルサクセスをレビューする
学ぶための最良の方法は、「観察すること」です。
リソースを活用して、最新のトレンドや、デザイナーが同じようなコンセプトに対してどのように異なるアプローチをしているのかをチェックしてみてください。
ここでは、デザインのインスピレーションを得るための5つの素晴らしいリソースを紹介します。
5) 不要な要素を取り除く
UIデザインは、より「少ない」ことが重要です。乱雑なユーザーインターフェースはユーザーを圧倒し、認知負荷に深刻な影響を与えてしまい、結果として質の低いユーザーエクスペリエンスをもたらします。
デザイナーは、ユーザーリサーチに基づいて設計し、ユーザーが与えられたタスクを完了するために必要なUI要素、パターン、コンポーネントを追加する必要があります。
Tom Green氏は、『The Guide to Interactive Wireframing』の中で、ユーザーを重視し、何を残し、何を消すかを決定する手順を概説しています。
- ページ上のすべての見込み要素のコンテンツインベントリを作成する。
- 要素に優先順位をつけ、不要なものを削除する。
- 残った要素は、重要性に基づいて視覚的な階層に当てはめる。
- 要素のカテゴリーを基にコンテンツブロックを作成する。
- 優先順位に従ってブロックをレイアウトに追加・削除する。
- インターフェイスオブジェクトに似てくるまで、各反復でデザインを「彫る」。
6) グリッドシステムの導入
整理されたグリッドシステムにより、デザインはアラインメント、ホワイトスペース、コンテンツの階層をピクセル単位で正確に測定することができます。
また、グリッドはさまざまなスクリーンサイズに対応したレイアウトを設計し、一貫性を保ち、エンジニアが最終製品を開発しやすくするためにも有効です。
7) フリーのUI要素やアイコンを活用する
ボタンやアイコン、グラフィックを個別にスタイリングすると、モックアップそのものよりも時間がかかってしまうことがよくあります。UIキットやアイコンセットを活用すれば、モックアップをより速くデザインすることができます。
UXPinにはいくつかのアイコンライブラリと組み込みのデザインシステムがあり、デザイナーはドラッグ＆ドロップでユーザーインターフェイスを構築することができます。外部ファイルのインポートやプラグインのインストールは不要で、UXPinはモックアップのデザインをすぐに始めるために必要なすべてを提供します。
8）ユーザーエクスペリエンスを向上させるUIパターン
UIパターンは、Web/モバイルアプリやWebサイトのデザインに欠かせないものです。これらの試行錯誤されたパターンは、多くのユーザビリティの問題を解決し、ユーザーが新しい製品を素早く習得できるような親しみやすさを生み出します。
デザイナーは、これらのパターンを慎重に適用し、特定のユーザビリティの問題を解決するためにのみ使用する必要があります。不要なUIパターンはスペースを取り、ユーザーインターフェイスを乱雑にし、さらなるユーザビリティの問題を引き起こす可能性があります。
9）ベクターの使用
ベクターグラフィックは、高精細な網膜画面にも2倍、3倍の大きさで適応し、素早く拡大縮小します。デザイナーは、ロゴ、アイコンなどのグラフィックにSVG形式のようなベクターファイルを使用し、複数のデバイスやスクリーンサイズにわたって常に視覚的に魅力的な資産を確保する必要があります。
10) ウェブセーフなタイポグラフィ
モックアップのデザインに取りかかる前に、タイポグラフィがウェブセーフであることを必ず確認してください。可能な限り、Google Fontsの膨大な種類のテスト済みウェブセーフフォントセットから選択するようにしましょう。
カスタムフォントを使用する場合は、ウェブセーフであることを確認し、CDNを使用して配信を最適化する方法について開発者と話し合い、パフォーマンスに影響を与えないようにしましょう。
11) カラーツールで時間短縮
デザイナーがモックアップを作成する際に考慮しなければならない重要な要素に「色」があります。正しい色を選ぶには時間がかかりますが、プロジェクトに適したパレットを見つけるのに役立つツールがたくさんあります。
ここでは、カラーパレットを選ぶのにおすすめの無料ツールを4つご紹介します。
視覚障がい者がコンテンツを閲覧できるように、ウェブコンテンツアクセシビリティガイドラインに沿った色使いをしましょう。UXPinに組み込まれたコントラストチェッカーと色覚異常シミュレーターにより、デザイナーはデザインツールから離れることなくユーザーインターフェイスを評価することができます。
12）再利用可能なコンポーネントを作成する
再利用可能なコンポーネントは、時間の大幅な節約につながり、一貫性を維持するのに役立ちます。たとえば、複数の画面で同じCTAボタンを使いたい場合があります。このような場合、CTA用のコンポーネントを作成し、必要な場所にコピー＆ペーストすることができます。
UXPinのComponentには、2つの側面があります。
- マスターコンポーネント: コンポーネントのプロパティを定義します。
- インスタンスは、そのマスターからコンテンツをミラーリングする1つのレイヤーです。
マスターに加えた変更は、すべてのインスタンスにコピーされるため、手動でプロパティを変更したりコピー/ペーストする時間を短縮できます。
13) オートレイアウトを利用する
もう一つの時間短縮のためのワークフローは、自動レイアウトです。ほとんどのデザインツールにはオートレイアウト機能があり、コンテンツをグループ化して、自動的にデザインをリサイズ、フィット、充填することができます。
UXPinのオートレイアウトはFlexboxの原則に基づいて動作し、開発者がデザインハンドオフ時に仕様とレイアウトをよりよく理解できるようにします。
https://t.co/RwTWfQ3SfM 🚀 Move a couple of elements at once, adjust their size and placement. It's easy. Try Auto Layout.#autolayout #productdesign #designsystem pic.twitter.com/kj0wevAjM4
— UXPin (@uxpin) December 10, 2021
14) ファイルとレイヤーの適切なネーミング
特にレイヤーファイルを個別に保存している場合は、レイヤーやファイルがすぐにごちゃごちゃになってしまいます。
一人で作業する場合でも、チームで作業する場合でも、ファイルやレイヤーを整理するための命名規則やシステムを開発しましょう。一貫した構造に従うことで、オンボーディング、引継ぎ、デザインの引き継ぎが効率化されます。
プロダクトデザイナーのBotond Palkóによる命名規則に関する記事をご覧ください。
15）バージョン管理
共有のデザインシステムで作業する場合、バージョン管理は非常に重要です。誰かがデザインシステムを更新したことをどうやって知ることができるでしょうか？また、自分が最新のバージョンを使っているかどうか、他の人はどのように確認するのでしょうか。
バージョン管理によって、あなたが使用しているデザインシステムのバージョンを確認し、必要に応じて以前のバージョンに戻すことができます。
UXPin Merge のバージョン管理システムにより、プロジェクトごとにライブラリのバージョンを柔軟に管理することができます。追加した異なるバージョンを自由かつ簡単に切り替えることができます。
16) ファイルや資産にアクセスできるようにする
現代のデザインチームは、遠隔にいるメンバーと一緒に仕事をするため、ファイル、アセット、調査資料などを誰もがアクセスできるようにする必要があります。DropboxやGoogle Driveなどのクラウドストレージを利用するのがベストですが、上記のように適切な命名規則に従ってください。
UXPinでは、デザインツール内にアセットやドキュメントを保存できるため、エンジニアがハンドオフの際に簡単に見つけることができます。また、エンジニアはスペックモードを使用して、プロパティの検査、距離の測定、プロジェクトのスタイルガイドを表示することができます。UXPinは、すべてを1つの場所に保管することで、デザイナーが特定のファイルをアップロードし忘れるというミスのリスクを減らすことができます。
17) 実機でのプレビュー
ライブプレビューは、開発後のデザインが複数のデバイスでどのように見えるかを垣間見ることができます。
UXPinのプレビューと共有機能では、UXPin Mirrorを使ってブラウザやモバイルデバイスでデザインを確認することができます。また、ブラウザのウィンドウを操作して、特定の解像度に達したときにデザインがどのように動作するかを確認できる、オートセットプレビュー機能も利用できます。
18) テスト、テスト、そしてまたテスト
UXデザインは、テストし、必要な変更を加え、再びテストすることです。ユーザビリティの問題を明らかにし、解決して、最終製品に残らないようにするための反復プロセスなのです。
静的なモックアップのテストでは、プロトタイプほど意味のある結果は得られませんが、デザイナーはレイアウトに関するフィードバックを得たり、参加者にリンクやボタンをクリックした場合に何が起こるかを尋ねたりすることができます。また、モックアップは、視覚障害のあるユーザーに対してアクセシビリティのテストを行い、アクセシビリティの判断が正しいかどうかを確認するのにも最適です。
19）正しいフィードバックを引き出す
フィードバックは残酷なものですが、UXデザインにはとても重要です。ユーザビリティテストとは別に、デザイナーはステークホルダーや他のチームメンバーにデザインを提示し、フィードバックを得るべきです。新鮮な目や視点は、今まで見えなかったことや考えられなかったことを明らかにしてくれるでしょう。
優れたモックアップの作成を開始
モックアップを作成する際に最も重要なことは、デザインコンテストに勝つためではなく、人間の問題を解決するために作成するということです。また、色、タイポグラフィー、アイコン、アセット、その他のコンテンツを追加する際には「一貫性」と「まとまり」を考慮することが重要な要素となります。
そしてさらに重要なのは、適切なツールを使用することです。UXPinは、ワイヤーフレームからモックアップ、プロトタイピング、そして最終的なハンドオフまで、デザイナーがエンドツーエンドで使用できるデザインソリューションです。デザイナーは、アセット、ドキュメント、組織のデザインシステムをすべて1つの場所で管理することもできます。
14日間の無料トライアルに登録して、UXPinの革新的なコードベースのデザインツールをご体験ください。
