MoreResearch連載デザイナーが選んだ。私が好きなデザインデザイナーが選んだ。Cloud日本では大勢のデザイナーが活躍していますが、海外で活躍する日本人デザイナーももちろんいます。今回は、日本で活躍するデザイナー3名に加え、ヨーロッパからも1名参加して、興味深いデザインを紹介してくれています。Programmer、フリーランス(ポートフォリオサイト:daijima.jp)昨今、特に海外では、Flashでサイトを作っていた時代にはよく見かけた、リッチな体験のできるWebサイトがまた増えてきているように思います。したサイトの1つとして、映像をインタラクティブに見ることのできるサイトを紹介します。FAFSWAGVOGUE.COMは、ニュージーランドのオークランドで開催されたダンスシーンを紹介している、インタラクティブなドキュメンタリーサイトです。ローディング完了後、長押しクリック操作でイントロ動画が再生され、再び長押しクリック操作で好みのキャラクターと踊るロケーションを選択すると、ユニークなダンスバトルが開始されます。ユーザーは、最後にどちらのダンスが優れているかをジャッジできます。Documentaryまず、このサイトは、個性的で魅力的なキャラクター達の独特すぎるダンスバトルにハマって見入ってしまいます。付随するサウンドやサイト全体の世界観が、さらにこのコンテンツに没入させる一因になっています。加えて、彼らの人となりやバックグラウンドを知ることのできるストーリー映像も興味深い映像になっています。長押しクリックでダンス映像がスローモーションに切り替わる仕組みが用意されていたり、キャラクターやロケーションを選択する画面やLOADINGの動きなど、一つ一つが丁寧に作り込まれており、映像自体のインパクトとは裏腹に、細やかな演出や小さな遊び心が散りばめられた秀逸なWebサイトになっています。細見沙央梨、デザイナー、ヤフー株式会社(ポートフォリオサイト:Behance)インターネットサービスにおけるインターフェースは、ユーザーに提供する価値を左右する重要な構成要素の一つです。JAPANのアプリデザイナーとして、ログデータの分析やユーザーインタビュー、プロトタイプを使った仮説検証を繰り返しながら、ユーザーにとって良いインターフェースとは何かを日々模索しています。JAPANアプリの天気機能をご紹介します。JAPANアプリを起動して、ホーム画面上部の「天気」のアイコンをタップします。すると、天気画面が表示されます。以前はアプリ内にYahoo!天気のWebページを表示していましたが、最近一機能として組み込まれ、専用のUIで使いやすいものになりました。読み込み時間の短縮もユーザー体験の向上に貢献しています。多岐にわたり、さらに時間帯や場所などの軸があります。その中から、このアプリでは「今日・明日の天気情報」を視認しやすい画像と共に画面に大きく配置しています。これは、ユーザー調査から得られた多くのユーザーが知りたいと思う情報を反映しています。詳細な天気情報が知りたいユーザーは、スクロールしたら一週間の天気や花粉情報などを見ることができます。この配置も試行錯誤の結果です。私が気に入っているのは、「今日・明日の天気情報」の背景画像が時間帯や季節によって表現を変更し、ページ訪問者におもてなしの装飾をしているところです。した工夫ですが、いつもの天気画面を開いた時に心が温まる「!」な体験をしました。水や空気のように日常に溶け込むインターフェースをひとつひとつ提供し続けつつ、そしてちょっとした遊び心も忘れずに、たくさんのユーザーの課題をしっかりと解決していけるデザイナーでありたいと、私は日々思っています。Designer、mynaデジタル技術により、様々な産業のルールが日々更新されています。昨年、アメリカのサンタバーバラを訪れて地元の本屋を探していたら、Amazonの影響で本屋は殆ど無くなったと教えられました。したルールの変更は、怖く感じられる反面、新しい可能性に満ちています。Speakerは、透明なボディに「歌詞」を映し出すスピーカーです。音楽の視聴体験を技術とデザインで変革しようとしているプロダクトで、「歌」と切り離せない歌詞を求めて歌詞カードを眺めていた頃の体験を、デジタル時代にさらに強く響くものとして再現します。細部までシンプルな外観や、モーションデザインへのこだわりが魅力的です。Speakerモーションデザインは透過ディスプレイのモノクロームな特性を活かしたものです。大胆な画角のトリミングやカメラワークが画面内に空間を感じさせ、見る人の意識を歌詞の世界に引き込みます。透過ディスプレイ上に展開される言葉には、詳細な音楽の曲調やリズムやタイミングのデータを元にモーションの質感や緩急が付けられています。サビでは表現を転換するなど、曲にフィットした演出で言葉が視界に飛び込んできます。知っているはずの歌詞が、適度に調整された演出によりメロディーと一体になり、ただ歌詞を読む行為とは違う新たな体験になっています。モーションの制作には一部私も関わっており、表示される歌詞に、有機的なカメラワークなど直線的にならない揺らぎの続く挙動にこだわって動きを付けました。歌詞は強いメッセージを伴います。その世界観を崩さず、より良い体験へ昇華させるためのディティールの積み重ねが感じられるデザインです。荒砂智之、UX/UIデザイナー、株式会社ベイジ(ポートフォリオサイト:TomoyukiArasuna.com)私がご紹介するのは、アメリカStarbucksの事前注文サイトです。本国では専用アプリも提供されていますが、Webサイトもプレビュー版として公開されています。閲覧には無料の会員登録が必要です。このサービスは事前にモバイルで注文・決済を行うことで、店頭の長い列で待たせることなくドリンクを提供するために考えられたものです。家を出る際に支払いまで済ませ駅前の店舗でコーヒーを受け取る、という形で利用されます。CompanyデザインはGoogleのマテリアルデザインがベースです。注文するという大目的のために不要な要素は削ぎ落され、モダン且つシンプルにまとまっています。ボタン表示やローディングアニメーションは、ネイティブアプリと遜色無い見栄えと使い勝手と言えます。マテリアルデザイン採用時の注意点は、まずブランドが持つイメージを適切に伝えた上でマテリアルデザインのグリッドシステムやカラースキームを適用する、という順序を守ることです。その点このサイトはマテリアルデザインを踏襲しつつも、スターバックスらしさをしっかりと感じさせる印象にまとまっており、非常に参考になります。このサイトはレスポンシブに対応していますが、PC版では左側に大胆に大きく見出しとメニューを表示させ、コンテンツエリアは右側に集約しています。日本のサイトではあまり見かけないレイアウトですが、モバイルでの表示の兼ね合いを非常にうまくクリアした画面設計で先進的な印象です。加えてユーザー登録時の入力フォームにはリアルタイムにエラーを返す機能が実装されています。新規パスワードの設定には、セキュリティを考慮した条件が多数ありますが、それらの条件をクリアするごとに緑のチェックが入り、入力エラーによるユーザーのストレスを軽減しています。Apps)に対応しているため、対応デバイスでホーム画面に追加すると、通常のモバイルサイトよりも読み込み速度が速くなります。これにより、企業側としてはコンバージョンの増加、直帰率の減少、モバイルセッションの増加を見込めます。ユーザーが「より快適にドリンクを楽しむ」という体験を向上させるための、デザインと技術どちらの面からも参考になる部分が沢山ある、優れたWebサイトと言えるのではないでしょうか。2018年9月号2018.09.10デザイナーが選んだ。2018年8月号2018.08.6デザイナーが選んだ。2018年7月号2018.07.9デザイナーが選んだ。2018年6月号2018.06.4デザイナーが選んだ。2018年5月号2018.05.7デザイナーが選んだ。2018年4月号2018.04.9デザイナーが選んだ。2018年3月号2018.03.12デザイナーが選んだ。