thoughtのタグが付けられている記事の一覧です。

はてブアプリのネイティブ広告、普通のエントリーと判別しやすくて良かった

以前、はてなブックマークを iPhoneアプリから見ていて良いなと思ったことがあったので、それについてメモしておきます。

ネイティブ広告(記事広告)というものがあります。これは、そのサイトにおけるコンテンツと同様の形式で掲載される広告のことを指します。例えば Twitter だったら普通のツイートと同じ形式で広告が流れてくるし、ニュースサイトだったらニュース見出し一覧の中に広告の見出しが紛れているような状態です。

このネイティブ広告、自分はあまり良い印象がありません。最近はどうなのかわからないのですが、広告であるという表記が凄くわかりづらいことが多く、ヒドいものだと広告を踏んで記事を読み終わった時にページ下部に小さく広告の表記があることに気づくものもあった気がします。

そんな感じでユーザーに気付かれないように、まるで人を騙すかのようにして広告を踏ませるものが多いため、記事内容に関しては満足したにも関わらず、広告記事だったということがわかってしまうと、途端にその広告主とそんな掲載の仕方をしているサービスに対しての不信感が増してしまうこともあります。

そんな時に、このはてなブックマークの iPhoneアプリを見て「おお」と思いました。それまで私が見てきたネイティブ広告の中で一番わかりやすく広告であるという表記がされていたのです。下の画像の「ロケーション抜群〜」というエントリーの箇所に “PR” という文字があります。

記事見出しの中にPRという文字がある

このようにちゃんと表記してもらえると、通常のエントリーとは違うものとして認識できます。やりすぎかもしれないけど、更に判別しやすくするために、背景色を通常のエントリーと変えてもいいかもしれないです。

このはてなブックマークの iPhoneアプリに限りませんが、ちゃんと広告であることを明示してくれると、そのサービスに対する信頼感が上がります。ちゃんとわかりやすく広告であるということが明示されていれば、絶対に広告を踏みたくない人は避けらるし、広告とわかっていても見出しの内容に興味があれば踏めるし。

うまいこと隠したと発信側は思っていても、大抵の場合誰かが気付くし、今の時代共有されて悪名や不信感が高まる可能性もある。なので、隠さずにもっと広告であるということを主張していった方がいいと思う。

ホバーしなくてもわかるようなリンクのデザインを心がける

最近、リンクをホバー ( :hover ) した時のアニメーションについてよく考えています。

CSS や JavaScript などが進化するにつれて、リンク箇所をマウスでホバーした時のアニメーションも多様になりました。古くは、文字色を変えたり少し上に動かしたりするぐらいでしたが、最近では、複雑なアニメーションをするものが増えてきました。Web制作の tips を載せているコリスさんでよくそういう記事を見ます。最近のアニメーションの例をコリスさんから引用してみます。

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス
引用元:[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

[JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js | コリス
引用元:[JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

これらのアニメーションを見た時に、私は「凄いな」と思うと同時に「そもそもその動き必要なのかな」と思ってしまいました。ホバー時のアニメーションはリンク箇所であることをユーザーに伝える補助をするために存在すると私は考えていたので、最近のアニメーションはただ「魅せる」ためのものになっているのかなと。現に、急いでいる時にゆっくりアニメーションされると、とてもわずらわしく感じることが多々あります。

考え方は色々ありますし、「こういうアニメーションをもっと多用したい」という人もいらっしゃるでしょう。ですが、スマートフォンやタブレットなどのホバーが効かないデバイスの存在も考えると、私はアニメーションにはそこまで力を入れなくてもいいのではないかと考えます。アニメーションを頑張るよりは、ホバーしなくてもリンクであることがわかるデザインをすることの方が重要ではないかと考えました。

フラットデザインについて自分が思ったことまとめ

さて、iOS7 のリリースからもかなり時が経って、ネット上で前ほど見なくなった印象の「フラットデザイン」という言葉。今回はフラットデザインに関して、体系的にまとめるみたいな人の役に立つものじゃなくて、自分がヒントになると考えた事例を元に私見をまとめています。「今更すぎるだろ」感もありますが、ここはひとつ。以下は、思考の流れの通りに書いているので、まとめは最後にあります。

そもそもどういうデザインが「フラットデザイン」なのか

まず、そもそも「フラットデザイン」の定義って何なんだろうということに直面します。それによって、色々な疑問が出てきます。

  • どういうデザインをすれば、フラットデザインになるのだろう?
  • 平面的にすれば、言葉通り「フラット」なデザインっていうこと?
  • あれ、Windows8 の Modern UI と Apple の iOS 7 って同じフラットデザインの割に結構違う?
  • そういえば、Apple って公式に「フラットデザイン採用した」って言ったかな?
  • そもそも、OS と ウェブサイトの話を一緒にしていいの?

別に誰が「フラットデザイン」を定義しているわけでもないので、ネット上には色々な意見や tips が溢れました。あるところでは Modern UI を想像しながら、別のところでは iOS 7 を想像しながら、それぞれが持つフラットデザイン感について表明している状態なので、これといった正解がある感じではありません。なので、様々な方の意見を読みつつ、この流行から自分なりに本質を見つける必要があると感じました。

事例1 tofubeats さんのサイト

自分なりにフラットデザインについて考える中で、心に引っかかったサイトがありました。ミュージシャンの tofubeats さんのサイトです。見た時にツイートもしてました。

tofubeats.comhttp://tofubeats.com

サイトの一番上に PV の動画があって、動画の下にはジャケット画像が1枚貼ってあります。PV の解禁前はその画像が一番上に貼ってありました。その時に一番見てもらいたいものに応じて、適宜貼り替えているようです。このコンテンツ以外が無いファーストビューに凄く興味を引かれました。いわゆるフラットデザイン的な要素は使われていないのですが、フラットデザインの本質を理解するヒントが多いサイトではないかと感じました。

事例2 vimeo

tofubeats さんのサイトを見た時と同じような感覚がどこかであったなあと探してみたら、vimeo の動画ページでした。この時もツイートしていました。

The new Myspace The new Myspace

先ほどの tofubeats さんのサイトと共通しているのは、メインコンテンツである動画をファーストビューにドンと見せているということ。vimeo は少し他の要素もありますが、他のサイトに比べたらメインコンテンツ以外の要素は少なく、メインコンテンツが画面の80%ぐらい(?)を占めています。動画を再生してもらうことを最重要視すれば、このような見せ方になるのは自然なことなのかもしれないです。

事例3 中田ヤスタカさんのインタビュー

ここで、Web とは異なるところで、上記で思ったことと似たようなことが書いてあった例を挙げてみます。それは、音楽情報サイトのナタリーに掲載された CAPSULE(最近、表記が小文字から大文字になりましたね) の中田ヤスタカさんのインタビューの中にありました。以下の文章は中田さんが「キャッチー」という概念について語っている箇所を引用したものです。

──その、中田さんが言う“キャッチー”っていうのはどういう感覚なんですか?

「どこに注目すればいいかわかる」っていうことですね。例えばこの机の上に今たくさん物が乗ってて、この状態はキャッチーじゃないんです。でもほかの物をどかしてコップ1個だけにしたらみんながコップを見る。それがキャッチーだと僕は思ってて。それがポップかどうかはわからないですよ。でも誰もがどこに注目すればいいかわかる。きゃりーのCMソングなんかはまさに15秒でわかるように作ってあるんで。

ナタリー – [Power Push] CAPSULE「CAPS LOCK」インタビュー (2/2)

「机の上にコップ1個が、キャッチーという状態」という言葉がとても心に残りました。この考え方がフラットデザインという流行の本質に近いのではないかと。

「平面的にすること」が目的ではない

上記の事例を参考にしつつ、自分なりにフラットデザインについて考えてみました。

思考を始めるにあたって、今回は OS のことは参考程度にして、ウェブサイトにおけるフラットデザインについて考えることにしました。やはり、レイヤーが違うものを一緒くたにして考えるには無理があると思います。OS は OS、ウェブサイトはウェブサイト、それぞれにふさわしいデザインがあり、それは重なる箇所はあったとしても一致するものでは無いはずです。

フラットデザインについて調べると、色々な tips が見つかり、中でもよく見るのが「平面的」という言葉です。その中では、「細いフォントを使う」や「グラデーションを利用しない」などのウェブサイトを「平面的」にする tips が掲載されています。ただ、それらを盲目的に採用するのは危険だと思います。「何のためにそういうデザインをするのか」を考えないと、今までより悪くなってしまうこともあるはずです。

例として、「ボタンがのっぺりとしていてわかりづらい」という批判をよく見かけます。これは、ボタンを平面的にして陰影をなくしたために、それがボタンなのかそうでないのかわかりづらいという話です。ウェブサイトにおけるボタンは、ユーザーを次のステップに遷移させるための装置として働くものが大多数だと思われます。それが、ボタンと認識されず押されない/見落とされてしまうと、ユーザーの行動の妨げになり、ウェブサイト運営者にとっては大きな痛手です。

このように盲目的にウェブサイト全てを平面的にすることで、必ずしも全てが良くなるというわけではないです。ユーザーの目的を達成させる手助けになるなら、むしろボタンに影を落としたり、グラデーションを採用したりして、押せそうに見せることは積極的にやるべきことです。

盲目的にフラットデザインを採用してしまっては、うまくいかない箇所が出てきます。では、何故フラットデザインという考え方が出てきたのか、ウェブサイトを開設する意義に立ち返って考えてみましょう。

コンテンツにフォーカスしてもらう手段としてのフラットデザイン

何故フラットデザインという考え方が出てきたのかなあと考えてみます。中田ヤスタカさんのインタビューにあった「机の上に乗っているたくさんのものをどかして、コップ1個だけにする」という言葉をヒントにしてみます。

ウェブサイトは技術の進化につれて、リッチな表現がたくさんできるようになってきました。言ってみれば、机の上に豪華な箸やらスプーンやらがたくさん置いてあって、それぞれが主張している状態にあったということです。でも、一番見てほしいのはコップ。問題を解決するために以下の手順を踏みます。

  1. 豪華な箸やスプーンを置けるようになった
  2. でも、やっぱりコップを見てほしい
  3. じゃあ、コップ以外のものをどかしてしまおう

机の上のものは簡単にどかせますが、ウェブサイト上ではどかすのが難しいものも多いです。そこで、メインコンテンツ以外の諸要素を「平面的」にすることで目立たなくして、メインコンテンツにフォーカスしてもらうようにした。机の上にものがたくさん乗っているが、あたかもコップ1個だけに見えるような状況を作り出す。

ウェブサイトを開設する目的は、基本的にはコンテンツ(文書や動画、音楽、時にはサイト自体)を見てもらう/利用してもらうことにあると思います。今、フラットデザインがもてはやされるのは、そのデザイン手法によって得られる結果が、「コンテンツそのものへのフォーカス」だからと考えられます。このフラットデザインの流行は、リッチな表現が多くなってきたウェブサイトにコンテンツファーストという考えを取り戻す動きなのかなと。

まとめ

今回、色々と書いてきたものを簡単にまとめてみます。

  • フラットデザインは目的ではなく手段
  • フラットデザインは利用者にメインコンテンツにフォーカスしてもらうための手段
  • フラットデザインの流行はコンテンツファーストを取り戻すための動き

もちろん、これは私の観測範囲内の情報と思考から出たものなので、唯一の正解ではなく、人によっては真逆の答えの方もいると思いますが、現在の自分の考えはこのようになりました。