Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
昨今、プロダクトマネージャー（以下PdM）の需要が高まり、多くの企業で採用や育成に取り組んでいることと思います。しかし、PdMは幅広いスキルや役割が求められるため、どのようにステップアップしていくのか、定義することが難しい面があります。 そこで私たちのチームでは、PdMの「スキルマップ」を作成してみました。あくまで私たちのように「クライアントワークを行うPdM」向けのものではありますが、PdMのキャリアを考えている人や、PdMとして成長したいと考えている人へ、自身のスキルを客観視するきっかけになるかと思い、この記事でご紹介することにしました。 スキルマップと合わせて、各々のスキルをどのように身につけるのかや、スキルを得た先にあるキャリアパスについても触れたいと思います。ぜひご覧ください。 グッドパッチが求めるPdMスキルを「35項目」に整理 今回私たちが作成したスキルマップでは、PdMのス
5分ではじめる、iOSのアクセシビリティ対応 - Goodpatch Tech Blog
こんにちは。iOS Developer の katoです。 2024年5月16日は 世界各地でアクセシビリティを考える1日、GAAD（Global Accessibility Awareness Day）でしたね。 GAAD Japan 2024、アクセシビリティの祭典 2024 など様々なイベントが開催され、私もオンラインで参加しました。 その中で紹介されたアクセシビリティ対応の進め方として「完璧でなくても、できることから取り組む」という考え方があります。 そもそも世の中には様々な人・状況などが存在しするため、アクセシビリティを完璧にすることは非常に難易度が高いです。 「現状よりもちょっと良く」を繰り返して、いまよりもアクセシブルな世界を目指すという考え方です。 そこで今回は、たった5分で、エンジニア主導で始められる、簡単に実装できるアクセシビリティについて、いくつか紹介します。 「反転
細かすぎ…？FigmaやWebで文字の表示位置がズレる問題を知っておこう - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
プロダクトの責任者である「プロダクトマネージャー（PdM）」。その主な仕事の1つに「ロードマップの作成」があります。 プロダクトの改善一つとっても、何から手をつけるべきか、どのようなスケジュールが望ましいのか……考えることは山ほどあります。しかも、エンジニアやビジネスサイドとも合意を取らなければいけない。骨の折れる仕事です。 また、プロダクトマネージャーになりたてという方なら 計画の立て方がイマイチ分からない プロダクトの成長戦略を立てたり、施策の優先度を決めたりすることに自信が持てていない という方もいるのではないでしょうか。そこで、今回の記事では「直近1年の活動計画を立てたいけど、優先順位や施策の合意がなかなか取れない」という忙しいPdMの皆さまに向け、プロダクト改善に向けた1年のロードマップを「約2時間」で考えるワークをご紹介します！ なお、今回のアプローチは直近の目標や課題点から発
2022年11月のChatGPTの登場を機に、2023年〜2024年にかけてジェネレーティブAIの普及がさらに加速しています。 OpenAIをはじめ、Microsoft、Google、Meta、Adobeなどあらゆるテック企業から毎日のようにAI関連のニュースが届くようになりました。 Goodpatch Blogでは、2023年4月に「【2023年版】デザインに使えるAIツールまとめ（レビュー付き）」としてさまざまなサービスを紹介しましたが、この1年で新たなツールが次々とリリースされ、状況が大きく変わりました。 そこで、今回はデザインに使えるAIツールの「2024年版」をご紹介します。デザインの作業をざっくり「考える」「作る」「伝える」の3つに分け、さらにその中でAIに手伝ってもらえそうな10の工程について、便利で使えそうなAIツールを調べました。使ってみた感想（レビュー）も記載しましたの
ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【初級編】｜Goodpatch Blog グッドパッチブログ
こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？ ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。 そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。 まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。
この記事はGoodpatch Design Advent Calendar 2023の13日目のコンテンツです。他の記事もぜひ読んでみてください！ 先日、グッドパッチでは「サービスデザインをどう捉えていて、どんな形で実践してるの？」という話を講義として外部向けに話す機会があったので、過去の記事で書いたことを思い出しつつ、改めて今の自分なりにサービスデザインのことを考え直してみました。 事前に講義の参加者からいただいていた質問は、以下のような内容でした。 サービスデザインって何？ UXデザインとサービスデザインの違いは？ サービスデザインってどのように実践するの？ 今回の記事では、上記の質問に対して自分がどのように考えたのかをまとめます。実際はワークショップ形式でワークを交えつつ事例などを深く話しているのですが、すべてを記述すると（とてもとても）長くなってしまうので、ライトな内容にしています
「Apple Vision Pro」は何がヤバいのか、UXデザイナーが12,000文字で徹底解説する【インターフェイス編】｜Goodpatch Blog グッドパッチブログ
日本時間6月6日、Appleの新型ヘッドマウントディスプレイ「Apple Vision Pro（以下、Vision Pro）」が発表されました。 Appleファンはもちろん、各方面から反響は凄まじく、発表翌日の日本経済新聞でも大々的に取り上げられました。それだけ巨大ビジネスになる可能性があると見なされているということですね。 さて、発表の際にAppleのCEOティム・クック氏は以下のように述べています。 今日は、コンピュータの歴史にとって新たな時代の幕開けとなる記念すべき日となるでしょう。Macが私たちにパーソナルコンピューティングをもたらし、iPhoneがモバイルコンピューティングを実現したように、Apple Vision Proは私たちを空間コンピューティングの世界へと導きます。（Apple – Newsroom） AR（拡張現実）やVR（仮想現実）やMR（複合現実）が注目されている昨
こんにちは！エンジニアの藤井（touyou）です！ この記事はGoodpatch Advent Calendar 2023の二日目の記事になります。 今回テーマにするのは昨年末のChatGPTリリースに始まり全世界を巻き込む社会現象となった「AI」についてのお話です。 ChatGPTの影響が大きかった一番の要因はチャット形式かつその性能の高さが今までAIに直接触ってなかった層を巻き込めるようになったから、というのはわりとメジャーな見方かと思いますが、一方でこれによってAIもとい機械学習がどういう仕組みで動いているのかという理解があまりないまま生成AIを触っている人も増えてきたのかなと思います。 自分は以前にChatGPTに書かせた技術記事に赤入れしてみた - Goodpatch Tech Blogという記事を書いたように、ただ生成AIに盲目的に乗っかっていくだけの動きには比較的懐疑的な立場
プロジェクトマネージャーから見た、プロジェクトを成功に導いてくれるエンジニアとは - Goodpatch Tech Blog
初めまして。グッドパッチでプロジェクトマネージャーを担当している星と申します。 私は前職がソフトウェアメーカーで、QA（製品テスト）を担当したり開発組織のマネージャーを務めたりと、エンジニアと近い領域で仕事をしてきました。 そんな背景があり比較的開発寄りの案件にアサインされることが多く、以下のようなプロジェクトを担当してきました。 ヘルスケアサービスの立ち上げ（UX・UI設計、アプリ実装、プロモーションサイト実装） 大手保険会社のコーポレートサイトと顧客向けサービスサイトのリブランディング 医療業界の求人サービスのグロース（サイトリニューアル、アプリ改善） 建設業界の新規事業創出 HR業界のSaaSリニューアル 自社のマーケティングサイト立ち上げ エンジニアと一緒に日々働くことが大部分で、エンジニアと共に戦い共に創り上げる喜びを知っているプロマネ、と自称していいかなと思っています。 今回は
仮説を生み出す「探索型リサーチ」を成功させるには？グッドパッチ流の秘訣を大公開｜Goodpatch Blog グッドパッチブログ
仮説の確からしさを調べる検証型のリサーチではなく、仮説を「つくる」ための探索型リサーチ──。 こうしたコンセプトを掲げ、グッドパッチは2022年6月、探索型リサーチ「Insight Research」の本格提供を開始しました。 先日、リサーチをテーマとした日本発のカンファレンスである「RESEARCH Conference 2023」にて登壇の機会をいただき、約1年間さまざまな探索型リサーチプロジェクトを行って得た学びを詰め込んだ「GUIDE」というアプローチ方法をご紹介しました。本記事では、その内容をご紹介します。 なお、登壇した際の資料はこちらをご覧ください。 道なき道に光を照らす、探索型リサーチの道標「GUIDE」とは？ GUIDEを簡単に説明すると、2〜3カ月の探索型リサーチプロジェクトを行う上での「道標」のようなものです。 フレームワーク化して妄信的にプロセスを追うことを後押しす
どうも、Goodpatchの國光です。 という自己紹介をするのもこれで最後かもしれません。 2016年1月にGoodpatchに入社して約8年。 2024年4月9日に大好きなGoodpatchを退職して次の挑戦に向かうことを決めました。 最初に：Goodpatchを通じて関わった皆様へ 本当に長い間お世話になりました！PM兼UXデザイナーとして入社してから、Experience DesignやService Designの領域での仕事が包括的にできるようになるまでの間、様々なクライアントの方々や色々なメンバーと苦楽を共にさせていただきました。 ありがたいことにクライアントワークでは経営者・事業責任者の方々をはじめ本当に素敵な方々とご一緒する機会を多くいただき、時には大きな失敗をして高い壁にぶつかりながらも成長させていただくことができました。 Goodpatchに入社していなかったら今の僕は
Figma Config 2023 でGoodpatchメンバーが気になったセッションまとめ - Goodpatch Tech Blog
6月21日・22日の2日間にかけて、Figmaのイベント「Config 2023」が開催されましたね！本イベントはサンフランシスコで開催され、Goodpatchのデザイナーも現地参加しました。 イベントの中で発表されたセッションはYouTubeにもアップされています。 今回はGoodpatchのデザイナーとエンジニアが気になったセッションをピックアップして、セッションの概要や感想をご紹介したいと思います！ ピックアップセッション💙 Designing with AI: building the flagship GPT-4 language product セッションの概要 感想 Design Ops: Driving change with design systems and process セッションの概要 Aletheia Délivré氏について 政府機関でのデザイナー採用プロ
一念発起して4ヶ月で合格。苦労した点からトラブルまで、PMP取得の道のりを赤裸々に語ります｜Goodpatch Blog グッドパッチブログ
こんにちは！Goodpatch プロジェクトマネージャーの星です。 プロジェクトマネージャーという仕事は、対外的に発表できるアウトプットが作成しづらくスキルや実績の証明が難しい職種です。 アウトプットを作成したとしても、数値的な事業目標を定めたスコープ定義書であったり、実名の入った体制図であったりと、基本は社外秘の情報が満載。自身のスキル証明のためにポートフォリオを作ろうとしても、掲載できるものがほとんどないのが実情です。 そんな中、実績やスキルの証明に役立つ数少ない手段としてプロジェクトマネージャー資格「Project Manager Professional®︎（以下、PMP）」があります。 長時間のテストや英語のレポートなど、取得が難しいと言われる資格ではありますが、Goodpatchの仲間や組織としての応援を追い風に一念発起。約4ヶ月かけて資格を取得できました。この記事では、資格取
仮説をまとめてプロダクト開発をスムーズに──PdMに勧めたい「UXマスター」｜Goodpatch Blog グッドパッチブログ
グッドパッチでは、UXデザイナーがPdMとしてクライアントワークにアサインされるケースが増えていますが、プロダクトの開発においては、各ステークホルダーで意見がまとまらず、苦戦することがよくあります。 例えば、プロダクト開発でこんな悩みを抱えている方はいませんか？ プロダクトの戦略や企画を検討する時点で、ターゲットユーザーの認識がバラバラ UIデザインの議論のタイミングで、的外れな議論が起こっていてなかなか収束しない せっかくユーザーリサーチをしたのに、プロダクト開発メンバーやBizメンバーがその内容を咀嚼しきれていない このあたりの悩みは、事業戦略とプロダクト開発の組織が分断されており、各ステークホルダーが見ている「世界」が違うために起こる課題だと思っています。 そこで私たちは、プロジェクトが円滑に進むよう、「UXマスター」と呼ぶ「プロダクトとユーザーについての仮説を一箇所にまとめた資料」
「アンケートで多くの人に意見を聞いたのに、売れなかった」 「ユーザーインタビューから聞いたユーザーの声を参考にしたのに、売れない」 新規事業が空振り、新商品が売れない……そんな非常事態を避けるため、自分たちが生み出すサービスや製品のコンセプトが、「本当にユーザーに受け入れられるのか確かめたい！」と、ユーザー調査に興味を持つ企業が増えています。 昨今、「UXデザイン」という言葉がよく使われるようになり、ユーザーの声に耳を傾ける文化が浸透してきたのは、とてもうれしいことです。 しかし、調査の実施方法を間違えてしまったり、分析で「ユーザーの声」を正しく取り扱えずに真実とは全く異なる結果を導いてしまうことも少なくありません。 間違ったユーザー調査はプロジェクトを誤った方向に導いてしまうばかりでなく、まったく売れない商品やサービスに対して「売れる」と思わせたまま、莫大な開発費や広告宣伝費を使わせるこ
座談会を開いてびっくり!? デザイナーとエンジニアとPM、それぞれが想像する「仕様」が違いすぎた｜Goodpatch Blog グッドパッチブログ
こんにちは。Goodpatch UIデザイナーの金谷です。 突然ですが、皆さんは「仕様」という言葉を聞いて、どういったものをイメージしますか？ Goodpatchのソフトウェア開発プロジェクトは、デザイナー、エンジニア、PMなど多職種で構成されます。言葉の意味が合わないこともしばしばで、デザイナーからエンジニアにバトンを渡すときや実装後のクオリティチェックのタイミングなど、私も苦労した経験があります。 中でも特に「仕様（機能要件）」という言葉は、その意味をめぐって混乱することが多く、同僚にこのような疑問をぶつけてみました。 ソフトウェアにとって重要な「仕様」という言葉のイメージが曖昧な状態で、皆さんの力を借りたいです。会話しつつ、解像度を上げていけたらと思っています！ 私の悲痛な (？) 叫びに応えてくれたエンジニア、UXデザイナー、PMで座談会を行ったところ、それぞれで仕様に対して抱くイ
みんなが楽しく仕事をするために、私は「ビジネスとしてのデザイン」を探求し続ける──UXデザイナー秋野｜Goodpatch Blog グッドパッチブログ
私たちは世界に何を残せるのか──そんな問いを背景にグッドパッチでは「MAKE A MARK」というコンセプトをグループ総会で掲げました。 グッドパッチで働くデザイナーたちは、なぜグッドパッチに集い、これから何を残していきたいのか。MAKE A MARKというコンセプトに沿って、各々が胸に秘めた思いに迫るインタビュー企画。第2回はクライアント事業部でUXデザインマネージャーを経て、現在はUXデザインチーム全体を統括するディレクターを務める秋野比彩美が登場。 デザイン未経験からヤフーのデザインリードへ——と言うと、シンデレラストーリーのように聞こえるかもしれません。しかし実際は「負けず嫌い」精神で自力でキャリアを切り開いた、まさに「たたき上げ」。そんな彼女が描く、これからのデザイナー像とは？ デザイン未経験からヤフーのデザインリード、そしてグッドパッチへ 私のキャリアは少し変わっていて、大学を
Goodpatchの新卒「UXデザイン研修」体験記──ターゲットと価値に2週間徹底的に向き合って分かったこと｜Goodpatch Blog グッドパッチブログ
こんにちは。このたび7月1日付でGoodpatchのUXデザイナーに配属になりました、2023年卒の関口と杉本です！ 年によって変わりますが、Goodpatchの新卒メンバーは配属部署に関わらず、営業研修、PM研修、UIデザイン研修、UXデザイン研修、エンジニア研修など、「部門研修」という形で各職能のスキルを約2カ月かけて学びます。 そして、今年の新卒研修では「研修を全て修了し、新卒4人のチームで成果物を作って最終プレゼンを行う」というゴールが設定されていました。この成果物のテーマは「政治に興味のない20〜30代に政治参加を促すサービス」。 さらに成果物の条件として、以下の制約がついていました。 成果物はテクニカルプロトタイプを目指して制作する KGIとして「投票率が50〜60代を上回る」を据える（実際に測定はできないので、あくまでここを目指すという前提） 現行のルールに従ってサービスを構
こんにちは。グッドパッチでデザインストラテジスト兼ワークショップデザイナーをしている田中拓也です。 「ワークショップデザイナー」というと珍しがられるかもしれませんが、グッドパッチでは、ユーザー視点のモノづくりを学ぶワークショップのほか、組織開発を目的としたワークショップなども提供しています。 仕事上、さまざまな企業の組織課題を目にするわけですが、突き詰めると悩むポイント（本質）は似ていることが多く、解決の糸口も共通するものになってきます。そこで、この場をお借りして、連載形式で「組織デザイン」のポイントを解説していくことにしました。 最初の第1回は「心理的安全性」という言葉について取り上げます。皆さんも働く中で一度は聞いたことがあるはず。しかし、僕は当初この言葉が好きになれませんでした。 心理的安全性という名の「呪縛」 グッドパッチに限らないことですが、プロジェクトベースで仕事が進む企業は、
「PdMに挑戦してみようかな」と思ったUXデザイナーにオススメしたい6冊｜Goodpatch Blog グッドパッチブログ
Goodpatchのメンバーが今、読者の皆さんにオススメしたい本を紹介する「読書週間2023」。 5日目となる今日は、先日プロダクトマネジメントの支援サービス「Product Growth Partnerships」を発表したPdMチームのメンバーが、PdMを目指すUXデザイナーにオススメの書籍を紹介してくれます。 読書週間の期間は終わってしまいましたが、Goodpatch Blogの読書週間連載はもう少しだけ続きます。ぜひお付き合いいただければ幸いです。 PdMの入門書から、壁にぶつかったときに役立つ本まで 先日、Goodpatch BlogでUXデザイナーこそプロダクトマネージャー（PdM）に挑戦しよう、という記事を出して、大きな反響をいただきました。やはり、それだけUXデザイナーのキャリアに悩みや関心がある方が多いということなのかもしれません。 一方で、記事中では「UXデザイナーの誰
こんにちは。Goodpatch UIデザイナーの菅原です。 皆さんは、スマートフォンアプリなどで「長押し（プレス アンド ホールド）」機能を使ったことはありますか？ 例えばiPhoneでは、アプリアイコンを長押しすると、ホーム画面上でアプリ内で頻繁に利用するアクション（App Storeなら検索など）が簡単に操作できたり、ブックアプリでは一覧画面から無料サンプルの読み込みや共有ができます。 長押しは、「より最適化された上級者向けの機能」としての役割を果たしており、代表的なものですと、「クイックアクション」と呼ばれる概念がHuman Interface Guidelinesに記載されています。 長押しUIとは 「長押し」という動作は『あくまでショートカット的位置付け』であり、『代替手段の提供（アクセシビリティの確保）』がデザイン原則的に軸となりそうです。 そのため、頻度の高いアクション数を優
人材不足の救世主？ UXデザイナーこそ「プロダクトマネージャー（PdM）」に挑戦しよう｜Goodpatch Blog グッドパッチブログ
こんにちは！グッドパッチのUXデザイナー兼プロダクトマネージャー（以下、PdM）のかのうです。 UXデザイナー兼PdMというと、「何それ、両立できるものなの？」と思われる方もいると思いますが、実は今、グッドパッチでは、PdMとしてクライアントワークにアサインされるUXデザイナーが増えています。 PdM、すなわちプロダクトの責任者が担うべき領域は幅広く、開発、マーケティング、デリバリーと多岐にわたり、今もっとも人材不足が叫ばれている職種といっても過言ではありません。 そんな職種にUXデザイナーが挑む理由はただ一つ。UXデザインの知見がプロダクトマネジメントで生きてくる、つまりスキルセットに似た部分があるためです。例えば、プロダクト開発を進める上でぶつかりやすいこんな課題。 多種多様なユーザーがプロダクトを使うため、ターゲットが定まっていない ユーザーの要望に応えることはできているが、プロダク
こんにちは。グッドパッチでプロダクトマネージャー（以下、PdM）をしている大本です。 Goodpatch Blogでは、「UXデザイナー→PdM」へのキャリアは有力な選択肢というお話を何度かしていますが、私自身、ちょうど1年前から「グッドパッチでPdM職を作りたい！」とPdM組織の立ち上げを行い、UXデザイナーからロールチェンジした1人です。 UXデザイナーとPdMの親和性は高いとしましたが、仕事の進め方や求められるスキルに違いはあるのか。約1年、働いてみて気付いたことをまとめようと思います。 私がUXデザイナーからPdMにロールチェンジした理由 気付きの話をする前に、私自身がPdMにロールチェンジした経緯を説明させてください。 私はグッドパッチに入社して4年目になりますが、入社当初はUXデザイナーとしてプロジェクトに参加していました。PdMへのロールチェンジを考えたのは、クライアントワー
デザインシステム構築におけるデザイナーとエンジニアのコラボレーションの価値｜Goodpatch Blog グッドパッチブログ
昨今では、よく耳にするようになった「デザインシステム」ですが、クライアントワークでもデザインシステムを構築するケースが多くなっています。 デザインシステムは「UIの品質向上」や「開発の効率化」といった目的で作られることも多く、デザイナーとエンジニアの両者に関係があるものです。しかし、実際にデザインシステム構築をしていく際にデザイナーとエンジニアはどのように協力できるのでしょうか？ この記事では、Goodpatchで実際に行ったtoB SaaSのデザインシステム構築において、デザイナーとエンジニアのコラボレーションの取り組みや、その取り組みが生み出す価値について焦点を当ててみたいと思います。 デザインシステムについて デザインシステムの定義は文脈によってさまざまですが、この記事では「ブランドに紐づいたデザインの再現性を高め、ユーザーの利便性や開発効率を向上するための考え方とツールセット」とし
iOS 17 天気アプリの雨粒演出を作ってみた - Goodpatch Tech Blog
こんにちは！エンジニアの藤井（touyou）です！ ついに2023年9月19日、iOS 17がリリースされましたね🙌 連絡先がiPhoneを近づけるだけで交換できる機能など、コミュニケーション面でのアップデートが目立った今回のアップデートでしたが、みなさんは何に注目したでしょうか？ 弊社ではiOS/iPadOS 17の天気アプリに追加された、あるマイナーアップデートが注目を集めました。 それがこちらです。 かなりわかりにくいのですが、以前からあったパネルの上部に雨粒が上から当たって跳ねるアニメーションに加えて、パネルの裏側に水滴がついて滴るような演出が追加されています。 切り抜いて明るくしてみるとこのような感じです。 とてもリアルな表現になっていますね！ これはやってみたい！ ということで、こちらをSwiftUIで再現してみようと思い立ちました。 そこでこの記事では、再現に至るまでにした
Goodpatchでは毎年、新卒社員向けにUIデザイン研修を実施し、UIデザインに関する基礎的な講義や課題制作といった研修を丁寧に時間をかけて行っています。一方、中途社員向けのUIデザイン研修は整備が足りておらず、運営者もあいまいで、うまく仕組み化できていない状況がありました。 今回、そんな課題に対して、UIデザイナー2人が有志で取り組んだ中途向けUIデザイン研修の仕組み作りをご紹介できればと思います！ 研修の目的とゴール Goodpatchに入社する中途UIデザイナーのバックグラウンドはさまざまです。 今回、研修整備に取り組んだデザイナー2名（執筆者）も、前職は制作会社のWebデザイナーでした。このように、中途社員はスキルセットもバラバラであるため、グッドパッチでの仕事に必要なスキルや知識をサポートする仕組みづくりは社内に必要だと考えました。 新卒・中途を含むすべてのUIデザイナーが、共
採用管理システムのデータをLooker Studioで可視化するときにやってよかった5つのこと - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023の10日目の投稿になります。 こんにちは、Goodpatchで中途採用のリクルーターをしている 宍戸 です。 エンジニアのリクルーターや、採用の数字集計や可視化を担当しています。 今回は、採用管理システムの応募者データをLooker Studioでダッシュボード化したときに工夫してよかったことをまとめました。 ダッシュボードの作成は1年半前で、その後運用しながら都度アップデートしています。 誰の役に立ちそうな記事か 採用管理システムとは やってよかったこと 1.見たい指標の優先度・Whyをすり合わせる 2.職種、応募経路、ステータスなどの定義テーブルを作る 3.応募者CSVの変換用シートを作る 「有効」列 選考のカウント列 部署列・職種列・応募経路列 選考ステータス列 4.入力規則を統一する(複数シートで採用情報を管理し
費用と時間がかかっても、企業がウェブアクセシビリティに取り組むべき6つの理由｜Goodpatch Blog グッドパッチブログ
一方、いざウェブアクセシビリティの確保を進めようと思っても、専門的な人材や、部門横断での対応が必要な場合もあり、その場合はかなりの費用と時間がかかります。対応すること自体は法的義務でないにもかかわらず、なぜそこまでして取り組む必要があるのでしょうか？ 今回の記事では、ウェブアクセシビリティに取り組む意義とメリットを、6つの観点から解説していきます。 理由1：サイト（サービス）を利用できる人が増える 当たり前ですが、ウェブアクセシビリティを確保すれば、自社のサイトやサービスを利用できる人が増えます。実際、どれくらいインパクトがあることなのでしょうか？アクセシビリティを確保することで恩恵を受けやすいと考えられる層を中心に、具体的な数字を交えて見てみましょう。 ❶ 障害を持つ人 視覚、聴覚、認知、運動機能などに関して、さまざまな障害や特性を持つ人がいます。厚生労働省の調査によると、2016年の推
本日は世界各地でアクセシビリティを考える一日、GAAD（Global Accessibility Awareness Day）の日ですね！ アクセシビリティはWebサイトやアプリケーションのデザインや実装に関わるデザイナーやエンジニアはもちろん、サービスのコンテンツ作成や資料作成においても配慮が必要であり、さまざまな職種の人に関わるものです。 グッドパッチでは、しばらく前から社内の有志を中心にアクセシビリティ向上の取り組みを行っており、その活動の一環として、全職種向けにアクセシビリティの理解を深めるための社内勉強会を実施しました。 今回の勉強会では、社内でも特に関心があるUIデザイナーやエンジニアに、アクセシビリティの基礎知識から具体的な取り組みや事例などをLT形式で発表していただきました。勉強会はランチタイムに開催したのですが、多くの参加者が集まってくれました！ この記事では、それぞれの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PdM（プロダクトマネージャー）の「スキルマップ」を作ってみた｜Goodpatch Blog グッドパッチブログ
PdM必見、1年間のロードマップをたった2時間で作る方法｜Goodpatch Blog グッドパッチブログ
【2024年版】デザインに使えるAIツールまとめ（レビュー付き）｜Goodpatch Blog グッドパッチブログ
サービスデザインの講義をやるときに、講師として考えたこと｜Goodpatch Blog グッドパッチブログ
大生成AI時代に学ぶAIのしくみ基礎の基礎 - Goodpatch Tech Blog
【Goodpatch卒業エントリー】Experience Designと向き合った8年間｜國光俊樹
ユーザー調査の「使いたいと思います」を信じてはいけない、3つの理由｜Goodpatch Blog グッドパッチブログ
デザイナーが考える「組織デザイン」（1）：「心理的安全性」って本当に必要か？｜Goodpatch Blog グッドパッチブログ
【押して広がるアプリの世界】上級者向け機能「長押しUI」集めてみた｜Goodpatch Blog グッドパッチブログ
1年働いて分かった、UXデザイナーからPdMになるために必要な変化｜Goodpatch Blog グッドパッチブログ
デザイナー発！中途向けUI研修の仕組みづくり｜Goodpatch Blog グッドパッチブログ
全職種向けに開催！組織で理解を深める「アクセシビリティ社内勉強会」レポート｜Goodpatch Blog グッドパッチブログ