【前編】 HTMLファイ部の今 【後編】 ペライチサイトの UI・UX 「HTML5を名に関した部署で何が起きているか」という話と、「面白法人」が考えているニッチなUI・UXに関する話です。

1. 第57回#HTML5とか勉強会
カヤックHTMLファイ部のUI・UX
藤澤伸

2. 大きく分けて２つ、
• HTML5を名に関した部署で何が起きているか
• 「面白法人」が考えているニッチなUI・UX
という感じの話をします。

3. 自己紹介
• 藤澤伸"(のびー)
• エンジニア
• 面白法人カヤック新卒３年目
• HTMLファイ部リーダー
• 「fnobi」で検索！
• h/p://twi/er.com/fnobi
• h/p://facebook.com/fnobi
• h/p://github.com/fnobi
• h/p://qiita.com/fnobi

4. 【前編】
HTMLファイ部の今

5. カヤック・クライアントワークチーム
• h#p://www.kayac.com/service/client
• さまざまなお客さんからの依頼を受け、コンテン
ツ・アプリ等を制作
• Webで言えば、キャンペーンサイト・イベント公
式サイト等の仕事が多い
• ざっくり言えば、バズらせるのが得意なチーム

6. 2011/10/4、HTMLファイ部設立
• 面白法人カヤックがHTMLファイ部の設立を発
表！｜ニュース｜面白法人カヤック
• HTML5(HTML・CSS・Javascript)を扱う専門部署
• 要はMarkup6Engineer
• HTML5がいわゆるバズワードだったころ。ある種
流行りに乗った部署だった。最新技術を追ってい
るというアピール。

7. ところが

8. HTML5バブルの崩壊
• 「HTML5!!」って言ってるだけでモテる時代では
なくなった
• ひたすらリッチなサイトだとかWebアプリだと
か、いかにもHTML5！というような依頼は減って
きている
• 言うなればHTML5は、Webをアプリにする過程。
お客さんにとってやりたいことが、アプリでもい
い話ならアプリを作ればいい。

9. そして今

10. 変わらないこと
• 相変わらず、最新の技術を駆使したWebサイト実
装
• grunt.js・gulp.js・coffee2script・es6・WebGL...
• 案件によって自由に組み合わせ。最近は開発環
境周りの業界の方がやや元気。
• WebGLはちょっぴり流行ってきている。お仕事
待ってます。

11. 変わったこと

14. そして今
• マークアップに限らない、よりハイブリットな知
識を持つメンバー"が増えている
• アプリチーム兼任・サーバーチーム兼任も増え
ている
• そして、"UI/UXに関する考え方を持っていること
も、より重要に
• 企画を考えて、絵をつくるチームと隣にいるか
らこそできる、頭のひねり方を生かす

15. 【後編】
ペライチサイトの
UI・UX

16. UI・UXと言うと、

17. スマホアプリ・Webサービ
ス等の印象がつよい？

18. でもわれわれが主に作っているのは、

19. • 例えば、一度しか見られないキャンペーンサイト
• 例えば、バズらせたいだけのLP
• 例えば、「ただのペライチだから∼。1週間でで
きるよね？」ってやつ
• (※通称「ペライチ詐欺」)

20. そうしたサイトで考えるべきUI・UXとは？

21. ずばり、
• どうやってボタンを押させるか
• どうやって印象に残すか
• どうやってシェアさせるか
毎日使ってくれるユーザーにどう向き合うかという
より、
一度しか来ないユーザーを、どうやって捕まえるか

22. よく考えている・すぐできる具体例
• どうやってボタンを押させるか
• 押したくなるボタン
• どうやって印象に残すか
• 滞在時間を伸ばす手触り
• どうやってシェアさせるか
• 話題になる体験

23. 押したくなるボタン
• Lv.1
• とにかく押して欲しいものを差別化する&シェアな
り応募なり、目的を全うさせる
• 一枚しかないページでは、押してもらえるかは一
発勝負&搦め手も積極的に使う

24. 押したくなるボタン
例）ポケットフットボーラー事前予約ページ
• h#ps://games.kayac.com/pf/

25. 実装方法：

26. 簡単です。
CSS#Anima)onやgif動画を使うといいです

27. 滞在時間を伸ばす手触り
• Lv.2
• さわって気持ちがいいインタラクションをつける
• ページを操作して、関わってもらう時間を増やす
ことが、印象を残すことに繋がる

28. 滞在時間を伸ばす手触り
例)"HOME'S"×"サラリーマン山崎シゲル
• h#p://www.kayac.com/service/client/1214

29. 実装方法：

30. 簡単です。
CSS#Anima)onや連番pngを使うといいです

31. 話題になる体験
• Lv.3
• その一発でシェアされるくらいの体験をつくる
• 一言でシェアできる体験かどうか、すぐ再現でき
る体験かどうかも重要

32. 話題になる体験
例)"NARUTO展公式サイト「神威ボタン」
• h#p://naruto-ten.com/
• h#p://www.kayac.com/service/client/1221

33. 実装方法：
簡単です。
CSS#Transi*onを大胆に、ともかく大胆に使うとよいです

34. 反響ツイートの例
• NARUTO展のサイトの一番下にオビトがいて「ト
ップに戻る」ってやってるの、あれ押してみて！
• NARUTO展のホームページの一番下の「TOPに戻
る」がすごかった！トビにカムイで飛ばされた！

35. まとめ

36. まとめ
• 「HTMLファイ部」は、「HTML5を軸に、バズる
技術とユーザー体験をつくるチーム」に
• Webコンテンツを話題化するためには、一度しか
来ないユーザーを、どうやって捕まえるかという
観点からUI・UXを考えるのが大事
• ここで書いたような、いくつかのパターンがあ
るので、それらを外さないように作るのが大事

37. ありがとうございました！