Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7fccfb690a818ed2f3a15fc21d426d5a?s=47 meijin
October 21, 2019

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

7fccfb690a818ed2f3a15fc21d426d5a?s=128

meijin

October 21, 2019
Tweet

Transcript

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

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

    運用しての所感 2
  3. 自己紹介

  4. 自己紹介 名人(@Meijin_garden) ※「名人さん」でTwitter検索たぶん1位 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. 2万件以上の質問/回答を 写真で検索できる機能を開発・販売 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 週1稼働のデザイナーさんに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