造形室ノート

WEBデザインの手触り

2015.08.25

先週末、WCKことウェブクリエイターズ高知の勉強会に参加してきました。今回のテーマは「CSS3アニメーションを使ってみよう!」ということで、HOOP Designの入交さんによる解説と質疑応答が行われました。
技術の詳細についてはここでは触れませんが、デザイナーの視点からCSS3アニメーションをはじめとするWEBでの「動き」について考えたことをまとめてみます。

※ここでの「アニメーション」は、全盛Flashやマンガアニメのように縦横無尽に絵が動きまくるものではなく、「ちょっとした動きのあるエフェクト」くらいのものとしてお考えください。

誰がアニメーションを作るのか

各ブラウザのCSS3アニメーションへの対応状況が改善してきたことで、これまでJavaScriptを使わないとできなかったリッチな表現が現実的に簡単に実装できるようになってきました。処理速度や表示に関してもCSS3の方が優れているため、今後のサイト制作にも積極的に取り入れていきたいところです。

さて、技術的に「こんな新しいことができるようになった!」のは良いとして、ではそれをどう制作に取り入れていくかが課題、というのが勉強会でもひとつの論点となりました。具体的には次のようなポイントが挙げられました。

「アニメーションは誰が考えるべきか」について、会場では、ディレクター・デザイナー・コーダーの中では「デザイナーが考えるのが良い」と考える方が最も多かったようです。

これは私も同意で、要素の見た目だけでなく、ユーザーの操作に応じてどう変化するかというところまで含めてデザイナーがデザインしていくのが良いと思います。

ただし、色や形と違って「動き」は静止画カンプや口頭で説明しづらいものです。実装にあたってはコーダーとの連携、つまり共通の言葉・認識で話せる知識がデザイナー側にも必要になるでしょう。何をどうすればどんな表現が可能になるのか、いろんなサンプルを見て勉強したいと思います。

参考リンク

hovercssHover.css
様々なホバーエフェクトが一覧できるページ。ボタンがそのままエフェクトになっているのが便利です。
http://ianlunn.github.io/Hover/
animatableAnimatable
CSS3アニメーションの基本的な実装例39。ホバーしている間プロパティが2つの値を行ったり来たりします。
http://leaverou.github.io/animatable/
Nxworld-effectsCSSのみで実装するボタンデザインやホバーエフェクト 20+α|NxWorld
使い勝手の良さそうなエフェクトが丁寧な解説で掲載されています。
iconhoverSimple Icon Hover Effects | Codrops
アイコンや丸型オブジェクトに合いそうなホバーエフェクト。
http://tympanus.net/Development/IconHoverEffects/
CreativeLinkEffectsCreative Link Effects|Codrops
テキストリンクと相性が良さそうなホバーエフェクト。
http://tympanus.net/Development/CreativeLinkEffects/

イメージを表現する一手段として

ohayou

紙媒体のデザインではしばしば「フォント・文字組は“声”を決めるつもりで」というようなことを言われます。
例えば優美な明朝体と、ポップな丸ゴシック、ガッチリした角ゴシックでは、それぞれ聞こえてくる“声”が違うような印象を受けますよね。そのものの性格・イメージを最も良く表す、ふさわしい“声”=フォント・文字組を選びましょう、ということです。

デザインとは、伝えるべきことを視覚的にどう伝えるかを設計することです。「伝えるべきこと」は時に、一言では言い表せないイメージであったり、世界観、理念、感情、「〜らしさ」といったものも含みます。それらを何とかビジュアル化して伝えるために、色や形、余白や様々な要素の扱い、トーン&マナー、印刷や加工、用紙などなどを駆使して日夜デザイナーは四苦八苦しているのです。

おはよう
おはよう
おはよう
マウスオーバーでアニメーションします。

今回のCSS3アニメーションなどの動きやエフェクトも、視覚化のための一手段としてデザインの引き出しに入れられると良いなと思います。
キーカラーを選ぶように「キーエフェクト」なんて切り口を考えるのも個性が出て面白いかもしれません。
文字が“声”なら、エフェクトは“しぐさ”といったところでしょうか。「デザインは細部に宿る」と言いますが、文字詰めにデザインの品質が現れるように、コンマ何秒のちょっとした処理の有無でサイト全体の印象は随分変わるはずです。

手触り=体験が心を動かす

webデザインでは紙や印刷系の「手触り」という武器は使えませんが、ユーザーの操作に応じるインタラクションという「手触り」を武器にすることができます。
ただしこれはサイトの操作性に直接関わってくる部分なので、単に見た目の新奇性だけを追求しては諸刃の剣となります。webサイトは使うものである、という大前提の下で、気持ち良く機能するデザインを探す作業が不可欠です。

スマホの普及や様々なデバイスの登場により、今やwebサイトはPCの前に座って眺めるだけのものではなくなりました。凝ったビジュアルやギミックを見せるだけのサイトや、何でもかんでも情報を詰め込んでユーザーに探してもらうサイトは過去のものになりつつあります。

素通りされるポスターや手に取られないチラシに意味がないように、使われないサイトでは伝えられるものも伝えられません。単なる風景が、能動的に手を伸ばした先にある手触り=ユーザーの体験になることで、そこにある情報が心を動かすものになるのです。

マウスを動かす、クリックする、スクロールする、スワイプする…必要な情報へたどり着くまでの体験をいかにストレスなく、かつ「好い体験」にデザインできるかがこれからのwebデザイナーに求められる技術なのでしょう。大変ですが、身につければ、サイトの世界観をより高次元で表現する強力な武器になってくれると思います。

TAG