デザイナー不在のスタートアップが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