【前編】Figma,Sketchを活用して現場で実践できる ─アプリUIデザインハンズオン─

楽天イーグルスや藤崎百貨店と仙台を盛り上げるプロジェクト進行中

オープニングはTECH PLAY運営事務局から、今回のイベントのスケジュールや注意事項について説明がありました。

続いて、主催の仙台市産業振興課・荒木田理さんから、「SENDAI X-TECH Innovation Project」について、昨年度からの取り組みについて紹介されました。

仙台ならではの農業・漁業だけではなく、この「SENDAI X-TECH Innovation Project」の一環として、楽天イーグルスとのアイデアソンから生まれたプロジェクトや、藤崎百貨店の買い物体験をアップデートするプロジェクトが、エンジニアからの提案で進んでいることなどが語られました。

今回のハンズオン講師・メンターの皆さん！

今回の「アプリUIデザインハンズオン」は、『はじめてのUIデザイン（PEAKS）』を執筆した著者でもあるUIデザインのスペシャリストの方々が講師を務めました。
※『はじめてのUIデザイン 改訂版』は、5月5日発売予定です。

宇野 雄さん
クックパッド株式会社 VP of Design／デザイン戦略本部長。制作会社やソーシャルゲーム会社勤務の後ヤフー株式会社へ入社。Yahoo!ニュースやYahoo!検索などのデザイン責任者／デザイン部長を務める。2019年よりクックパッドにてVP of Deisignとデザイン戦略本部長を兼任。著書に『フラットデザインで考える 新しい UI デザインのセオリー』(技術評論社)など。

吉竹 遼さん
フェンリル株式会社にてスマートフォンアプリの企画・UIデザインに従事後、STANDARDへ参画。UIデザインを中心に、新規事業の立ち上げ・既存事業の改善なと゛を支援。2018年に よりデザインとして独立後、THE GUILDにパートナーとして参画。著書に『UIデザイナーのための Sketch入門 & 実践ガイド』(ビー・エヌ・エヌ新社)など。

池田 拓司さん
多摩美術大学卒業。ニフティ株式会社、株式会社はてな、クックパッド株式会社ではユーザーファースト推進部長・執行役を経て、現在はデザインアンドライフ株式会社 代表取締役 / 株式会社ロコガイド 取締役。ウェブ・アプリなどサービスの設計、ユーザーを向いたデザイナーやサービス開発の組織づくりなどを手掛ける。『WEB+DB PRESS（技術評論社）』で「縁の下のUIデザイン」を連載中。近著に『はじめてのUIデザイン（PEAKS）』

藤井 謙士朗さん
クックパッド株式会社に2017年新卒入社。Komerco事業部にてブランディングやサービスの体験、UIなどデザイン全般を担当している。コードが書けるデザイナーとしてiOSやWeb(React)の実装に入り、デザインとエンジニアリングのつなぎこみを得意とする。某イカの塗り合いゲームの王冠持ち。

なぜ、今UIデザインを学ぶべきなのか

まずメイン講師を務めた宇野さんは、今回のゴールについて以下の3つを挙げ、デザインツールの使い方やグラフィックデザインなどのノウハウではなく、できるだけ実践的に手を動かしてUIデザインを学んでほしいと伝えます。

• UIデザインってどんなことかを知る
• スマートフォンアプリのUIデザインをやってみる
• UIデザインって楽しいと思える

続いて、各グループごとに「UIデザインの経験」「今回のハンズオンで学びたいこと」「24時間以内にあった良かったこと/嬉しかったこと」を語り合うアイスブレイクを兼ねた自己紹介が行われました。

自己紹介で場が和んだ後は、今回のハンズオン講師の方々が執筆した『はじめてのUIデザイン』の発案者、吉竹さんから書籍化を考えたきっかけ、なぜ、今UIデザインが大事なのかが語られました。

「3～4年前からWebデザインの専門学校や企業のデザイナー向けに、デザインツールの使い方やUIデザインの考え方などを教えています。ただ、そのUIデザインを学ぶ最初の一冊となる本がまだないんですね。Googleやアップルが出しているガイドラインは勉強になるけど、初級者が最初に読むにはハードルが高い。自分が作るしかないと考え、信頼している人たちに声をかけて書籍化しました」

『はじめてのUIデザイン』はUIデザイン学びたい人全てを対象としており、専門的な内容も多く掲載されているが、「今回はそのエッセンスを濃縮して紹介するので楽しみながら興味を深めてほしい」と、宇野さんからも想いが語られ、UIデザインの講義が始まりました。

宇野さんは「UIデザインとは何か」について、Wikiペディアを引用し、「一般的にUIはコンピューターと人との接点と言われるが、最近ではボイスUI、スマートデバイスなどのUIデザインも含め、人が使うもの全てと、広めに捉えてほしい。インターフェイスは何のためにあるのか、その提供価値を考えることのが重要」と説明。

さらに吉竹さんが、最初にユーザーの目に触れて触れるインターフェイスは、提供価値まで利用者を導く存在でなければならないと、海外旅行でのワンシーンを例に解説します。

「例えば、海外旅行で泊まったホテルのトイレで、ハンドルのデザインはおしゃれだけど、手前に引くのか、回転させるのか迷った経験はありませんか？この蛇口やハンドルというインターフェイスで迷ってしまい、どう水を出して手を洗ったらいいのかがわからない。提供価値にたどり着けない状況を、この図に水、水栓、ハンドル置き換えるとわかりやすいですね。デジタルプロダクトのUIデザインにも同じことが言えると思います」

UIの見える部分を学ぶ

目に見えるUIにフォーカスし、提供価値にたどり着くためには、見える部分で何をやればいいのか──ワークで使う要素をピックアップして解説されました。

●コンポーネント

Appleが提供するiOSのヒューマンインタフェース、Googleが提供するAndroidのマテリアルデザインが二大コンポーネントと言われている。コンポーネントはボタンなどのパーツ、UIのかたまり。英語版しかないが、図が多用されているので、アプリを作る概念の理解に役立つ。実際に作る際には変更や工夫を加えていく。

●ナビゲーションバー、タブバー

ナビゲーションバー・タブバーは画面を操作する際のホーム・戻る・タスクなどの役割を持ち、画面を操作するためのアイコンが表示される領域。新規サービスなどはOS標準に沿って作ることが多いが、最近は時代やハードウェアとともに変化しており、アプリの特性によって位置やアイコンなどの見せ方をカスタマイズすることも増えてきているという。

●ドロワー、ボタン

ドロワーはアプリ画面の三本線で横から出てくるメニュー機能で、ハンバーガーメニューとも呼ばれている。Googleが生み出したが不人気で、最近はあまり使われていない。 ボタンは登録やキャンセルなど、そのページの中で一番大事なことを示すときに使われる。角の丸を落としたものやテキストだけのものがあるが、押せるものはボタンとして定義されている。

●ダイアログ、アクションシート・トースト

ダイアログは、画面上にメッセージが表示される操作画面。画面全体をダイヤログとして使ったり、他の操作をしないように押せないように小さなウィンドウを出す画面を出すパターンがある。この操作をしないと、先が使えないということを示すときなどに使われる。 アクションシートはボタンを押したら、その先の操作を選択させるシート。その先の操作をユーザーに選択させたり、複数の動作を一つのボタンから展開するために使うことが多い。 トーストは下からふわっと出てくるAndroidの機能で、iPhoneやWebでも採用されている。一定時間で消えるものもあれば時間で区切るものもあるし、押すまで消えないものもある。

●ツールチップ

ツールチップは、マウスオーバーしたときに表示される枠内の説明機能。標準機能ではないが、新機能をお知らせするときによく使われ、スマホアプリは最近見かけるようになった。

●リスト

リストは並列的な要素を並べるときに使う機能で、テキストだけで使うこともあれば、画像を合わせたり、左右に動くものなど様々なUIがある。

●テーブル

テーブルは一覧性のあるもの、表で並べたりするもの。小さな画面で使うのは不便なので、スマホで見せるときは工夫が必要。スマホで置き換える場合は、項目の優先度に合わせて仕訳し、いくつかのアクションや情報は次の遷移先で見せたり、カードUIを活用することが多い。テーブルとリストの違いは、テーブルはExcelやスプレットシートのようなもので格子状に操作するが、リストは一方向にコンテンツが並ぶ。

●カード

一枚のカードとして見せるUIで、名刺にように見えるので、カードUIと呼ばれる。情報の仕切り方がはっきりするので便利だが、情報を詰め込むとわかりにくくなるので見せ方の工夫も必要。
その他、テキストを入力する「テキストフィールド」や、選択するときに使う「チェックボックス（複数選択ができる）」「ラジオボタン（単一選択）」なども解説されました。

UIデザインを考えてみる

休憩をはさみ午後のワークに向けて、UIデザインの目的やツールを使う上での考え方やルールなどが語られました。「UIデザインは基本的にはツールを使ってビジュアルを作ることですが、見た目を作ることではなく、それまで決めてきた『情報たち』を上手に落とし込むための答え合わせのこと」だと吉竹さんは定義しています。

UIデザインで実際に使っているツールは、PhotoShopやillustratorで素材を作り、「Sketch」「Figma」「Adobe XD」を活用してコミュニケーションしながら、作っていくことがほとんど。今回はSketch・Figmaを重点的に取り上げ、機能だけではなく、概念的なことやどんな目的で使っているのかについて、重点的に講義が行われました。

●色や文字の情報を同期する（スタイル）

同じ文字情報や色を毎回設定していくと手間になるので、一個変更するだけで全部変更できるように定義しておく機能。塗色や文字情報など、外見の情報を異なる要素間で再利用しやすいように同期できる。

• 同じスタイルを適用
• スタイルの情報を変更
• 変更内容をスタイルに反転すると自動でアップデートされる

●同期・再利用できるコンポーネントを作る（シンボル／コンポーネント）

レイヤーそのものを再利用できる機能で、Sketchがシンボル、Figmaがコンポーネントと呼ばれる。シンボル機能はマスターとなるオリジナルの「シンボル」と、シンボルを利用する「インスタンス」に分けられる。シンボルを編集すると、インスタンスが自動でアップデートされる。

●コンポーネントの中身を個別に変える（オーバーライト）

インスタンス内の文章や画像をカスタマイズできる機能。同じ写真やテキストが並んでいるのを変えたいときに、シンボルから複製されたところから、文章や画像だけをカスタマイズできる。マスターを変更すると変えられる機能で、変更できる範囲を定義することが可能。

「同じものを繰り返すという概念をもってデザインすることがとても大事。同じものを繰り返すデザインで途中から1pxずれたら同じでなくなってしまう。並列の要素として捉えることができなくなってしまうので、デザインを構造化していくためにこうした便利な機能として活用することは大事です」（宇野さん）

●画面同士をつなげて画面遷移を作る（プロトタイプ）

アートボード間に画面遷移を設定することで、実際のアプリの動きに近い流れを作れる機能。トップページと遷移先のページはそれぞれ別々にデザインしていくが、その画面をプロトタイプ機能でつなげると、その画面をタップしたとき次の画面にすっと遷移するアニメーションがを簡単に作ることが可能。手元のスマートフォンでプレビューできる機能もあるので、実際の動きに近いものが再現できる。

●機能拡張する（プラグイン）

各ツールに足りない機能を補ってくれる。自分たちで作ることもできる。アプリのサンプルで写真を集めてくれる便利なプラグイン「Unsplash」が紹介された。

UIの一貫性を意識する

続いて、UIの一貫性を意識するための考え方として、「コンポーネントの一貫性」「スタイルの一貫性」「スペースの一貫性」が紹介されました。

「コンポーネントの一貫性」では、Twitter・Kickstarterを例に、「プライマリボタンやセカンダリボタンが適切に使われている」「複数画面で共通して使われているリストが同じレイアウトで組まれている」をデザインする中で特に重要であるとのこと。

「画面が切り変わっても同じパーツ、情報の内容は変わっても同じインターフェースで提供されていることによって、どのページに遷移しても同じ使い方ができる。同じ法則性をもって、複数のページで同じデザインで提供することが大切です」（宇野さん）

さらに、UIデザインやグラフィックデザインになじみがない人は色を多用しがちですが、色を使うときはあるべき場所にちゃんと役割を立てて使うことを意識することも大切な概念。色を多用する場合は意味を持たせる「スタイルの一貫性」の重要さを宇野さんは強調します。

スペースをどう扱うかでも、プロダクトの雰囲気はガラッと変わります。余白を作ることでグルーピングしている例や、デバイスと手・指の関係を考慮したレイアウト例などが紹介されました。

標準コーポレートは公式リソースを活用する

iOSやAndroidでは、Sketch用にたくさんのパーツを用意している。標準パーツを使う場合は、そうした公式リソースやフリー素材などを使ったほうが、より正確でより早くいいものができる。

「誰が作っても同じデザインになるパターンや、ナビゲーションバーとタブバーをまず置いてみるといったベーシックな段階で、イチから時間をかけて作ることにあまり意味がない。とりあえず置いてみて問題がないかなど、そのテストをいかに早くやるかが大事です」（宇野さん）

宇野さんいわく、「一貫性をプロダクトに持たせるといくつかの視点から見て、利点がある」のだといいます。まず一つは、OSの標準を使えば問題ないだろうという一貫性。共有アイコンやボタンであれば、そのアプリに初めて触るユーザーでも、予測して使ってくれる可能性が高くなる。

もう一つは、エンジニアとの開発のコミュニケーション。「画面によってリストのレイアウトが全部違ってくると、それを全部実装しなければいけないし、そもそもなんで全部違うのという話にもなる。シンボル機能を活用し、同じコンポーネントを複数の画面で配置することによって、不要なコミュニケーションを減らせるので、効率性も上がります」（宇野さん）

また、デバイスサイズの基準値を意識することの重要性についても解説されました。

●基準値を意識する

iPhoneとAndroidでは、タップできる最小エリアの推奨サイズが違うことを覚えておこう。

　　・iOS：44 x 44pt（@1xの場合、44px）＝実世界の7mm
　　・Android：48 x 48dp（mdpiの場合、48px）＝実世界の9mm

「縦エリアのサイズが小さい場合、横の幅を大きくして押しやすさを担保したり、見えない部分で余白をとって実装したりなど、見えない領域をデザインして押しにくさにつながらないように工夫していることが多い。迷ったら44pxにしておくことをお勧めします」

●アートボードのサイズを決める

画面を作る前にツール上でアートボードを作成する必要があるが、すべての解像度を作るのは時間がかかるため、基準サイズを1つ決めて展開する。「要はSketch、Figmaで作る画面のサイズを決めましょうということだが、すべての解像度を作るのは時間がかかるため、基準サイズを1つ決めて展開するのが一般的」と、宇野さん。どのサイズから作り始めるかは人それぞれ流派があるそうです。

池田：すでにリリースしているサービスであれば、一番利用者数が多いサイズを選んでいる。6, 7, 8のディスプレイサイズでのアクセスが多いプロジェクトが大半だったため、375x667で作っているが、どこかでXに切り替えたい。

吉竹：iPhone Xのサイズを標準にしている。それ以下のサイズは脳内変換しながら作っている。

●命名規則・言葉のデザイン・コンテンツの具体性

アートボードやアイコンに名前をつけるときは、あとでわかるようにチーム内のコミュニケーションがしやすい意味のあるネーミングをする必要があります。

「ハートマークの場合は、ハート、お気に入り、Like、スキなどが考えられるが、機能や目的を揃えないと混乱する場合もあるので、機能として作っているのならLike、形として作っているのならハートなど、意味を持たせるように意識してください」

公式のアイコンがある場合は、それを活用すると作業が早くなるという利点もあります。

• Material Icons：Googleが無料で提供している
• SF Symbols：アップルが提供している
• Font Awesome：一般の会社が提供している　大量のアイコンがある

コンテンツの説明やボタン・アイコンなどの言葉の使い方については、マテリアルデザインに「専門用語を使わない」「単位をどう扱うか」「どういった文脈で言葉を伝えるか」などが細かく書いてあるので一読してほしいと宇野さん。

「例えば、『詳しくはこちら』はその先の情報や何があるのかがわからないので、具体的に書いてあげる必要がある（例：物件の情報を見る）。『送信を受けつける』という表現はシステムが受けつけるラベルなので、ユーザー主体の表現で伝えることを意識することが大事。こういうところにこだわることで、UIのレベル感がぐっと上がります」

さらに宇野さんは、デザイン上でコンテンツを具体的にすることも重要だと言います。 「最初のレイアウトで同じ写真を並べて、そのまま作り続けてると、いつまでたっても具体的なイメージができません。実際に利用されるような写真を入れてみるとイメージが変わることもあるし、実際に数字を入れて、何円まで入るか桁数の確認してみることも大事です」

午前中のUIデザインの基礎知識についての座学を終え、TECH PLAY運営が用意したお弁当とお茶でランチタイムに。午後からはいよいよUIトレースのワークに入っていきます。

▶︎イベントレポートの後編はこちら！→【後編】Figma,Sketchを活用して現場で実践できる ─アプリUIデザインハンズオン─

▶︎仙台市主催のイベント
【2019年11月7日(土)～11月8日(日)】KotlinでWebアプリケーションを開発してみようハンズオン
【2019年12月7日(土)～12月8日(日)】SwiftでiPhoneアプリ作り体験！
【2020年1月18日(土)～1月19日(日)】アプリUIデザイン実践ハンズオン
【2020年2月7日(土)～2月8日(日)】デザインシンキング体験講座
【2020年2月29日(土)～3月1日(日)】ビジネスプラン構築ワークショップ