デザイナーが選んだ。私が好きなデザイン 2018年3月号

連載

デザイナーが選んだ。私が好きなデザイン

日本では大勢のデザイナーが活躍していますが、海外で活躍する日本人デザイナーももちろんいます。今回は、日本で活躍するデザイナー3名に加え、ヨーロッパからも1名参加して、興味深いデザインを紹介してくれています。

代島昌幸、Technical Director / Interaction Designer / Programmer、フリーランス（ポートフォリオサイト：daijima.jp）

昨今、特に海外では、Flashでサイトを作っていた時代にはよく見かけた、リッチな体験のできるWebサイトがまた増えてきているように思います。そうしたサイトの1つとして、映像をインタラクティブに見ることのできるサイトを紹介します。

FAFSWAGVOGUE.COMは、ニュージーランドのオークランドで開催されたダンスシーンを紹介している、インタラクティブなドキュメンタリーサイトです。ローディング完了後、長押しクリック操作でイントロ動画が再生され、再び長押しクリック操作で好みのキャラクターと踊るロケーションを選択すると、ユニークなダンスバトルが開始されます。ユーザーは、最後にどちらのダンスが優れているかをジャッジできます。

好きなデザイン：FAFSWAGVOGUE.COM – The Interactive Documentary

まず、このサイトは、個性的で魅力的なキャラクター達の独特すぎるダンスバトルにハマって見入ってしまいます。そして、付随するサウンドやサイト全体の世界観が、さらにこのコンテンツに没入させる一因になっています。加えて、彼らの人となりやバックグラウンドを知ることのできるストーリー映像も興味深い映像になっています。

また、長押しクリックでダンス映像がスローモーションに切り替わる仕組みが用意されていたり、キャラクターやロケーションを選択する画面やLOADINGの動きなど、一つ一つが丁寧に作り込まれており、映像自体のインパクトとは裏腹に、細やかな演出や小さな遊び心が散りばめられた秀逸なWebサイトになっています。

細見沙央梨、デザイナー、ヤフー株式会社（ポートフォリオサイト：Behance）

インターネットサービスにおけるインターフェースは、ユーザーに提供する価値を左右する重要な構成要素の一つです。
私は、Yahoo! JAPANのアプリデザイナーとして、ログデータの分析やユーザーインタビュー、プロトタイプを使った仮説検証を繰り返しながら、ユーザーにとって良いインターフェースとは何かを日々模索しています。
そんな私が参考にしているUIの一例として、Yahoo! JAPANアプリの天気機能をご紹介します。

Yahoo! JAPANアプリを起動して、ホーム画面上部の「天気」のアイコンをタップします。
すると、天気画面が表示されます。以前はアプリ内にYahoo!天気のWebページを表示していましたが、最近一機能として組み込まれ、専用のUIで使いやすいものになりました。読み込み時間の短縮もユーザー体験の向上に貢献しています。

好きなデザイン：Yahoo! JAPANアプリ内の天気機能

人々が天気に関して知りたいと思う情報は、天気、気温、降水確率など多岐にわたり、さらに時間帯や場所などの軸があります。その中から、このアプリでは「今日・明日の天気情報」を視認しやすい画像と共に画面に大きく配置しています。これは、ユーザー調査から得られた多くのユーザーが知りたいと思う情報を反映しています。そして、より詳細な天気情報が知りたいユーザーは、スクロールしたら一週間の天気や花粉情報などを見ることができます。この配置も試行錯誤の結果です。

特に私が気に入っているのは、「今日・明日の天気情報」の背景画像が時間帯や季節によって表現を変更し、ページ訪問者におもてなしの装飾をしているところです。ちょっとした工夫ですが、いつもの天気画面を開いた時に心が温まる「！」な体験をしました。

水や空気のように日常に溶け込むインターフェースをひとつひとつ提供し続けつつ、そしてちょっとした遊び心も忘れずに、たくさんのユーザーの課題をしっかりと解決していけるデザイナーでありたいと、私は日々思っています。

森研治、Technical Director / Designer、myna

デジタル技術により、様々な産業のルールが日々更新されています。昨年、アメリカのサンタバーバラを訪れて地元の本屋を探していたら、Amazonの影響で本屋は殆ど無くなったと教えられました。こうしたルールの変更は、怖く感じられる反面、新しい可能性に満ちています。

Lyric Speakerは、透明なボディに「歌詞」を映し出すスピーカーです。音楽の視聴体験を技術とデザインで変革しようとしているプロダクトで、「歌」と切り離せない歌詞を求めて歌詞カードを眺めていた頃の体験を、デジタル時代にさらに強く響くものとして再現します。細部までシンプルな外観や、モーションデザインへのこだわりが魅力的です。

好きなデザイン：Lyric Speaker

モーションデザインは透過ディスプレイのモノクロームな特性を活かしたものです。大胆な画角のトリミングやカメラワークが画面内に空間を感じさせ、見る人の意識を歌詞の世界に引き込みます。

透過ディスプレイ上に展開される言葉には、詳細な音楽の曲調やリズムやタイミングのデータを元にモーションの質感や緩急が付けられています。サビでは表現を転換するなど、曲にフィットした演出で言葉が視界に飛び込んできます。知っているはずの歌詞が、適度に調整された演出によりメロディーと一体になり、ただ歌詞を読む行為とは違う新たな体験になっています。モーションの制作には一部私も関わっており、表示される歌詞に、有機的なカメラワークなど直線的にならない揺らぎの続く挙動にこだわって動きを付けました。

歌詞は強いメッセージを伴います。その世界観を崩さず、より良い体験へ昇華させるためのディティールの積み重ねが感じられるデザインです。

荒砂智之、UX/UIデザイナー、株式会社ベイジ（ポートフォリオサイト：TomoyukiArasuna.com）

私がご紹介するのは、アメリカStarbucksの事前注文サイトです。本国では専用アプリも提供されていますが、Webサイトもプレビュー版として公開されています。閲覧には無料の会員登録が必要です。

このサービスは事前にモバイルで注文・決済を行うことで、店頭の長い列で待たせることなくドリンクを提供するために考えられたものです。例えば、家を出る際に支払いまで済ませ駅前の店舗でコーヒーを受け取る、という形で利用されます。（開始当初は現場の対応が間に合わず逆に行列ができたという話もあるようですが）

好きなデザイン：Starbucks Coffee Company

デザインはGoogleのマテリアルデザインがベースです。注文するという大目的のために不要な要素は削ぎ落され、モダン且つシンプルにまとまっています。ボタン表示やローディングアニメーションは、ネイティブアプリと遜色無い見栄えと使い勝手と言えます。

マテリアルデザイン採用時の注意点は、まずブランドが持つイメージを適切に伝えた上でマテリアルデザインのグリッドシステムやカラースキームを適用する、という順序を守ることです。その点このサイトはマテリアルデザインを踏襲しつつも、スターバックスらしさをしっかりと感じさせる印象にまとまっており、非常に参考になります。

また、このサイトはレスポンシブに対応していますが、PC版では左側に大胆に大きく見出しとメニューを表示させ、コンテンツエリアは右側に集約しています。日本のサイトではあまり見かけないレイアウトですが、モバイルでの表示の兼ね合いを非常にうまくクリアした画面設計で先進的な印象です。

加えてユーザー登録時の入力フォームにはリアルタイムにエラーを返す機能が実装されています。新規パスワードの設定には、セキュリティを考慮した条件が多数ありますが、それらの条件をクリアするごとに緑のチェックが入り、入力エラーによるユーザーのストレスを軽減しています。

デザインとは別視点ですが、このサイトはPWA（Progressive Web Apps）に対応しているため、対応デバイスでホーム画面に追加すると、通常のモバイルサイトよりも読み込み速度が速くなります。これにより、企業側としてはコンバージョンの増加、直帰率の減少、モバイルセッションの増加を見込めます。

ユーザーが「より快適にドリンクを楽しむ」という体験を向上させるための、デザインと技術どちらの面からも参考になる部分が沢山ある、優れたWebサイトと言えるのではないでしょうか。