Tweet
Tweet

Slide 1

Slide 1 text

デザイナー不在の スタートアップが で救われている話 Vuetify @Meijin_garden

Slide 2

Slide 2 text

アジェンダ 1. 自己紹介 2. UIフレームワークを使う理由 3. Vuetifyの概要 4. 【実例】コンポーネントの運用 5. 運用しての所感 2

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

自己紹介 名人（@Meijin_garden） ※「名人さん」でTwitter検索たぶん１位 4 ㈱NoSchool CTO AWS/PHP/Ruby/Firebase/Nuxt/Scss/Pug 将棋、銭湯、ドラクエXI、高校野球 技術 仕事 趣味

Slide 5

Slide 5 text

経歴 5 不動産情報サイト LIFULL HOME’Sの開発 勉強質問サイト NoSchoolの開発 2016.04〜2019.03 2019.03〜 株式会社LIFULL 株式会社NoSchool 社員1,000名 社員2名

Slide 6

Slide 6 text

プロの家庭教師が無料で回答する勉強質問サイト
 https://noschool.asia NoSchoolの事業内容① 6 無料で家庭教師に 勉強の質問・回答 気に入った先生に 個別指導を依頼

Slide 7

Slide 7 text

２万件以上の質問/回答を 写真で検索できる機能を開発・販売 NoSchoolの事業内容② 7

Slide 8

Slide 8 text

技術スタック バックエンド • Laravel v5.7 • AWS • Firebase / GCP • Algolia 8 フロントエンド • Nuxt.js v2.9.2 • Vuetify v2.0 • Pug / Scss • jQuery + blade

Slide 9

Slide 9 text

Vuetifyの概要

Slide 10

Slide 10 text

Vuetify 触ったことありますか？ 一度やってみたかったやつ

Slide 11

Slide 11 text

Vuetifyとは Vue.js向けのUIフレームワーク 11 特長① 特長② 特長③ Material Design の仕様に準拠 props や event emit, slot が多く活用 開発が速い（瞬く間にv2.0リリース）

Slide 12

Slide 12 text

UIフレームワークを 使おうと思った理由

Slide 13

Slide 13 text

一言でいうと スタートアップの開発サイクルに
 合っている（と思った）から 13 スピード重視！！ うおおお

Slide 14

Slide 14 text

まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 14 失敗 成功！ ①爆速リリース 失敗 ①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略

Slide 15

Slide 15 text

まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 15 失敗 成功！ ①爆速リリース 失敗 ①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略 初期リリースから最高のデザインを 実現することはできない UIコンポーネントの 色合い、フォントサイズ、雰囲気は 合わせたい →UIフレームワークを採用しよう！ しかし、最低でも

Slide 16

Slide 16 text

【実例】 コンポーネントの運用

Slide 17

Slide 17 text

Form inputs & controls • v-select • v-checkbox • v-img • Vuelidate

Slide 18

Slide 18 text

Formが持つべき機能 18 入力 短文、長文、選択式、ファイル、日付… 検証 文字数、文字種別、最小最大値などの検証 送信 バックエンドのAPIにPOST / PUTする

Slide 19

Slide 19 text

Form に関する機能を まとめた Component を 内製しました

Slide 20

Slide 20 text

20 ①親からFormの仕様を渡す Page Component Form.vue • ラベル • プレースホルダー • フォームの種類 • バリデーションの種類 渡されたObjectに基づき、 ラベルやプレースホルダー、 Validation付きのFormを 自動生成

Slide 21

Slide 21 text

②送信時に入力値を親へ$emit 21 Page Component Form.vue 送信ボタンの @click 時に 各 Form の値を Object にまとめて $emit する 親はもらった値を よしなにサーバーサイドへ POST/PUTする

Slide 22

Slide 22 text

メリット / デメリット 22 ✓ 挙動をサイト全体で共通化できUXが良い ✓ Vue / Vuetify に詳しくない開発メンバーでも実装可能 △ 込み入った仕様、見た目のFormは作りにくい

Slide 23

Slide 23 text

Components For SEO • v-breadcrumbs • v-pagination

Slide 24

Slide 24 text

Vuex経由でパンくずを生成 24 Page Component Breadcrumbs.vue v-breadcrumb Vuex asyncData()内で パンくずに必要なデータを StoreにSet パンくずデータ Object Objectから 適切なパンくずを 自動生成

Slide 25

Slide 25 text

ページネーション① 25 Page Component Pagination.vue Props • 現在のページ • 全体のページ数 v-pagination

Slide 26

Slide 26 text

ページネーション② 26 Page Component Pagination @click で $emit • クリックされた
 ページ番号(3) $router.push(…, 
 { query: { page: $event } });

Slide 27

Slide 27 text

ページネーション実装時の注意 27 Page Component watchQuery: [“page”], NuxtではwatchQueryを指定！ pageクエリが変化すると asyncData()以降を再実行

Slide 28

Slide 28 text

メリット / デメリット 28 ✓ LaravelのAPIとpageクエリの相性が◎ SEO関連の処理とアプリケーションが密結合しがち △ watchQueryを忘れる被害者が定期的に出る △

Slide 29

Slide 29 text

運用しての所感

Slide 30

Slide 30 text

Vuetifyの運用でやっていること 30 拡張 サイトの仕様に合わせ、 独自のComponentでVuetifyをWrapする SEO Vuetify単体ではSEOに考慮されていない PageコンポーネントやPluginで別途対応

Slide 31

Slide 31 text

Vuetifyだけではできないこと 31 UXの設計 経営者の目標 → UXへの落とし込み 情報設計 ユーザーの視線や慣れを意識した 要素の配置など

Slide 32

Slide 32 text

ワイヤーフレームを依頼 32 週１稼働のデザイナーさんにXDでワイヤーだけ依頼

Slide 33

Slide 33 text

XD色付け係 33

Slide 34

Slide 34 text

最後に

Slide 35

Slide 35 text

鋭意採用活動中！ 35 ✓ Nuxt.jsとLaravelで次々に新規開発ができる！ ✓ 勤務体系は週1の副業から応相談！ e.g. 平均180PR / 月 【今の体制】 CEO ＋ CTO ＋ 週4フリーランス ＋ 週1〜2の副業4人

Slide 36

Slide 36 text

鋭意採用活動中！ 36 ✓ CGMなので中高生ユーザーの喜ぶ声が届く！ ✓ スタートアップなので変化が多くて楽しい！ 某KPI 月次300%成長

Slide 37

Slide 37 text

ご清聴 ありがとうございました @Meijin_garden