Webフロントエンド_デザインで学んだ2年間を総括

Webフロントエンド&デザインで学んだ2年間を総括 2019年4月15日 Frontrend x Bonfire Frontend ヤフー株式会社 内藤 秀彦 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

自己紹介 内藤 秀彦 @innovate_7110 大学では物理学を専攻 2017年新卒入社 @ヤフーショッピング フロントエンドエンジニア&デザイナー 2

CTR, CVRとは CTR Click Through Rate クリック率 CVR Conversion Rate コンバージョン率 ショッピングでのコンバージョンの定義は注文 3

アジェンダ 1. 入社から本配属まで 2. 本配属から2年目の終わりまで 3. 今後の課題・まとめ 4

入社から 本配属まで Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

入社から本配属まで 内定 10/1-3/31 入社 4/1-4/14 配属〜試用期間終了 4/17-6/30 7/1-9/30 学生から社会人への切り替え 基礎知識・スキルの習得 (業務を通じて) 経験学習の実践 7/1 エンジニア研修(基礎技術研修) 配属 OJT 内定時教育 入社 オンボーディング研修 4/17 デザイナー研修 配属 OJT フォローアップ研修 6

デザイナー研修(全社) - 情報設計 - ビジュアルデザイン - コーディング などを講義と実践形式で学ぶ 詳しくはコチラ https://linotice.tumblr.com/post/180372968509/20181122 7

配属先OJT研修(ショッピング) - デザインによるサービス改善 - UIパーツのコーディングお作法 8

デザインによるサービス改善 - サービスの解決したい課題を探す - チームで解決したい課題を決める - ビジネス貢献も踏まえ、無邪気にUI改善案 - プレゼンしてGOサインをいただき案件化 - 実装してABテスト実施 9

改善したい課題 集計期間:2017/06/01~07/01 集計端末:スマートフォン 50 46.68 45 37.33 40 35 30 25 20 15 14.84 15.5 10 ワンピース Tシャツ PS4 Macbook Pro 検索キーワード 課題 商品数が多いため、検索ボリュー ムの約6割を占める"抽象的なキー ワード"で商品が探しにくい 課題の裏付け ページネーションのCTRが"型番キー ワード"に比べて高い 10

UI改善案 現行 改善案 改善案 - 【その他条件で絞り込む】を【もっと絞 り込む】に変更 - 【もっと絞り込む】の下に絞り込み可能 な項目を表示 +α - ファーストビューで商品が見えるとCVR が高くなるので、CTRの低かった【発送 日を選択する】を削除 11

テスト時のUI (A, B, 既存) A B shopping.yahoo.co.jp shopping.yahoo.co.jp 課題 抽象的なキーワードで商品が探しに くい 解決策 絞り込みを利用しやすくするため 画面上部に絞り込み導線を追従 12

学び - CVRをUIのABテスト・改善で伸ばすノウハウ - デザインでいかにビジネス貢献するのか?という手法 - データを活用して課題やその裏付け、勝ち筋を探す経験 - テストで確かめたいことを1つ1つ分けて考える重要性 - 再現性の高い勝ち筋を見つけること 13

UIパーツのコーディングお作法 モジュール単位でパーツを実装する 検索補助ワード ワンピース 結婚式 ワンピース アディダス ニットワンピース ワンピース 結婚式 ワンピース アディダス ニットワンピース ワンピース 結婚式 ワンピース アディダス ニットワンピース ワンピース 結婚式 14

コーディングお作法(HTML) <div class="mdRelatedKeyword"> <dl> <dt class="elTitle" title="入力されたキーワードに対して、検索ログなどから抽出した 検索補助ワード </dt> <dd class="elBody"> <ul class="elItems"> <li class="elItem"><a href="#"><em>ワンピース</em> 結婚式</a></li> <li class="elItem"><a href="#"><em>ワンピース</em> アディダス</a></li> <li class="elItem"><a href="#">ニット<em>ワンピース</em></a></li> <li class="elItem"><a href="#"><em>ワンピース</em> 結婚式</a></li> <li class="elItem"><a href="#"><em>ワンピース</em> アディダス</a></li> <li class="elItem"><a href="#">ニット<em>ワンピース</em></a></li> <li class="elItem"><a href="#"><em>ワンピース</em> 結婚式</a></li> <li class="elItem"><a href="#"><em>ワンピース</em> アディダス</a></li> <li class="elItem"><a href="#">ニット<em>ワンピース</em></a></li> <li class="elItem"><a href="#"><em>ワンピース</em> 結婚式</a></li> </ul> </dd> </dl> </div> - モジュールルートの クラス名はmdから 始める - 要素はelから始める - mdの中にmdはNG 15

コーディングお作法(SCSS)
.mdRelatedKeyword {
@include moduleMargin($column: "main");
.elTitle {
display: inline-block;
padding: 0 5px;
font-size: 16px;
font-weight: bold;
vertical-align: top;
}
.elBody {
padding-left: 10px;
.elItems {
font-size: 0;
}
.elItem {
display: inline-block;
margin: 2px 0.
- SCSSで書いている
- カラーなどは変数で共通化を
図っている
- よく使うスタイル群については
mixinで呼び出せる
16

学び - モジュールという独立したパーツを持ち寄ってページを作 ると、モジュール単位の改修も行いやすい - SCSSでmdの中のelとすることで、大規模でも他のモ ジュールに影響を及ぼさないCSS管理を行うことができる - Gulpといったタスクランナーの知識 17

本配属から 2年目の終わりまで Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

本配属から2年目の終わりまで - CVRを伸ばす改善のサイクル - UIパーツの整理 - レガシーからモダンな開発環境へ - +α(データビジュアライゼーション) 19

CVRを伸ばすサイクル 課題を解決するテストを行う 結果から勝ち筋を見つける 勝ち筋に沿った施策を打つ 再現性を高める 20

なぜCVRを追うのか 取扱高をKPIに因数分解すると 取扱高 = 注文数 X 平均注文単価 注文数 = 注文者数 X 平均注文回数 注文者数 = UU X CVR となり自分の領域はCVRを追っていた 21

絞り込み 関連語 リッチ検索窓 22

行き止まりをなくす / 選択肢をたくさん見せる オートページャー サンドイッチ 23

テスト時の実装方法 小規模なUI変更 CSS上書きでUI調整 モジュール追加 テストモジュールを実装・開発 24

学び - 要素をKPIに因数分解して掛け算で考える - 勝ち筋を高い再現性のサイクルで磨き込むことの重要さ - 実装時にネストを深くしすぎると、テストなどでスタイル を上書きしにくくなってしまう 25

UIパーツの整理 UIパーツを整理する必要性 26

UIパーツの派生(ボタン) 27

UIパーツの整理 ボタン1つ取っても出面によって デザインが独自の進化を遂げていく 28

UIパーツの整理(ボタン) ボタン ボタンは"カートに入れる"や"購入を確定する"など決済系のものからページ遷移まで幅広く使用されます。 どのボタンを採用するかは、ページ内の目的によって決定されるため画面によって異なります。 ただし、共通の考え方として『HIGHとなるほど採用数が少なく、LOWに近づくほど増える』という概念があります。 これは重要なアクション(ボタン)を埋もれさせないためです。そのためバランスを考慮して画面設計して下さい。 HIGH MIDDLE LOW - ボタンを強弱について分類 - 大まかな利用基準を策定 - SCSSでmixin化 - モジュールのデザイン、ソー スコード、解説をまとめて確 認できるドキュメントを開発 29

学び - 要素を整理し、ルールを定めることの必要性 - デザインとソースコードを一元管理することで、実装によ るブレも減らすことができる - 出面ごとの個別最適に限界がありそうだという気づき 30

フロントエンドの開発環境 まさに今、劇的に変化している 31

レガシーな開発環境 PHPでのSSRから jQueryでDOMを操作 Carousel, Expand, Modal, Dialog, Stickyなどショッピング独 自のjQueryライブラリが存在 32

モダンな開発環境 ReactでAtomic Designを取 り入れたコンポーネントを作り NextでSSRしたりReduxも用 いてWebアプリケーション化 33

データ ビジュアライゼーション 膨大なデータを簡単かつ 直感的にインタラクティ ブに触って活用できる環 境作り 34

データの利活用 BI D3.jsで流通の内訳などを インタラクティブに可視化 できるベン図 35

ビッグデータの可視化 ビッグデータで新社会人の悩み を先に知る 詳しくはコチラ https://about.yahoo.co.jp/info/bigdata/special/2018/01/ 36

学び - データをインタラクティブなUI上で利活用できる環境を 作るのは、フロントエンド、デザインとの親和性が高い - やってみたいことを積極的に周囲に伝え、自分でもキャッ チアップしていけばチャンスにつながる 37

今後の課題・まとめ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

今後の課題 - 出面ごとに部分最適されたUIの全体最適 - モダンなフロントエンド技術のキャッチアップ 39

まとめ インハウスのデザイナー, エンジニアと して自分たちのサービスを磨き込んでい けるける経験はとても楽しい！ やってみたいことがあったら積極的に周 囲に伝えてみよう！！ 40