Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)

9.120 Aufrufe

Veröffentlicht am

【前編】 HTMLファイ部の今
【後編】 ペライチサイトの UI・UX

「HTML5を名に関した部署で何が起きているか」という話と、「面白法人」が考えているニッチなUI・UXに関する話です。

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)

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

×