Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サイト制作における、より効果的な演出テクニックとは?
Search
kokushin
January 20, 2017
Programming
1
110
サイト制作における、より効果的な演出テクニックとは?
2017/1/18に開催された「名古屋マークアップ勉強会」の発表資料です。
https://kokushin.github.io/makaben-0118/#/
kokushin
January 20, 2017
Tweet
Share
More Decks by kokushin
See All by kokushin
趣味全開のAITuber開発
kokushin
0
760
AI彼女とペアプロする話
kokushin
2
530
AI彼女の感情制御を頑張る話
kokushin
3
870
window.matchMediaの話
kokushin
1
170
Other Decks in Programming
See All in Programming
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
CSC305 Lecture 04
javiergs
PRO
0
250
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
610
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
クラシルを支える技術と組織
rakutek
0
190
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
800
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How to Ace a Technical Interview
jacobian
280
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing for Performance
lara
610
69k
Transcript
サイト制作における、より効果的 な演出テクニックとは? by @kokushing
石黒 雄介(KOKUSHIN ) マークアップエンジニア 普段の業務ではマークアップと演出実装、開発環境 の整備、CSS 設計などを担当 個人で を運営中 Twitter:
un-T factory! メディアサイト @kokushing
お話したいこと 1. 効果的な演出ってなんだろう? 2. トレンドから学ぶ素敵な演出アイデア 3. 僕はこうやって勉強してます 4. まとめ
効果的な演出ってなんだろう?
自分が考える効果的な演出とは... ユーザーの目線を誘導できる演出 ユーザーの操作を補助できる演出 ユーザーに世界観を伝えられる演出 ユーザーにワクワク感を与えられる演出
「ユーザーの目線を誘導できる演出」 人は動くものをついつい見てしまう傾向がある。 その為、サイトを表示させたときに見せたい要素を わざと動かすことで注目させることができる。 例えば、クリック率を上げるためにボタンに対して フェードインアニメーションを付けるなど。
「ユーザーの操作を補助できる演出」 ユーザーがどういう動作を行えばページを 快適に閲覧できるかを補助する演出。 例えば、スクロールを促す矢印アイコンなどを 進行方向に動かすことで、ユーザーがどの方向に スクロールすればよいのかが伝わりやすくなる。
「ユーザーに世界観を伝えられる演出」 サイトがどういう雰囲気なのか、 世界観を伝えることができる演出。 例えば、人物の紹介サイトなら、 その人の特徴、キャラ設定、雰囲気に合った 演出効果を入れるなど。
水曜日のカンパネラ OFFICIAL SITE http://www.wed-camp.com/
「ユーザーにワクワク感を与えられる演出」 ユーザーがサイトを見ていて、 ワクワクするような演出。 例えば、マウスやキーボードの操作に対応させたり、 動画や音などのメディアを再生して伝える、 ユーザー参加型の演出を実装するなど。
NHK スペシャル「新・映像の世紀」 http://www.nhk.or.jp/special/eizo/
ただしやり過ぎには注意! サイトが重くて開けない... 動きすぎてわけがわからない... スクロール制御が面倒くさい... 余計な演出で焦らされて欲しい情報が出てこない...
適切な要素に実装することで、 サイト全体のクオリティや 使いやすさが向上し、 効果的な演出となりやすい
トレンドから学ぶ 素敵な演出アイデア
シームレスなページ遷移 アニメーション
参考サイト Lionel Durimel - Portfolio Poignée de main virile http://www.durimel.io/nel
http://www.poigneedemainvirile.com/
Pjax.js Barba.js https://github.com/defunkt/jquery-pjax http://barbajs.org/
SVG を使ったパスアニメーション
DRAFT CORPORATE SITE un-T factory! NAGOYA https://draft.co.jp/ https://www.un-t.com/nagoya/
Snap.svg Velocity.js http://snapsvg.io/ http://velocityjs.org/
WebGL を使ったリッチなコンテンツ
Heco ACSL | 株式会社自律制御システム研究所 https://www.helloheco.com/ http://www.acsl.co.jp/
three.js PixiJS https://threejs.org/ http://www.pixijs.com/
CSS Transiton による 細かいパーツアニメーション
Jenny Johannesson – Digital Designer In Pieces - 30 Endangered
Species, 30 Pieces. http://www.jennyjohannesson.com/ http://species-in-pieces.com/
Animate.css Magic Animations https://daneden.github.io/animate.css/ https://www.minimamente.com/example/magic_anima
僕はこうやって勉強してます
CODEPEN http://codepen.io/
メリット その場で値を変えられるので、すぐに検証できる サンプルデータのダウンロードも可能 公開されているコードは基本的にMIT ライセンス 思いついたらすぐ実装&投稿!
具体的な勉強方法の例 CodePen でキーワード検索 ↓ ソースを眺める、値を変えてみて実験! 例:loading animation
AWWWARDS CSS DESIGN AWARDS http://www.awwwards.com/ http://www.cssdesignawards.com/
メリット クオリティの高いWeb サイトが多く掲載されてい る(むしろ高いサイトしか載っていない。。) 演出表現のトレンドを追いやすい 更新頻度が高い がアイデアの宝庫 コレクションページ
具体的な勉強方法の例 Awwwards に投稿があったらTwitter 上で 自動ツイートされるように設定 ↓ 嫌でも目につくので、気になったのがあればチェック (アーカイブにもなる) ↓ ソースコードを読んだり、要素を検証したり...
気に入った演出を見つけたら、 まずはソースコードを見てみよう!
まとめ
自分が考える効果的な演出とは... ユーザーの目線を誘導できる演出 ユーザーの操作を補助できる演出 ユーザーに世界観を伝えられる演出 ユーザーにワクワク感を与えられる演出 ただし使いすぎは逆効果! 適切な要素に実装するようにしましょう。
トレンドを意識したサイトを作りたいなら... シームレスな遷移アニメーション SVG のパスアニメーション WebGL を使ったリッチなコンテンツ CSS を使った細かいパーツアニメーション 上記の要素を取り入れよう!
演出の実装やアイデアを学ぶには... CodePen やAwwwards の投稿からヒントを探し出す ことを習慣づける ソースコードを読んで、どういう構造なのか、技術 を使っているのかを探る 実際に書いて動かしてみたり、CodePen に投稿した りする
良い作品を見続ければ、感性も養われます
THANK YOU! Twitter Facebook GitHub Qiita Portfolio