「なんかいい」で終わらせない!本当の魅力を伝えるためのWEBデザイン

1240px_DSC_0541
CINRAでは、クライアントのみなさまからお問い合わせをいただくとき、自社メディアの『CINRA.NET』や、今までの制作実績を見てお声掛けいただくことが多いのですが、うれしいことに、「デザイン」をきっかけにCINRAに興味を持っていただくこともあります。

今回は、弊社の中でも、アート系のお仕事を担当することが多いデザイナーの上田に、普段どんなこだわりを持ってWEBデザインをしているのか、聞いてみました!

この記事が、デザイナーの方やこれからデザイナーを目指す方はもちろん、WEB制作に携わる方々のクリエイティビティを刺激するきっかけになったら嬉しいです。

霧がかったビジュアルに、流れ出す音声、少し「異質」なサイト制作

——アートプロジェクト『TURN』のWebサイトは、CINRAにとっても挑戦の多いプロジェクトだったかと思います。実際の進め方はどのようなものでしたか?

上田:TURNは“異なる背景や習慣を持った人々が関わり合い、さまざまな「個」の出会いを生み出す「交流」を主軸に据えたアートプロジェクトとして、一人ひとり異なる全ての人に届く新たな文化的体験をつくり出すことを目指す”という姿勢のアートプロジェクトです。(TURNの詳細ついて)このサイトではTURNの姿勢をWebの中でどのように表現するか、チーム全体で模索しながら進めました。

turn東京2020オリンピック・パラリンピックにおける文化プログラムのモデル事業として始まった「TURN」のWebサイト


——TOPページがすべてぼやけていたり、普通だとテキストで表現されるはずのサイト説明が音声で流れたりと、かなり「異質」なWebサイトですよね。

上田:サイトを作る際に軸になったのは、「普段と違う状況におかれることで気づくこと」「想像力が刺激されること」、そして「コミュニケーションに変化が起きること」の3つです。あえてトップページに霧のようなエフェクトをかけ、普段使っているサイトとは明らかに違う仕様にすることで、いつもとは違う感覚を呼び起こしたり、自分とは違う人の状況に気づいたりと、いろんな想像力を働かせるきっかけを作ろうとしました。

また、メインビジュアルはスライド形式になっています。スライドには通常だと画像が置かれ、時間とともにいくつかの画像が切り替わりますが、このサイトは4つの「音声」が切り替わり流れる仕様となっています。WEBサイトを見るときにわたしたちが普段もっとも頼りにしている視覚情報のボリュームを下げ、一方で音声にさまざまな情報を持たせています。ここでも、いつもとは違う状況を作り出すことを意識しました。

1240px_DSC_0500

——実際にこのサイトを使っていると、ぼやけている中に「なにかある」と感じて、ついマウスを動かして探し出してしまうような感覚があります。

上田:「ここに文字がありそう」という「予感」を感じてもらえるようには意識しました。その「予感」を感じてもらうために、どれくらいぼかすかについては、チームメンバーやクライアントとも何度も話し合いました。トップページの平均滞在時間も長く、ユーザーにとって情報を探ってみたくなるサイト作りができたのかな、と思います。ユーザーの立場でこのサイトを見たときに、一目ではよくわからないサイトだからこそ、探って、理解しようという気持ちが働きやすいのかもしれません。

言葉にできない空気感やフォトグラファーの目線を伝えるデザイン

——次に、『OKAYAMA ART TRIP with Yi Kai Huang, photographer』について聞かせてください。こちらは岡山市のあたたかい空気感が感じられるWebサイトですよね!

上田:このサイトは海外の方にターゲットを絞り、日本語展開はせず、英語・フランス語・簡体字・繁体字の4言語で展開しました。企画のテーマは「アート目線で切り取る岡山」。台湾のフォトグラファー黃奕凱(コウ・イーカイ)さんが実際に岡山市内のアートスポットを散策して撮った写真をサイトに使用しています。岡山というと、瀬戸内という「海」のイメージがあったので、初めは水色を基調にしたデザインにしていました。でも、実際にあがってきた写真が、街中を散歩しているようなゆるやかな空気をまとったものが多かったので、サイト全体も写真の良さを引き立たせられるように、色合いなど写真に合わせて調整していきました。

okayama岡山の魅力を「アート」の視点で海外の人々に伝える。フォトグラファーは台湾在住の黃奕凱氏。

——サイトを開くとシャッターを切ったかのように一瞬画面が真っ白になり、ファインダーから覗き込んだような画像が現れるなど、「カメラ」を意識させるようなデザインになっています。

上田:このサイトでは、フォトグラファーの「目線」を意識しました。台湾人である黃さんが歩きながらファインダー越しに見ていた岡山は、ターゲットである海外の人が見たときに面白いと感じる日本の姿だと気づき、サイトに訪れた人もカメラ越しに岡山の風景を見ているような表現にしました。

また、リンクにマウスオーバーした時には、カーソルがカメラのフォーカスマークになるようにしています。ユーザーが見たい場所をクリックする行為と、写真を撮る時に狙った場所にピントを合わせる行為が近しいなと感じ、カーソルをフォーカスマークにすることで「目線」というテーマをより強く出せると思いました。

okayama2アートスポット名の上にマウスを移動させると、カーソルがフォーカスマークに変化する。

また、サイトのタイトル『OKAYAMA ART TRIP with Yi Kai Huang, photographer』は、もともとは『ART TRIP IN OKAYAMA』で進んでいたのですが、それだと今回の企画のフックである「日本国外のフォトグラファーの視点で切り取る岡山」という企画意図が伝わりにくいと感じ、タイトルの変更をチームメンバーに相談しました。それでフォトグラファーという言葉と黄さんの名前を追記した今のタイトルとなったのですが、企画〜タイトル〜デザインが一致することで、サイトの企画意図がよりダイレクトに伝わるようになったのではないかと思います。しっくりこない時には、チームのメンバーやデザイナーの先輩にも相談して、企画意図とブレない場所に着地できるよう心がけています。

必要なのは「伝えるべきことを明確にする」こと

——これまでに挙げたサイトは動きや見せ方が特徴的ですが、こうした表現とサイトとしての使いやすさを両立させるために、どんなことを考えていますか?

上田:「伝えるべきことを明確にする」ということを考えています。そのためには制作者がそのサイトで成し遂げるべきゴールを理解していることが必要です。例えば『TURN』のサイトは本来情報発信という役割を担っていますが、まずはサイトに訪れたユーザーにTURNというアートプロジェクトのコンセプトを理解してもらうことが大切でした。クライアントを含めて、チーム全体でそのゴールを共有できたので、軸をぶらさずに制作を進めることができました。

伝えたいことが明確にないと、制作の軸があやふやになり、結果的にわかりづらいサイトになってしまいます。サイトの目的を明確にし、「ユーザーに伝えるべきことは何か」、を常に念頭に置いて制作を進めることが大切だと思っています。

——自分の「なかみ」を引き立てるメークを提案する『資生堂 就活メーク』のサイトでは「使いやすさ」を考慮して作られたようですね。ここにはどういったゴールがあったのでしょう?

上田:こちらはリニューアルを担当したのですが、元のサイトはアクセスのほとんどがスマホからでした。そのため、制作の軸を「スマホでの使いやすさ」に設定しました。インタビューやコラムなどの記事もありますが、サイトを訪れているのは、ほぼ100%就職活動でのメイク法が知りたい女の子たち。ロゴのデザインやビジュアルの方向性は資生堂さんが考えてくださっていたので、UIの設計に注力しました。その際、ターゲットである女の子たちが普段スマホで体験している「使いやすさ」を実現するため、キュレーションサイトを参考にしています。

就活資生堂の提案する「自分プレゼンメーク」の手がかりを、モバイルファーストで就活生に伝える、『資生堂 就活メーク』

——たしかに、コンテンツが並ぶトップページはどこか見慣れている感じがします。また、「#(ハッシュタグ)」をつけてメイクの部位を表現しているのも、わかりやすいです!

上田:スマホでサイトを見るときに親指が触れる位置に「スキンケア」「目もと」といったメイクの部位別のメニューをつけて、TOPページからすぐに自分の知りたい情報へ飛べるような動線もつくりました。わたしも担当ディレクターも「これは、便利!」と、自信があったのですが……。

——が……?

上田:モックアップと呼ばれる、実際のサイトと同じように動かすことができる試作品をつくり、社内の女性数名に触って試してもらったところ、メニューにまったく気づいてもらえなかったんですよね。この反応を受けて、「動きをつけたら目に留まりやすくなるかも?」とエンジニアと修正を重ねて完成させました。制作者が使いやすいと思ったことが、ユーザーにとっては必ずしもそうではない、と体感しました。

このサイトでは他にも、縦長動画を採用したり、グローバルメニューを横スクロールですべて見られるようにしたりと、スマホで使うことを一番に考えて制作しています。公開後、前年比でPVが何倍も増えていると聞いて、ユーザーのインサイトに応える仕様にすれば、結果はきちんと出るんだな、とうれしくなったお仕事でもあります。

Webにしかできない表現で、世界観を表現していく。

——音を使った表現やUIの設計など、Webならではの表現に多く挑戦していると思うのですが、普段はどういったことを意識してデザインをしていますか?

上田: デザイナーになりたての頃は「見た目を作ることが仕事」と思い込んでいましたが、今はもっと視野を広げたいと考えています。例えば、企業のイメージを形作るものは、ロゴやポスターなどのビジュアルだけでなく、企業理念からスタッフの振る舞いまで、ユーザーと接点があるものはすべて含まれますよね。Webサイトに絞って見ても同じで、ロゴやレイアウトといった見た目だけでなく、リアクションやスピード、音など、ユーザーがそのサイトから感じ取るものすべてによって形作られていると思います。単に「見た目がきれい」と感じてもらうだけでなく、わたしがそのデザインを考えるときに気づいたクライアントの魅力や企画の面白さを、様々な感覚を通してユーザーに伝えられるようになりたいと思っています。

1240px_DSC_0470

——それでは最後に、CINRAでこれからやってみたいことがあれば、教えてください。

上田:音楽やファッションなど、自分の世界観をはっきり持った人たちのサイトを作ってみたいです。クリエイターの考えやコンセプトをWebに落とし込み、ユーザーに「体験」してもらえるようなサイトに挑戦してみたいですね。

また、『TURN』のように音を活用したサイトも引き続き作っていきたいです。Webは動いたり光ったりと、紙のデザインとはまた違った、Webでしかできない表現があると思うので、Webの特性を活かした表現にもっと挑戦していきたいです!

——ありがとうございました!

一つひとつの言葉を聞きながら、どのサイトもデザイナーの意図や思惑が見え隠れしていることを実感しました。これからサイトを見る際にも作る際にも、デザイナーの視点を意識してみると、サイトの深い魅力に気づけるかもしれません。

この記事で紹介した事例をはじめとした、CINRAのデザインスピリッツが垣間見られる実績紹介はこちらから!

デザイナーだけでなく、チームメンバー全体でこだわったポイントも紹介されていますので、サイト制作の現場にいる方も、これからサイト制作をしようと考えているWeb担当の方も、ぜひ、見ていただければと思います!

 

 

Written by:
Back
sp-menu
Language
JP
EN
Social Media
F
T