サイト制作における、より効果的な演出テクニックとは？

by @kokushing

石黒 雄介（kokushin）

お話したいこと

  1. 効果的な演出ってなんだろう？
  2. トレンドから学ぶ素敵な演出アイデア
  3. 僕はこうやって勉強してます
  4. まとめ

効果的な演出ってなんだろう？

自分が考える効果的な演出とは...
 

  • ユーザーの目線を誘導できる演出
  • ユーザーの操作を補助できる演出
  • ユーザーに世界観を伝えられる演出
  • ユーザーにワクワク感を与えられる演出

「ユーザーの目線を誘導できる演出」

人は動くものをついつい見てしまう傾向がある。

その為、サイトを表示させたときに見せたい要素を
わざと動かすことで注目させることができる。

例えば、クリック率を上げるためにボタンに対して
フェードインアニメーションを付けるなど。

「ユーザーの操作を補助できる演出」

ユーザーがどういう動作を行えばページを
快適に閲覧できるかを補助する演出。

例えば、スクロールを促す矢印アイコンなどを
進行方向に動かすことで、ユーザーがどの方向に
スクロールすればよいのかが伝わりやすくなる。

「ユーザーに世界観を伝えられる演出」

サイトがどういう雰囲気なのか、
世界観を伝えることができる演出。

例えば、人物の紹介サイトなら、
その人の特徴、キャラ設定、雰囲気に合った
演出効果を入れるなど。

水曜日のカンパネラ OFFICIAL SITE
http://www.wed-camp.com/

「ユーザーにワクワク感を与えられる演出」

ユーザーがサイトを見ていて、
ワクワクするような演出。

例えば、マウスやキーボードの操作に対応させたり、
動画や音などのメディアを再生して伝える、
ユーザー参加型の演出を実装するなど。

NHKスペシャル「新・映像の世紀」
http://www.nhk.or.jp/special/eizo/

ただしやり過ぎには注意！

  • サイトが重くて開けない...
  • 動きすぎてわけがわからない...
  • スクロール制御が面倒くさい...
  • 余計な演出で焦らされて欲しい情報が出てこない...

適切な要素に実装することで、
サイト全体のクオリティや
使いやすさが向上し、
効果的な演出となりやすい

トレンドから学ぶ
素敵な演出アイデア

シームレスなページ遷移
アニメーション

参考サイト

SVGを使ったパスアニメーション

WebGLを使ったリッチなコンテンツ

CSS Transitionによる
細かいパーツアニメーション

僕はこうやって勉強してます

CodePen

http://codepen.io/

メリット

  • その場で値を変えられるので、すぐに検証できる
  • サンプルデータのダウンロードも可能
  • 公開されているコードは基本的にMITライセンス
  • 思いついたらすぐ実装＆投稿！

具体的な勉強方法の例

 

CodePenでキーワード検索
例：loading animation

↓

ソースを眺める、値を変えてみて実験！

Awwwards

http://www.awwwards.com/

 

CSS Design Awards

http://www.cssdesignawards.com/

メリット

  • クオリティの高いWebサイトが多く掲載されている（むしろ高いサイトしか載っていない。。）
  • 演出表現のトレンドを追いやすい
  • 更新頻度が高い
  • コレクションページがアイデアの宝庫

具体的な勉強方法の例

 

Awwwardsに投稿があったらTwitter上で
自動ツイートされるように設定

↓

嫌でも目につくので、気になったのがあればチェック
（アーカイブにもなる）

↓

ソースコードを読んだり、要素を検証したり...

気に入った演出を見つけたら、
まずはソースコードを見てみよう！

まとめ

自分が考える効果的な演出とは...

 

  • ユーザーの目線を誘導できる演出
  • ユーザーの操作を補助できる演出
  • ユーザーに世界観を伝えられる演出
  • ユーザーにワクワク感を与えられる演出

 

ただし使いすぎは逆効果！
適切な要素に実装するようにしましょう。

トレンドを意識したサイトを作りたいなら...

 

  • シームレスな遷移アニメーション
  • SVGのパスアニメーション
  • WebGLを使ったリッチなコンテンツ
  • CSSを使った細かいパーツアニメーション

 

上記の要素を取り入れよう！

演出の実装やアイデアを学ぶには...

 

  • CodePenやAwwwardsの投稿からヒントを探し出すことを習慣づける
  • ソースコードを読んで、どういう構造なのか、技術を使っているのかを探る
  • 実際に書いて動かしてみたり、CodePenに投稿したりする

 

良い作品を見続ければ、感性も養われます👍

THANK YOU!