カヤックhtmlファイ部のui・ux (第57回 html5とか勉強会 / 2015.5.19)
TRANSCRIPT
第57回#HTML5とか勉強会カヤックHTMLファイ部のUI・UX
藤澤伸
大きく分けて２つ、• HTML5を名に関した部署で何が起きているか
• 「面白法人」が考えているニッチなUI・UX
という感じの話をします。
自己紹介
• 藤澤伸"(のびー)
• エンジニア
• 面白法人カヤック新卒３年目
• HTMLファイ部リーダー
• 「fnobi」で検索！
• h/p://twi/er.com/fnobi
• h/p://facebook.com/fnobi
• h/p://github.com/fnobi
• h/p://qiita.com/fnobi
【前編】HTMLファイ部の今
カヤック・クライアントワークチーム• h#p://www.kayac.com/service/client
• さまざまなお客さんからの依頼を受け、コンテンツ・アプリ等を制作
• Webで言えば、キャンペーンサイト・イベント公式サイト等の仕事が多い
• ざっくり言えば、バズらせるのが得意なチーム
2011/10/4、HTMLファイ部設立• 面白法人カヤックがHTMLファイ部の設立を発表！｜ニュース｜面白法人カヤック
• HTML5(HTML・CSS・Javascript)を扱う専門部署
• 要はMarkup6Engineer
• HTML5がいわゆるバズワードだったころ。ある種流行りに乗った部署だった。最新技術を追っているというアピール。
ところが
HTML5バブルの崩壊• 「HTML5!!」って言ってるだけでモテる時代ではなくなった
• ひたすらリッチなサイトだとかWebアプリだとか、いかにもHTML5！というような依頼は減ってきている
• 言うなればHTML5は、Webをアプリにする過程。お客さんにとってやりたいことが、アプリでもいい話ならアプリを作ればいい。
そして今
変わらないこと• 相変わらず、最新の技術を駆使したWebサイト実装
• grunt.js・gulp.js・coffee2script・es6・WebGL...
• 案件によって自由に組み合わせ。最近は開発環境周りの業界の方がやや元気。
• WebGLはちょっぴり流行ってきている。お仕事待ってます。
変わったこと
そして今• マークアップに限らない、よりハイブリットな知識を持つメンバー"が増えている
• アプリチーム兼任・サーバーチーム兼任も増えている
• そして、"UI/UXに関する考え方を持っていることも、より重要に
• 企画を考えて、絵をつくるチームと隣にいるからこそできる、頭のひねり方を生かす
【後編】ペライチサイトの
UI・UX
UI・UXと言うと、
スマホアプリ・Webサービス等の印象がつよい？
でもわれわれが主に作っているのは、
• 例えば、一度しか見られないキャンペーンサイト
• 例えば、バズらせたいだけのLP
• 例えば、「ただのペライチだから～。1週間でできるよね？」ってやつ
• (※通称「ペライチ詐欺」)
そうしたサイトで考えるべきUI・UXとは？
ずばり、• どうやってボタンを押させるか
• どうやって印象に残すか
• どうやってシェアさせるか毎日使ってくれるユーザーにどう向き合うかというより、一度しか来ないユーザーを、どうやって捕まえるか
よく考えている・すぐできる具体例• どうやってボタンを押させるか
• 押したくなるボタン
• どうやって印象に残すか
• 滞在時間を伸ばす手触り
• どうやってシェアさせるか
• 話題になる体験
押したくなるボタン• Lv.1
• とにかく押して欲しいものを差別化する&シェアなり応募なり、目的を全うさせる
• 一枚しかないページでは、押してもらえるかは一発勝負&搦め手も積極的に使う
実装方法：
簡単です。CSS#Anima)onやgif動画を使うといいです
滞在時間を伸ばす手触り• Lv.2
• さわって気持ちがいいインタラクションをつける
• ページを操作して、関わってもらう時間を増やすことが、印象を残すことに繋がる
滞在時間を伸ばす手触り例)"HOME'S"×"サラリーマン山崎シゲル
• h#p://www.kayac.com/service/client/1214
実装方法：
簡単です。CSS#Anima)onや連番pngを使うといいです
話題になる体験• Lv.3
• その一発でシェアされるくらいの体験をつくる
• 一言でシェアできる体験かどうか、すぐ再現できる体験かどうかも重要
話題になる体験例)"NARUTO展公式サイト「神威ボタン」
• h#p://naruto-ten.com/
• h#p://www.kayac.com/service/client/1221
実装方法：簡単です。
CSS#Transi*onを大胆に、ともかく大胆に使うとよいです
反響ツイートの例• NARUTO展のサイトの一番下にオビトがいて「トップに戻る」ってやってるの、あれ押してみて！
• NARUTO展のホームページの一番下の「TOPに戻る」がすごかった！トビにカムイで飛ばされた！
まとめ
まとめ• 「HTMLファイ部」は、「HTML5を軸に、バズる技術とユーザー体験をつくるチーム」に
• Webコンテンツを話題化するためには、一度しか来ないユーザーを、どうやって捕まえるかという観点からUI・UXを考えるのが大事
• ここで書いたような、いくつかのパターンがあるので、それらを外さないように作るのが大事
ありがとうございました！