Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that...
Search
meijin
October 21, 2019
Programming
3
2.1k
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that has no designer saved by Vuetify.
meijin
October 21, 2019
Tweet
Share
More Decks by meijin
See All by meijin
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
texmeijin
1
48
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
26k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
4
3.2k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
430
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.2k
個人開発がおすすめな理由
texmeijin
3
990
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
410
初めてESLintプラグインにコントリビュートした話
texmeijin
0
210
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
98
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
330
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
Team operations that are not burdened by SRE
kazatohiei
1
310
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Visualization
eitanlees
146
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
デザイナー不在の スタートアップが で救われている話 Vuetify @Meijin_garden
アジェンダ 1. 自己紹介 2. UIフレームワークを使う理由 3. Vuetifyの概要 4. 【実例】コンポーネントの運用 5.
運用しての所感 2
自己紹介
自己紹介 名人(@Meijin_garden) ※「名人さん」でTwitter検索たぶん1位 4 ㈱NoSchool CTO AWS/PHP/Ruby/Firebase/Nuxt/Scss/Pug 将棋、銭湯、ドラクエXI、高校野球 技術 仕事
趣味
経歴 5 不動産情報サイト LIFULL HOME’Sの開発 勉強質問サイト NoSchoolの開発 2016.04〜2019.03 2019.03〜 株式会社LIFULL
株式会社NoSchool 社員1,000名 社員2名
プロの家庭教師が無料で回答する勉強質問サイト https://noschool.asia NoSchoolの事業内容① 6 無料で家庭教師に 勉強の質問・回答 気に入った先生に 個別指導を依頼
2万件以上の質問/回答を 写真で検索できる機能を開発・販売 NoSchoolの事業内容② 7
技術スタック バックエンド • Laravel v5.7 • AWS • Firebase /
GCP • Algolia 8 フロントエンド • Nuxt.js v2.9.2 • Vuetify v2.0 • Pug / Scss • jQuery + blade
Vuetifyの概要
Vuetify 触ったことありますか? 一度やってみたかったやつ
Vuetifyとは Vue.js向けのUIフレームワーク 11 特長① 特長② 特長③ Material Design の仕様に準拠 props
や event emit, slot が多く活用 開発が速い(瞬く間にv2.0リリース)
UIフレームワークを 使おうと思った理由
一言でいうと スタートアップの開発サイクルに 合っている(と思った)から 13 スピード重視!! うおおお
まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 14 失敗 成功! ①爆速リリース 失敗
①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略
まわせPDCAサイクル ①企画 ②デザイン ③SEO対策 ④実装・リリース 15 失敗 成功! ①爆速リリース 失敗
①爆速リリース ①爆速リリース ②デザイン改善 ③SEO対策 普通の開発 超ベンチャーの開発 ④以下略 初期リリースから最高のデザインを 実現することはできない UIコンポーネントの 色合い、フォントサイズ、雰囲気は 合わせたい →UIフレームワークを採用しよう! しかし、最低でも
【実例】 コンポーネントの運用
Form inputs & controls • v-select • v-checkbox • v-img
• Vuelidate
Formが持つべき機能 18 入力 短文、長文、選択式、ファイル、日付… 検証 文字数、文字種別、最小最大値などの検証 送信 バックエンドのAPIにPOST / PUTする
Form に関する機能を まとめた Component を 内製しました
20 ①親からFormの仕様を渡す Page Component Form.vue • ラベル • プレースホルダー •
フォームの種類 • バリデーションの種類 渡されたObjectに基づき、 ラベルやプレースホルダー、 Validation付きのFormを 自動生成
②送信時に入力値を親へ$emit 21 Page Component Form.vue 送信ボタンの @click 時に 各 Form
の値を Object にまとめて $emit する 親はもらった値を よしなにサーバーサイドへ POST/PUTする
メリット / デメリット 22 ✓ 挙動をサイト全体で共通化できUXが良い ✓ Vue / Vuetify
に詳しくない開発メンバーでも実装可能 △ 込み入った仕様、見た目のFormは作りにくい
Components For SEO • v-breadcrumbs • v-pagination
Vuex経由でパンくずを生成 24 Page Component Breadcrumbs.vue v-breadcrumb Vuex asyncData()内で パンくずに必要なデータを StoreにSet
パンくずデータ Object Objectから 適切なパンくずを 自動生成
ページネーション① 25 Page Component Pagination.vue Props • 現在のページ • 全体のページ数
v-pagination
ページネーション② 26 Page Component Pagination @click で $emit • クリックされた
ページ番号(3) $router.push(…, { query: { page: $event } });
ページネーション実装時の注意 27 Page Component watchQuery: [“page”], NuxtではwatchQueryを指定! pageクエリが変化すると asyncData()以降を再実行
メリット / デメリット 28 ✓ LaravelのAPIとpageクエリの相性が◎ SEO関連の処理とアプリケーションが密結合しがち △ watchQueryを忘れる被害者が定期的に出る △
運用しての所感
Vuetifyの運用でやっていること 30 拡張 サイトの仕様に合わせ、 独自のComponentでVuetifyをWrapする SEO Vuetify単体ではSEOに考慮されていない PageコンポーネントやPluginで別途対応
Vuetifyだけではできないこと 31 UXの設計 経営者の目標 → UXへの落とし込み 情報設計 ユーザーの視線や慣れを意識した 要素の配置など
ワイヤーフレームを依頼 32 週1稼働のデザイナーさんにXDでワイヤーだけ依頼
XD色付け係 33
最後に
鋭意採用活動中! 35 ✓ Nuxt.jsとLaravelで次々に新規開発ができる! ✓ 勤務体系は週1の副業から応相談! e.g. 平均180PR / 月
【今の体制】 CEO + CTO + 週4フリーランス + 週1〜2の副業4人
鋭意採用活動中! 36 ✓ CGMなので中高生ユーザーの喜ぶ声が届く! ✓ スタートアップなので変化が多くて楽しい! 某KPI 月次300%成長
ご清聴 ありがとうございました @Meijin_garden