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

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

日本では大勢のデザイナーが活躍しています。そうしたひとりひとりが、どんなデザインを見て感銘を受けたのか、何を大事に思ってデザインしているのか、デザイナーであれば興味のあるところではないでしょうか？
今回は、4名のデザイナーが、自分の好きなデザインを紹介してくれました。

頓花聖太郎、ホラープランナー / ホラーデザイナー、株式会社闇

多くの「ウェブデザイン」がユーザー中心という大義の元、均質でフラットな世界に移行してしまいました。その結果「表層面でのデザイン制作」は、既に世にある正解を選んでスタイリングすることが一番効率的、とすら思える現状があります。
ですが、本当にそれ「だけ」で良いのでしょうか。ウェブデザインにおいて、もっと新しい可能性を押し広げることはできないのでしょうか。

私がホラー専門の会社にいるため、今回は自社制作のホラーサイトを紹介します。今回取り上げるのは「サクヤサマ」というスマホサイトです。ブラウザ上で「ちょっとしたホラーゲーム」を体験できるサイトになっています。

好きなデザイン：【リゾートバイトの怖い話】サクヤサマ – ブラウザで戦慄ホラー体験│株式会社闇 × アプリリゾート

サイト演出の肝は「スクロール芸」。スクロールに合わせてサイト内のコンテンツが動くという、ある種「枯れた」演出です。ですが「サクヤサマ」のスクロール芸はそれを映像の再生位置調整に応用しています。屋敷の中を歩き回る動画が自分のスクロール量に応じて再生されるので「スクロールで進む → 自分の意思で前に進んでいく」という表現になっています。「何かが出てくるかもしれない想像力の間」「怖いけど進まなければならない能動性」を、スクロールを通して伝えようとしています。

ウェブブラウザという仕様の中で、単に情報を届けるだけでない、見た人の心に強く残るエモーショナルなウェブデザインを「サクヤサマ」のサイトでは目指しました。

Ryo Nakae、デザイナー、DeNA Co., Ltd. （ポートフォリオサイト：Border）

Angeloro Michele氏がクリエイティブディレクターを務めた「Get Obachan」というサービスのWebサイトについてご紹介します。

Get Obachanは、日本製の伝統的な食器、織物、おもちゃ、お菓子などを日本国外に住む人に届けてくれるサブスクリプションサービスです。

Webサイトを訪れると、海外へ配送されるであろう和風な品物が整然と並べられたメインビジュアルが目を引きます。白基調のシンプルな配色で、一見クールなサイトですが、スクロールに応じてスライドするタイポグラフィや画像のアニメーション、そして要所要所に使われる絵文字が絶妙なポップさ、親しみやすさを演出しています。

好きなデザイン：Get Obachan

ほかにも、ボタンにマウスをホバーした時やメニューアイコンをタップした時のアニメーション、サブスクリプション画面のプランの選択しやすさなど、細部までサイトを訪れたユーザーのことをよく考慮したWebサイトだと思います。

シンプルで綺麗なUIと力強いタイポグラフィ、それをうまく中和するようなポップなあしらい、そして随所に散りばめられたマイクロインタラクションという、最近のWeb/UIデザインの流行を絶妙に押さえたサイトです。

池田航成、Technical Director / Programmer / Interaction Designer / Educator、フリーランス（ポートフォリオサイト：ikekou.jp）

Flash全盛の頃はカンブリア紀のように爆発的に多様なUIが生まれ、ユーザビリティの面ではリスクを孕みつつも、コンテンツに合ったUIを各々が探求した時代であったように思います。タッチスクリーンデバイスの普及に伴い、UIデザインの場も増え、優れたガイドラインや学習リソースが容易に入手できるようになりました。一方で、正解に恵まれたゆえに学習者にとっては独自の探求が難しくなったようにも感じます。

今回デザインを紹介するにあたり、株式会社BUTTONと制作したYahoo! JAPAN様の英語学習コンテンツ『あそべるけんさくとえんじんのABC Days』を、自分の関わったもので手前味噌ですが、UIにおける探求という点で挙げることにします。極力シンプルにして、しかも文字で説明せずに自然なインタラクションでやってほしい動作を伝えているデザインです。

好きなデザイン：あそべるけんさくとえんじんのABC Days

コンテンツは極めてミニマルです。開始すると英単語とイラストを表示します。タップで音声を再生、上下にスワイプすると単語を切り替えます。子供が使うケースを想定し、没入感と誤操作排除を優先で、UI表示そのものをなくしました。

操作の伝え方については、プロトタイピングの結果、何も示さずとも画面はタップされるので、タップを何回も繰り返したくなるように、キャラクターのイラストが柔らかく伸びる動きと音声をタップに付与しました。更に、タップ時に伸びる方向を微妙に上にするなど、画面全体で上への流れを作りました。つられたユーザーが上に指を動かすと、イラストはさらに伸び、ある閾値で一気に画面全体が上に遷移して、下から次の単語が出る仕掛けです。言語やアイコンによらずモーションのみで操作を伝える探求をできた点が、好きな所です。

またこのコンテンツの目的は英語の学習です。習得には繰り返しが必要です。そこで操作の楽しさで繰り返してもらえるようにインタラクションを作りました。スワイプする行為そのものが楽しくて繰り返しスワイプする。すると同時に英語が学べる。

「行為そのものを報酬とする行為」はフィジカルな欲求であり、つまり、インタラクションデザインはユーザーのフィジカルな欲求の喚起と行為の誘発を計画するわけです。そうしたプリミティブな欲求のデザインと同時に、そこに別の報酬を自然に得る（今回で言うと英語の学び）という体験のデザイン全体とのバランスが、僕にとっては興味深く感じる点であり、また今後も取り組んでいきたいと思っています。

富川蕗子、Webディレクター / UI/UXデザイナー、フリーランス（ポートフォリオサイト：cocon）

スマホでのWeb閲覧率がPC閲覧率を上回った現在、サイト制作におけるモバイルファーストはもはや当たり前ですが、情報閲覧や操作性などのロジカル面と、独創的なデザインの両者を実現しているサイトは、それほど多くないように感じます。

膨大な情報量に踊らされたり、美しいけれど既視感のあるデザインが多い中で、DONGURI制作の『ジャパンインベスターパートナーズ』のWebサイトは、情報・UI設計の美しさと独創的なデザインが両立している印象を受け、初めて見た時心に強く響くものがありました。

昨今のWeb制作の現場では、クライアントのビジネスモデルそのものを成長させるために、上位戦略から参加するスタイルが増えています。ユーザーのペルソナをもとにカスタマージャーニーマップやユーザーストーリーを作り、そこで抽出された課題に対して施策を考え、新しいコンテンツやWebサービス・アプリに反映していきます。しかし、論理的な課題解決手法に加えて、人の感情を揺り動かすような”エモーショナル”なデザインを両立させることは、実際はなかなか難しいのではないでしょうか。

好きなデザイン：ジャパンインベスターパートナーズ

スマホでアクセスすると、まず、ジョーカーのトランプに挟まれて登場するAのカードに目を奪われます。そしてスクロールしていくと、次に注目すべきコンテンツへ自然に視線を誘導するアニメーションが施されています。アニメーションがユーザーのスクロール操作を邪魔することはありません。また、単調な構成になりがちなスマホのデザインも、工夫されたレイアウトやアニメーションがリズムを生み出し、PCと表現の差はありません。更に、緻密なスケッチのような雰囲気を持つイラストが、サイト全体の世界観を醸し出しています。