食べチョク開発者ブログ

https://tech.tabechoku.com/

食べチョクエンジニアによるプロダクト開発ブログ

フィード

記事のアイキャッチ画像
デザインチームの成長を加速する!内省(リフレクション)の技術
はてなブックマークアイコン 1
食べチョク開発者ブログ
こんにちは、松久です。 各自で「ふりかえり」をして、人事評価がされます。 私も「ふりかえり」をするのですが難しいです。適切な「ふりかえり」だったのかわからず、手探りで行うことが難しく感じます。 そこで「ふりかえり」をどうやっているのか、まとめてみました。 ふりかえりとはなにか 経験したことを身につける(自分の知恵)にすることです。 反省する(過ちを認める)ことが「ふりかえり」ではないです。 経験したことを身につけるというのは、以下の3つのステップに分解できそうです。 認知:知った・(他者から聞いて)知っている 行動:使った 結果:成功・失敗 経験とは、知ったことをもとに行動し結果を知った状態に…
10日前
記事のアイキャッチ画像
トイルを減らすデザインチームの行動
食べチョク開発者ブログ
こんにちは、松久です。 日々の"業務"の中には、手作業が定期的に必要で、必要だけれどデザインチームでなくてもいいし、サービスの変化とともに増えていることに気づく業務があります。こうした業務を「トイル」と呼んで減らすようにしています。 トイルとは何か Google がサイト信頼性エンジニア(SRE)の指標の1つとして「トイル」を挙げています。詳しくは「SRE の原則に沿ったトイルの洗い出しとトラッキング」で紹介されています。 トイルとは、手作業、繰り返される、自動化が可能、戦術的、長期的な価値がない、サービスの成長に比例して増加する、といった特徴を持つ作業です。 デザインチームでのトイルの例とし…
1ヶ月前
記事のアイキャッチ画像
デザインチームに新メンバーを迎えるオンボーディングのくふう
食べチョク開発者ブログ
こんにちは、松久です。 昨年(2023 年)、デザインチームに新しいデザイナーが加わりました。新しいデザイナーがすぐ活躍しやすいようにオンボーディングを実施しました。 デザインチームでのオンボーディングとは デザインチームでのオンボーディングが久しぶりなので、改めてオンボーディングの目的を定めました。 入社してきた人が、早く実力を発揮しやすくすること(自分がチームでやっていけそうという感覚を手に入れる) 入社している人が当たり前と思っていたことを改めて確認する機会になること 目的を「入ってくる側」「受け入れ側」の 2 つに分けて、オンボーディングの実施計画を用意しました。 受け入れ側のオンボー…
2ヶ月前
記事のアイキャッチ画像
「ふりかえり」から始まる2024年デザインチームのカイゼンプロジェクト
食べチョク開発者ブログ
こんにちは、松久です。 先月、デザインチームで 2023 年の「ふりかえり」をはじめました。はじめて、1 ヶ月経ちますが、まだ終わっていません。終わっていませんが、なかなか良さそうだと感じています。 「ふりかえり」をすることにした理由 2023 年は、チームでの「ふりかえり」をしてきていませんでした。してこなかった理由はいくつかあります。 「ふりかえり」からのカイゼン行動ができていないことがあるため デザイナーが複数のチームで活動しており、そのチームでの「ふりかえり」を重視した 目の前の期日がある仕事を優先してしまうので「ふりかえりをした」で終わっていました。カイゼンの実施まで辿り着くことが出…
3ヶ月前
記事のアイキャッチ画像
デザインチームの2023年のブログを振り返り!変化と継続、そして2024年への動き出し #デザイン #ブログ
食べチョク開発者ブログ
こんにちは、松久です。 デザインチームの 2023 年のブログ記事をふりかえり執筆後から変わったことや、変わらなかったことを書き出すことで、2024 年に向けて動き出せるようにします。 Figma のファイル管理ルール( 2022 年 12 月 ) ファイル名については、デザインチームでは浸透が進み当たり前の状態になっています。変える話もいまのところなく、やってよかったです。 マスターデータの運用は、GitHub Projects で「🏁 マスターデータに反映待ち」を用意し、ここを通らないと作業完了とはしないことにしました。ただ、マスターデータへの反映が滞りがちなところがあるので、課題は残って…
4ヶ月前
記事のアイキャッチ画像
画像制作依頼チェックリストから普段のヒアリング内容を確認した話
食べチョク開発者ブログ
こんにちは、松久です。 食べチョクでは様々なところで画像が作られています。 これらの画像は、様々な部署からの依頼をうけてデザインチームで作ることが多いです。一部、テンプレートから画像を作っているのもありますが、まだ、デザインチームで作ることは多いです( テンプレートを使った画像作成は「バナー作成をデザイナー以外でも作成する運用をはじめました」参照)。 大雑把な画像の作成依頼の時があります。このときは、具体的な形にするまでにヒアリングをして制作を進めていきます。 制作前のヒアリングに時間がどうしても必要になっています。この時間を短縮したり、事前に検討してもらえるようにするため、社内のドキュメント…
5ヶ月前
記事のアイキャッチ画像
デザインと上手くお付き合いする方法を社内で発表した
食べチョク開発者ブログ
こんにちは、松久です。 株式会社ビビッドガーデンでは、「週次 Sync & Share の会 」が開催されています。 (だいたい)毎週、各チームから全社に向けて、学んだことを伝えたり、聞いたりしています。 デザインチームから Sync & Share 会で「デザインと上手くお付き合いする話」というテーマで、デザインチームとより上手に仕事をする方法がわかることを目的とした発表をしました。 発表テーマを決めた気持ち 「デザインと上手くお付き合いする話」というテーマだと、今は「上手くできていない」と聞こえます。正直、すべてが上手くいっているとは言えません。上手くできているところもあるので、上手くでき…
6ヶ月前
記事のアイキャッチ画像
GitHub Projects でデザインチームのタスク管理をするノウハウ
食べチョク開発者ブログ
こんにちは、松久です。 デザインチームでは、GitHub Projects でタスク管理しています。 タスク管理する理由はいくつかあります。 「食べチョク」の改善を少しでも進めるため チームで効率的に改善を進めるため 他のチームと一緒に仕事をするため チームで成果を出せているのかを確認するため GitHub Projects を使って「カンバン」を参考にして管理をしています。 なぜ GitHub Projects を使っているのか GitHub が、職種関係なく導入されています。GitHub issue で、タスクを書き出して GitHub Projects に集約がある程度されている状況がす…
7ヶ月前
記事のアイキャッチ画像
おいしそうが伝わる写真を選ぶ原則をチームで共有した
食べチョク開発者ブログ
こんにちは、松久です。 「食べチョク」では、キャンペーンなどで使うバナー・キービジュアルを自社で作成しています。作成する時に使う写真は、素材サイトで配布・販売されている写真や、生産者さんが撮影された写真を使います。これらの写真から使用する写真を選ぶのは、時間がかかります。また、選んだとしても、デザインレビューで「もう少しシズル感のある写真がいい」という指摘をもらうこともあります。そこで、写真を選ぶ基準をデザインチームで認識を揃えることにしました。 企画によって写真選びの基準は違う 「【濃厚派?さわやか派?】あなた好みの「いちじく」集めました!」という企画を公開しました。品目・品種の違いを味わっ…
8ヶ月前
記事のアイキャッチ画像
桃やぶどうのような同じ品目でバナーを作る前に事前準備したこと
食べチョク開発者ブログ
こんにちは、松久です。 「食べチョク」では、桃、ぶどう、梨の特集をしています。 特集では、キービジュアルや「チャート」と呼ばれる品種の収穫・販売時期を 1 枚の画像にまとめています。他にも「桃占い」というコンテンツの作成もありました。これらの画像を作成するにあたり、いくつか悩んだことや、取り組んだことがあります。 同じ品目に関するビジュアルを数種類作る難しさ 桃について固さから品種を選ぶ企画がスタートすることになり、キービジュアルが必要という話と「チャート」の画像、LINE などの広告用の画像を作ることになり始めてみて気づいたことが 2 つあります。 1 つめは、同じ「桃」という品目で画像を数…
9ヶ月前
記事のアイキャッチ画像
「似ているけれど少し違う色」を減らす取り組み
食べチョク開発者ブログ
こんにちは、松久です。 UI を作るときに、色は定義されている中から選ぶのを基本にしています。 色の定義が Figma で行われ、実装に反映され、違う場合は Stylelint で指摘される運用がされています。 色の運用が進んできたので、過去に定義した色や、デザイナー間で色が共有されていなかったために起きた「似ているけれど少し違う色」を減らす対応をすすめています。 似ている少し違う色がある問題 「似ているけれど少し違う色」がある状態は、使っている人に「なんとなく、まとまりに欠ける」印象を与えます。ブランドイメージを下げたり、いい買い物した、という印象を下げることもあります。 デザイナーや実装者…
10ヶ月前
記事のアイキャッチ画像
ふりかえりからデザイナー同士のミーティングを改善しました
食べチョク開発者ブログ
こんにちは、松久です。 以前、「デザイナー同士で行う 3 つのミーティング設計」というお話を書きました。そこから、半年ぐらい運用していくなかで、変えたことがあります。 変わらないこと 大きく 3 つのミーティングがあることは変わりません。 プランニング・交通整理 Designer Team Discussion Monthly Update ミーティングの数も変わらず、時間も変わっていません。 変わったこと Designer Team Discussion が少し変わりました。 以前は話したことを「📝🍵🍡」の絵文字をつけて、Slack のデザイナーチャンネルにメモしていました。そこから、取り組…
1年前
記事のアイキャッチ画像
RubyKaigi参加者向け飲食店情報
食べチョク開発者ブログ
ようこそ!松本へ! こんにちは!ビビッドガーデンの美味しいものハンター兼エンジニアのy-hakutakuです。 弊社は今週5月11日〜13日にかけて開催される RubyKaigi 2023 で ローカルフードスポンサー として協賛しています。 オフライン会場ではブース出展をしており、地元生産者さんの食材やプレゼントありのクイズ企画を実施していますのでぜひお立ち寄りください! せっかく松本まできたし、美味いものを食べたい おっと、ちょっと当日自分がどういう言い方をしたか覚えてないんですが、正確に言うと、若干数のお弁当の配布の用意もあります。が、全員分の食数も食べるスペースも全然ないので、参加者の…
1年前
記事のアイキャッチ画像
FigmaとSCSSで色の定義を合わせるための運用方法
食べチョク開発者ブログ
こんにちは、松久です。 食べチョクでは、デザインツールとして Figma を使っています。色の定義を Figma の Color Styles で管理しています。 管理はしているものの SCSS には反映できていない状態でした。このままだと何が管理されている色なのかエンジニアとデザイナーの認識が揃わなくなります。そこで、Figma の Color Styles と、SCSS で用意した色の変数を合わせられる状態を作っていくことにしました。 色を定義するまで 1 年前ぐらいに UI の色の定義の再確認をして、一部曖昧なところは残りつつも SCSS の変数の定義をしました。 決まっていない部分があ…
1年前
記事のアイキャッチ画像
今年もやります!! RubyKaigi 2023の"Local Food Sponsor"。長野の絶品食材をご堪能あれ
食べチョク開発者ブログ
こんにちは。プロダクト開発チームの Engineering Manager 兼 人事の @hirashun です。 今年もビビッドガーデンはRubyKaigiに"Local Food Sponsor"として協賛します。Rubyコミュニティと長野の地に感謝を込めて、地元長野の絶品食材をお届けします! 産直通販サイト「食べチョク」が「RubyKaigi 2023」にLocal Food Sponserとして協賛。当日収穫した新鮮なりんごなど長野県のこだわり食材を会場で配布。|(株)ビビッドガーデン/食べチョクのプレスリリース 昨年に続き、やっていきます! 利用率No.1の産直通販サイト「食べチョク…
1年前
記事のアイキャッチ画像
バナー作成をデザイナー以外でも作成する運用をはじめました
食べチョク開発者ブログ
こんにちは。松久です。 キャンペーン、ニュースリリース、LINE など様々な場面で使われる画像は、デザイナーのみが制作していました。デザイナーだけで制作するには限界があり、作成の一部をデザイナー以外でできるようにする取り組みを行っているお話です。 画像を作成することが増えてきた いろいろな施策が実施される体制になり画像の作成数が増えてきました。 急ぎの画像作成も増加し、一ヶ月間で UI 以外のデザイナーの取り組みの半分が画像作成になっていることもあります。 種類、目的が複数種あり、以下のような画像を作成しています。 サイトトップのバナー ニュースリリースの画像 LINE のリッチメッセージ L…
1年前
記事のアイキャッチ画像
Figma の操作を方法学んでデザインデーターができるまでの過程を知る
食べチョク開発者ブログ
こんにちは、松久です。 食べチョクでは Figma をデザインツールとして使っています。デザイナーが作った Figma のデザインデータを見てエンジニアはHTML/CSS を書いています。このとき、わかりにくいデザインデータを見かけるときがあります。解決の糸口をみつけるために、Figma の使い方を知ろうと取り組んでみた話です。 何から始めるかを決める 新しい技術を学ぶ時は、チュートリアルがあればチュートリアルから始めるのを基本にしています。 Figma のチュートリアルとして、公式のYouTube動画を今回は使いました。このYouTube動画だけでチュートリアルとしては十分な量があります。全…
1年前
記事のアイキャッチ画像
ペアデザインとモブデザインを行いデザインデータを作る
食べチョク開発者ブログ
こんにちは。松久です。 デザインデータを作るとき、デザイナーが一人で作業をすることもありますが、複数のデザイナーや、デザイナー以外の職能の人と一緒に取り組む事も少しづつ増えています。 現在、どのようにデザインデータを作っているのかを紹介します。 デザインデータができるまで 食べチョクで、デザインデータができるまでの大まかな行程は下記の通りです。 施策の目的を整理する。資料を集める。 施策の目的にそったデザインの初稿を作る 関係者で見ながら作って確認する( モブデザイン・ペアデザイン ) デザイナー同士で確認・検討をする(デザインレビュー) 関係者で合意する( デザインが確定 ) 今回は 3〜4…
1年前
記事のアイキャッチ画像
Figma のファイル管理ルールを決めて業務を円滑にする取り組み
食べチョク開発者ブログ
こんにちは。食べチョクの松久です。 今回は、複数人で Figma のファイルを管理するために工夫していること、悩んでいることも含めてどのようにしているかを紹介します。 ファイル管理をする目的 ファイルを管理する目的は、なんでしょうか。 複数人でデザインを行う体制のために、下記のことを実現するためだと捉えました。 過去の積み重ねによる一貫性(UIや、らしさ・ブランディング)を保つため デザイナーが過去のファイルを見つけやすくする デザイナー以外もデザインに関われる状態を作り、全員でプロダクトを作るため デザイナー以外もファイルを見られる状態を作る 上記の目的のために、今までの管理方法を踏まえなが…
1年前
記事のアイキャッチ画像
テスト改善チーム活動の軌跡(総集編)とチームの進め方
食べチョク開発者ブログ
みなさま、お久しぶりです。QA エンジニアのujeです。 今回、テスト改善チームの活動が一段落したので総集編としてこれまでの取り組みを振り返ります。 改善チームの始まりはこちらの食べチョクの自動テスト改善活動 〜これまでとこれから〜をお読みください。 現在、チームは目標達成を契機に 10 月末で解散となり、メンバーは食べチョク開発業務に集中しています。 私を含めて 8 名で食べチョクの開発業務も並行だったので、1 人あたり週に数時間の作業時間でした。 そのため、少しずつの活動にはなりましたが多岐に渡って遂行できたと感じています。 ここではその成果一覧とその時のブログ記事をまとめました。 成果 …
1年前
記事のアイキャッチ画像
テストのカバレッジをコツコツ上げた話
食べチョク開発者ブログ
こんにちは、endo と kawabata です。 今回はプロダクトチーム内の自動テスト改善チームでコツコツカバレッジを上げた取り組みと振り返りのお話をしたいと思います。 ここでテストのカバレッジを上げているのは、RSpec でのお話になります。 テストのカバレッジを上げていこうというお話は、こちらの食べチョクの自動テスト改善活動 〜これまでとこれから〜のお話からきています。 ゴールを設定せずに活動するのは良くないので、10 月末までにカバレッジを 80%まで上げるということを目標に設定しました。 80%まで上がれば広範囲をカバーできているだろうというざっくりとした見立てです。 今回の取り組み…
1年前
記事のアイキャッチ画像
デザイナー同士で行う3つのミーティング設計
食べチョク開発者ブログ
こんにちは。食べチョクの松久です。 今回は、デザイナーの活動を支えるミーティングをどうやっているか紹介します。デザイナーが関係するミーティングは3つあり、それぞれのミーティングの目的を説明していきます。 プランニング・交通整理 月・水・金曜日に施策の整理をしています。1回 30分程度です。 デザイナーが行うことは、ユニットに所属する施策以外にも、マーケティングや広報など他の部署・組織と一緒に行う施策があります。そこで、施策の状況の確認や、新しい施策の話について確認する必要があります。 施策は全て、GitHub issue に記載され、GitHub Projects にある ボードで管理をしてい…
2年前
記事のアイキャッチ画像
デザイナーへの依頼数を GitHub CLI と jq を使って集計する
食べチョク開発者ブログ
こんにちは。食べチョクの松久です。 今回は、デザイナーへの依頼数を GitHub CLI と jq を使って集計している話を紹介します。 どうして、依頼数を計測することになったのか、どうやって GitHub CLI と jq を使って集計しているのか、を順番に説明していきます。 組織の中でのデザイナーの位置付け 最初に、「食べチョク」を作る組織の中でのデザイナーと、エンジニア、プロダクトマネージャーの関係は下記の図の通りです。 2022年9月現在の組織図 「食べチョク」を作る組織は、チームトポロジーを原則としています。 2022年9月現在、「プロダクトチーム」にミッションを持った「ユニット」が…
2年前
記事のアイキャッチ画像
RubyKaigi 2022で"Mie Food Sponsor"をします。持ってけ楽しめ三重食材!
食べチョク開発者ブログ
ビビッドガーデンは"Mie Food Sponsor"として三重のこだわり食材を携えてRubyKaigi 2022に協賛します。こだわりをもってRubyで開発を続けるみなさんに、三重の生産者の方々のこだわりをたっぷりお届けします。
2年前
記事のアイキャッチ画像
食べチョクの自動テスト実行速度を2倍以上速くした
食べチョク開発者ブログ
皆さんこんにちは、エンジニアの久保と金田一です。 今回は、食べチョクの自動テスト改善チームが取り組んでいるテスト実行速度の改善についてお話しいたします。 自動テスト改善チームとは何か?について知りたい方は、以下のエントリーをご覧ください。 食べチョクの自動テスト改善活動 〜これまでとこれから〜 食べチョクにおける自動テストの現状 食べチョクでは、GitHub Actions のワークフローを使って、push をトリガーに自動テストを実行しています。食べチョクのリポジトリには System Spec までを含んでいて、E2E は別リポジトリとなっています。 メンバーが増えて体制が整ってきたことも…
2年前
記事のアイキャッチ画像
RSpec実行時のレポート情報をクエリで可視化する
食べチョク開発者ブログ
どうもはじめまして。 muryoimpl です。 前回のエントリ 食べチョクの自動テスト改善活動 〜これまでとこれから〜 で、自動テスト改善チームが発足したことを書きましたが、今回はその活動の中で実施した、RSpec による自動テストのカバレッジのデータ収集の自動化と、そのデータを利用した可視化について書きたいと思います。 これまではどう可視化していたか 食べチョクは Ruby on Rails で動いており、バックエンドの自動テストは RSpec を使って書いています。 テストカバレッジは定番の SimpleCov で計測して結果を HTML に出力し、テストケースごとの実行情報は RSpe…
2年前
記事のアイキャッチ画像
食べチョクの自動テスト改善活動 〜これまでとこれから〜
食べチョク開発者ブログ
みなさん初めまして。 QAエンジニアのujeです。 食べチョクでは、2022年4月から正式に自動テスト改善チームが発足いたしました。 チームメンバーは機能開発との掛け持ちにはなりますが、Webエンジニア5名・QA1名で取り組んでいます。 自動テスト改善チームの発足に伴い、食べチョクのテストにまつわる振り返りと、改善チームが取り組んでいることをお話しいたします。 これまで 食べチョクはサービスリリースから5年がたつプロダクトです。 特にここ1年半は食べチョクに参加してくれる仲間が増えており、サービス開発のスピードも上がっています。 食べチョクは2020年まで、テストカバレッジが低く、またなかなか…
2年前
記事のアイキャッチ画像
食べチョクのプロダクトチームとチームトポロジー
食べチョク開発者ブログ
食べチョクのプロダクトチームとチームトポロジー この記事はビビッドガーデン Advent Calendar 2021 最終日の記事です。 皆さんこんにちは、エンジニアの西尾です。 2019年、食べチョクのプロダクトチームは数名だけでした。 2020年から少しずつ、2021年頭からは一気にメンバーが増加し、12月現在は30名近いメンバーが所属しています。 プロダクトチームはもともと大きな1チームでしたが、2021年からチーム分割を検討し、6月頃から本格的に分割を始め、12月現在は7つのチームでプロダクト開発をすすめています。 組織設計、チーム分割にあたり参考にしたのが、チームトポロジーの概念です…
2年前
記事のアイキャッチ画像
「あ、面白そう」と思ってもらいたい。カジュアル面談の中身をザクッと公開します
食べチョク開発者ブログ
応募者の方に「ビビッドガーデンで働くとどんな価値が得られるか」を理解してもらうこと、さらに砕けた言い方をすると「あ、面白そう」と思ってもらうことがカジュアル面談のゴールだと定義しています。
2年前
記事のアイキャッチ画像
監査ログをファイルに記録するためのGemを公開しました
食べチョク開発者ブログ
こんにちは。 食べチョクの開発を副業でお手伝いしているプログラマーの花村です。 監査ログをJSONL(JSON Lines)のファイルに記録するためのGemのAuditLoggableを作成してrubygems.orgで公開しました。 ソースコードもGitHubで公開しています。 ​ rubygems.org github.com なぜ開発したのか 食べチョクでは監査ログを記録するためにAuditedを利用していました。 AuditedはActiveRecordのコールバックを利用してモデルの変更を手軽にRDBに記録してくれる大変便利なGemです。 しかしRDBに記録するためテーブルサイズが肥…
3年前