このページの本文へ

DESIGN グッドパッチのUIデザイナーに聞く Sketch 3の使い方 ― 最終回

グッドパッチがSketch 3で作ったUIデザイン事例4選

2015年12月07日 11時00分更新

三橋正典/グッドパッチ

  • この記事をはてなブックマークに追加
本文印刷

グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第3回までは、Sketchの基礎的な操作方法と実務で役立つTipsを解説してきました。最終回では、Sketchを使ってグッドパッチがデザインしたモバイルアプリやWebサイトの事例を紹介します。

モバイルアプリ事例

グッドパッチの社内では、モバイルアプリのUIデザインでSketchが特に活躍しています。モバイルアプリの事例を3つ挙げながら、それぞれのデザイン時に便利だったSketchの機能についても解説します。

TALKIE

不動産情報サービスのアットホームが配布している「TALKIE(トーキー)新築・分譲マンション」は、スマートフォンで新築・分譲マンションの情報収集や比較検討ができるアプリです。

01.png
物件情報ページ

このアプリのUIは、ユーザーと不動産会社が、手軽に、頻繁にコミュニケーションできるように設計しました。例えば、ファーストインプレッションとなる会員登録のハードルを下げるため、プロフィール入力画面を対話形式のUIにしています。アプリの特徴である、ユーザーと不動産会社のスタッフがアプリ上でトークしながら物件購入に至るプロセスを意識し、スムーズなトークの始まりを後押しするUIに仕上げました。

02.png
会員登録が終了すると表示される「対話型プロフィール登録」

プロフィール入力やトーク画面のUIを制作する際には、「Content-generator-sketch-plugin」プラグインを使いました。アイコンやテキストをダミーに変更できるプラグインで、デザインの初期段階でも完成画面をイメージしやすく、便利です。

03.png
Content Generator for Sketch

careertrek

ビズリーチが運営する「careertrek」は、自分に適した仕事を人工知能が選んでくれる転職サービスです。

グッドパッチが開発に関わったiOSアプリは、ターゲットユーザーである20代の転職に対するハードルを下げるため、PC/Web版とは一味違う機能を搭載し、日常生活の中でより気軽に使ってもらえることを目指しました

04.png
careertrekトップページ

日々継続して使ってもらうことでレコメンドの精度も上がるため、毎日気軽に使える・触っていて楽しいUI・インタラクションを心がけています。もっとも特徴的なのは、毎朝通知される10社の転職先候補企業を、ユーザーがYES/NOと振り分ける機能です。ターゲットユーザーの利用シーンとゴールを考慮し、片手で操作できること・直感的に操作できるUIにしました。また、求人情報は文字情報ばかりで量も多いので、見やすく整理して表示することを意識しています。

05.png
careertrek iOSアプリのUI

このUIに限らず、ページ数が多いアプリの場合、Sketchのシンボル機能・スタイル機能が役立ちます。1つのシンボルとスタイルを管理するページを作っておくと、後から「タブバー」や「ナビゲーションバー」、細かいアイコンを整理するときに楽になります。

06.png
シンボル、スタイルをツールバーから呼び出せる

また、Blur(ぼかし)を効果的に使うと、スマートフォンの狭い画面の中でも視認性を保ちつつ、印象的な画面を作れます。Sketchには、「Gaussian Blur」「Motion Blur」「Zoom Blur」「Background Blur」と4つのBlurがあり、用途に合わせて使い分けられます。詳しくはドキュメントを参考にしてください。

07.png
SketchのBlur解説ページ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング