食べチョク開発者ブログ

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

デザイン

おいしそうが伝わる写真を選ぶ原則をチームで共有した

こんにちは、松久です。 「食べチョク」では、キャンペーンなどで使うバナー・キービジュアルを自社で作成しています。作成する時に使う写真は、素材サイトで配布・販売されている写真や、生産者さんが撮影された写真を使います。これらの写真から使用する写…

桃やぶどうのような同じ品目でバナーを作る前に事前準備したこと

こんにちは、松久です。 「食べチョク」では、桃、ぶどう、梨の特集をしています。 特集では、キービジュアルや「チャート」と呼ばれる品種の収穫・販売時期を 1 枚の画像にまとめています。他にも「桃占い」というコンテンツの作成もありました。これらの画…

「似ているけれど少し違う色」を減らす取り組み

こんにちは、松久です。 UI を作るときに、色は定義されている中から選ぶのを基本にしています。 色の定義が Figma で行われ、実装に反映され、違う場合は Stylelint で指摘される運用がされています。 色の運用が進んできたので、過去に定義した色や、デザ…

ふりかえりからデザイナー同士のミーティングを改善しました

こんにちは、松久です。 以前、「デザイナー同士で行う 3 つのミーティング設計」というお話を書きました。そこから、半年ぐらい運用していくなかで、変えたことがあります。 変わらないこと 大きく 3 つのミーティングがあることは変わりません。 プランニ…

FigmaとSCSSで色の定義を合わせるための運用方法

こんにちは、松久です。 食べチョクでは、デザインツールとして Figma を使っています。色の定義を Figma の Color Styles で管理しています。 管理はしているものの SCSS には反映できていない状態でした。このままだと何が管理されている色なのかエンジニ…

バナー作成をデザイナー以外でも作成する運用をはじめました

こんにちは。松久です。 キャンペーン、ニュースリリース、LINE など様々な場面で使われる画像は、デザイナーのみが制作していました。デザイナーだけで制作するには限界があり、作成の一部をデザイナー以外でできるようにする取り組みを行っているお話です…

Figma の操作を方法学んでデザインデーターができるまでの過程を知る

こんにちは、松久です。 食べチョクでは Figma をデザインツールとして使っています。デザイナーが作った Figma のデザインデータを見てエンジニアはHTML/CSS を書いています。このとき、わかりにくいデザインデータを見かけるときがあります。解決の糸口を…

Figma のファイル管理ルールを決めて業務を円滑にする取り組み

こんにちは。食べチョクの松久です。 今回は、複数人で Figma のファイルを管理するために工夫していること、悩んでいることも含めてどのようにしているかを紹介します。 ファイル管理をする目的 ファイルを管理する目的は、なんでしょうか。 複数人でデザイ…

デザイナー同士で行う3つのミーティング設計

こんにちは。食べチョクの松久です。 今回は、デザイナーの活動を支えるミーティングをどうやっているか紹介します。デザイナーが関係するミーティングは3つあり、それぞれのミーティングの目的を説明していきます。 プランニング・交通整理 月・水・金曜日…

デザイナーへの依頼数を GitHub CLI と jq を使って集計する

こんにちは。食べチョクの松久です。 今回は、デザイナーへの依頼数を GitHub CLI と jq を使って集計している話を紹介します。 どうして、依頼数を計測することになったのか、どうやって GitHub CLI と jq を使って集計しているのか、を順番に説明していき…