Google UXデザイン：モックアップ作りを始める

Last updated at 2023-03-04Posted at 2022-12-02

はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

UXの忠実度（フィデリティ）とは、デザインが最終製品の外観と感触にどれだけ近いかを意味します。

デザインが低忠実度（ローファイ・フィデリティ）である場合、それは複雑さの度合いが低く、洗練されていないことを意味します。UXデザイナーがローファイを使うのは、アイデアを素早く出して、探求の余地を残しておきたいときです。
デザインが高忠実度（ハイフェイ・フィデリティ）である場合、それは最終製品の外観と感触に密接に一致し、全体としてより洗練されていることを意味します。UXデザイナーは、実際の製品のように見えるデザインをテストし、ユーザーからより具体的なフィードバックを得たいときに、ハイファイを使用します。

今回から、ハイファイ・デザインに焦点を当てます。

では、ハイファイの一種であるモックアップに飛び込んでみましょう。モックアップは、最終製品の表現として使用される、静的で忠実度の高いデザインです。

『モックアップは、製品がどのような外観になるかを視覚的に示すもの』

それでは、実際のエントリーレベルのUXデザイナーが作成したモックアップの例をご覧ください。

このモックアップが、これまで作ったワイヤーフレームや低再現性のプロトタイプと比較して、どのように違って見えるかに注目してください。実際の写真、色の使い方、影の使い方、さまざまなフォント、スタイライズされたボタンがあります。

カラーグラデーション、異なるテキストサイズ、アイコン、そして地図まで、モックアップの使い方に注目です。このモックアップを見れば、このプロダクトが実現したらどんなものになるのか、実感できるはずです。

モックアップをデザインするとき、心に留めておくべきことがいくつかあります。

など、デザインの各画面で使いたいビジュアルエレメントを考えておくことです。モックアップには、デザインに登場する実際の単語、画像、アイコンが入っています。

さらに、

など、画面上の要素の配置方法を考慮するようにします。画面上に要素を配置する方法は、デザインを美的に美しくし、ユーザーが製品を操作しやすくし、デザインをよりアクセスしやすくします。

Figma で最初のモックアップを作成する準備はほぼ整いました。まずは、モックアップを作成するための基本的な土台となるスキルをいくつか探ってみましょう。

Log in to Figma.
Create a new File by clicking the + icon in the upper right corner.
On the left, click Page 1. This lists all of the pages currently in your File.
Click the + icon to add a new Page to your File, as shown in the image below.
When you create a new Page, you’ll immediately be able to rename it. Or, you can rename a page at any time by double-clicking the title of the Page.

キャンバスは、フレームを作成する場所です。キャンバスはあなたがデザインする額縁のようなものだと考えてください。

フレームを作成するには。フレームツールを選択します。

Frameのサイズを選ぶには、いくつかの方法があります。

Click inside the Canvas to create a default Frame. The dimensions for default frames are 100x100 pixels.
Click and drag in the Canvas to create a Frame with the dimensions you prefer. When you click and drag, the width and height will automatically update based on how much you drag. If you want to choose a specific width and height, you can do this in the Frame section in the Design panel on the right side of the screen.
Select a predetermined size for a Frame, like a specific phone model or tablet, in the Design panel on the right side of the screen. As shown in the image below, there is a list of different containers or Frames for various devices or formats. Simply select a size to add the Frame to your Canvas.

UXデザイナーとしての仕事では、Figmaやそれに類するデザインツールを使用することになります。Figmaとその機能に慣れれば慣れるほど、どのツールでも独自のデジタルモックアップを素早く作成できるようになります。