Google UXデザイン：Figmaでデジタルワイヤーフレームを作成する

# はじめに

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

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

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1ed400d1-bbdf-302d-70be-3175620c3912.png" width="800">

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/23aeb5b5-78f1-56fe-c0de-d306cd462f80.jpeg" width="500">

</details>

# Figmaの魅力

これから、Figmaという革新的なUI/UXデザインツールの使い方を学びます。

- コラボレーション機能のおかげで、物理的に同じ部屋にいなくても、ワークショップを続けられるようになりました。
- デザイン・コミュニティで広く使われているので、デザイン・コミュニティが提供する多くのプラグインがあり、デザイン・プロセスを加速させるのに役立っています。
- デザイナーがワイヤーフレームやプロトタイプを作成できることから、オールインワンツールとみなされています。

それでは、早速Figmaを触ってみましょう。予めアカウントを作成しておいてください。

# ペーパーワイヤフレームの写真をアップロード

まずは、作成したペーパーワイヤフレームを写真に撮り、Figmaにアップロードします（メニューから、"File" → "Place Image"）。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1bde408b-2332-e322-e5cb-eb2b0119cdcf.png" width="５５0">

# フレームの作成

ツールバーで、このハッシュタグのようなアイコン（フレーム・アイコン）をクリックします。

次に、使用するプラットフォームを選択します。どのような種類のプラットフォームでもワイヤーフレームを作成することができます。今回はAndroidを選びます。長方形が見えることで、携帯電話の画面がよりイメージしやすくなります。

ホーム画面のスケッチをAndroidのフレームの横に移動して、参照しやすくしています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/4392fa00-a5f5-f325-4677-9f237896d815.png" width="400">

# 画面上部のバーを作成

これで、画面上部のバーを作成する準備が整いました。そのためには、別の長方形を作成する必要があります。

ツールバーのシェイプメニューを開くと、さまざまなシェイプがあるので、そこから選びます。この長方形を選択し、上部の枠内に長方形を描けば、バーが完成します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/be73128f-b995-da57-d074-41204808aabd.png" width="400">

次に、ナビゲーションアイコンを作成する必要があります。これは通常、3本の水平線です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/7918e15a-794a-e924-4575-a41e36a67901.png" width="400">

:::note info
真っ直ぐな線を引くためには、Shiftキーを使う。また丸い円のときにも利用できる。
:::

アプリの上部にバーを配置し、ロゴを配置します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/51291fea-0c79-240f-1ddd-3a4e412824c8.png" width="400">

最後に、プロフィールアイコンを配置します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/8e2de7f5-1d3f-016d-dc9e-16ef0b8abb42.png" width="400">

# 画像カルーセルを作成

次に作成するのは、ページの上部にある画像カルーセルです。カルーセルは、アプリの回転機能を共有するためのものです。

カルーセルを表現するために、大きな長方形を作成します。紙のワイヤーフレームと同じように 長方形にXを描きます。Xの色は薄いグレーを選び、背景に溶け込ませるようにします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/a48bc41b-6535-ae3e-8554-a73b821950d5.png" width="400">

コンテンツが変化することを示すために、複数のページがあることを示すものを作る必要があります。これをページネーション・インジケーターと呼びます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/518791b8-1da0-67e0-e4aa-e6ff46bf5a91.png" width="400">

コピーテキストを書きましょう。

ワイヤーフレームではあまりテキストを使用しませんが、ところどころにコピーテキストを使用するのは良いアイデアです。Lorem ipsumのようなプレースホルダーテキストを使うだけでは、このカルーセルの目的がはっきりしないでしょう。

- ここではコピーテキストに、"犬のしつけの最新情報 "と書いてみます。
- デザインメニューで文字の大きさを調整します。ここでは、24ポイントのフォントにします。
- カルーセルのテキストを中央揃えます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/63c75fa5-e8dd-3395-8004-1e5916efa533.png" width="400">

スケジュールボタンを追加します。スケジュールは行動喚起、つまりユーザーに最もクリックしてもらいたいボタンなので、大きく目立つようにします。大きな四角を描き、真ん中にScheduleと書きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/69bfe32d-8911-e7f6-a3d1-36d2b2aac5c2.png" width="400">

# 完成形

このように進めていきます。最後にこんな感じになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/06f0b700-7811-9a6b-4d24-a67b021c467c.png" width="400">