デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that has no designer saved by Vuetify.

Transcript

1. デザイナー不在の スタートアップが で救われている話 Vuetify @Meijin_garden
2. アジェンダ 1. 自己紹介 2. UIフレームワークを使う理由 3. Vuetifyの概要 4. 【実例】コンポーネントの運用 5. 運用しての所感 2
3. 自己紹介
4. 自己紹介 名人（@Meijin_garden） ※「名人さん」でTwitter検索たぶん１位 4 ㈱NoSchool CTO AWS/PHP/Ruby/Firebase/Nuxt/Scss/Pug 将棋、銭湯、ドラクエXI、高校野球 技術 仕事 趣味
5. 経歴 5 不動産情報サイト LIFULL HOME’Sの開発 勉強質問サイト NoSchoolの開発 2016.04〜2019.03 2019.03〜 株式会社LIFULL 株式会社NoSchool 社員1,000名 社員2名
6. プロの家庭教師が無料で回答する勉強質問サイト
 https://noschool.asia NoSchoolの事業内容① 6 無料で家庭教師に 勉強の質問・回答 気に入った先生に 個別指導を依頼
7. ２万件以上の質問/回答を 写真で検索できる機能を開発・販売 NoSchoolの事業内容② 7
8. 技術スタック バックエンド • Laravel v5.7 • AWS • Firebase / GCP • Algolia 8 フロントエンド • Nuxt.js v2.9.2 • Vuetify v2.0 • Pug / Scss • jQuery + blade
9. Vuetifyの概要
10. Vuetify 触ったことありますか？ 一度やってみたかったやつ
11. Vuetifyとは Vue.js向けのUIフレームワーク 11 特長① 特長② 特長③ Material Design の仕様に準拠 props や event emit, slot が多く活用 開発が速い（瞬く間にv2.0リリース）
12. UIフレームワークを 使おうと思った理由
13. 一言でいうと スタートアップの開発サイクルに
 合っている（と思った）から 13 スピード重視！！ うおおお
14. まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 14 失敗 成功！ ①爆速リリース 失敗 ①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略
15. まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 15 失敗 成功！ ①爆速リリース 失敗 ①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略 初期リリースから最高のデザインを 実現することはできない UIコンポーネントの 色合い、フォントサイズ、雰囲気は 合わせたい →UIフレームワークを採用しよう！ しかし、最低でも
16. 【実例】 コンポーネントの運用
17. Form inputs & controls • v-select • v-checkbox • v-img • Vuelidate
18. Formが持つべき機能 18 入力 短文、長文、選択式、ファイル、日付… 検証 文字数、文字種別、最小最大値などの検証 送信 バックエンドのAPIにPOST / PUTする
19. Form に関する機能を まとめた Component を 内製しました
20. 20 ①親からFormの仕様を渡す Page Component Form.vue • ラベル • プレースホルダー • フォームの種類 • バリデーションの種類 渡されたObjectに基づき、 ラベルやプレースホルダー、 Validation付きのFormを 自動生成
21. ②送信時に入力値を親へ$emit 21 Page Component Form.vue 送信ボタンの @click 時に 各 Form の値を Object にまとめて $emit する 親はもらった値を よしなにサーバーサイドへ POST/PUTする
22. メリット / デメリット 22 ✓ 挙動をサイト全体で共通化できUXが良い ✓ Vue / Vuetify に詳しくない開発メンバーでも実装可能 △ 込み入った仕様、見た目のFormは作りにくい
23. Components For SEO • v-breadcrumbs • v-pagination
24. Vuex経由でパンくずを生成 24 Page Component Breadcrumbs.vue v-breadcrumb Vuex asyncData()内で パンくずに必要なデータを StoreにSet パンくずデータ Object Objectから 適切なパンくずを 自動生成
25. ページネーション① 25 Page Component Pagination.vue Props • 現在のページ • 全体のページ数 v-pagination
26. ページネーション② 26 Page Component Pagination @click で $emit • クリックされた
 ページ番号(3) $router.push(…, 
 { query: { page: $event } });
27. ページネーション実装時の注意 27 Page Component watchQuery: [“page”], NuxtではwatchQueryを指定！ pageクエリが変化すると asyncData()以降を再実行
28. メリット / デメリット 28 ✓ LaravelのAPIとpageクエリの相性が◎ SEO関連の処理とアプリケーションが密結合しがち △ watchQueryを忘れる被害者が定期的に出る △
29. 運用しての所感
30. Vuetifyの運用でやっていること 30 拡張 サイトの仕様に合わせ、 独自のComponentでVuetifyをWrapする SEO Vuetify単体ではSEOに考慮されていない PageコンポーネントやPluginで別途対応
31. Vuetifyだけではできないこと 31 UXの設計 経営者の目標 → UXへの落とし込み 情報設計 ユーザーの視線や慣れを意識した 要素の配置など
32. ワイヤーフレームを依頼 32 週１稼働のデザイナーさんにXDでワイヤーだけ依頼
33. XD色付け係 33
34. 最後に
35. 鋭意採用活動中！ 35 ✓ Nuxt.jsとLaravelで次々に新規開発ができる！ ✓ 勤務体系は週1の副業から応相談！ e.g. 平均180PR / 月 【今の体制】 CEO ＋ CTO ＋ 週4フリーランス ＋ 週1〜2の副業4人
36. 鋭意採用活動中！ 36 ✓ CGMなので中高生ユーザーの喜ぶ声が届く！ ✓ スタートアップなので変化が多くて楽しい！ 某KPI 月次300%成長
37. ご清聴 ありがとうございました @Meijin_garden