ナレッジ・ノウハウ 生産性向上を「個人レベル」から「組織レベル」へ　15人のデザイナーで「Claude Code × GitHub」で組織運営をした結果 こんにちは。グッドパッチのサービスデザイナーのぬまです。 グッドパッチのデザイナーは、クライアントワークとは別に「組織貢献活動」という社内プロジェクトを日々進めています。ざっくり言うと、組織が持続的に成長していくための”投資活動”のようなものです。 サービスデザイナーのチームでは今期、各々が「AI×UXデザイン」の領域を深く理解した上で、チームとして知見が組織として蓄積・再現可能になることを目指しています。属人的ではなく、チームとして一貫した品質を出せることがポイントです。 この活動には、現在15人程度のメンバーが関わっています。そのため、チームや個々人の活動が見えづらい構造を作ってしまうと、組織の生産性にも影響すると思っていました。そこ

デザインパターン (design pattern) とは、過去のデザイナーたちが見つけた経験則的な型に対して名前をつけ、型の再利用性を高めやすくしたものです。ソフトウェアデザインの世界（特に、プログラミングの領域）においてはプログラム構造の設計パターンのことをまさに “デザインパターン” を呼び、これを共通の知識として積極的に取り入れています。 これに対しアンチパターン (anti-pattern) とは、必然的に否定的な結果に至る型を指します。アンチパターンもデザインパターンの一種と捉えこれを知識に蓄えておけば、設計の過程でどのような結果に至るのかを事前に予測することができるし、失敗を未然に防ぐことも可能となります。 今回は、アプリケーションデザインにおける典型的なアンチパターンをいくつか紹介します。 アプリケーションデザインの定義 ここでの「アプリケーションデザイン」の言葉は、以下の意

視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。 今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。 視覚調整とは 視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。 身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓） Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw — Give Me Internet (@GiveMeInternet) 2017年9月25日 この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインに

この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 【関連記事】ウェブアクセシビリティで対応すべきことは？障害者差別解消法改正との関連性 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要があり

Goodpatch closed its Berlin office. We will continue to help businesses through Tokyo HQ.

Baltoはなぜ生まれたのか まず前提として、Goodpatchには、ProttやBaltoなどの自社事業をつくる部署とクライアントワークを担当する部署があります。そして、自社プロダクトにはクライアントワークで培った経験が活かされています。 Prottは、コードを書かずに本物のようなWebサイトやアプリの動きを再現できるサービスです。しかし、実際に実装し始めると、大きな手直しは少ないものの、細部では直したい部分が続々と出てきます。 それをどのようにメンバー間で伝えるかというと、モバイルでスクリーンショットを撮影してPCに送り、スプレッドシートやパワーポイントで指摘部分の説明資料を作る必要がありました。この方法では、1回のフィードバックに60秒くらい時間を要し、かつ単純作業なので、繰り返していくとフィードバックが億劫になっていきます。 そうすると細かいフィードバックをつい放置してしまい、結局

私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

みなさんこんにちは！ Goodpatchの須佐です！もうすぐ４月で桜が咲き始めましたね！季節の変わり目に体調を崩さないよう気をつけていきます。それでは今月も、新しくておもしろいサービスやアプリを紹介していきたいと思います！ 今までのまとめはこちらからどうぞ。 mercury 「mercury」は、iOSバージョン9.3対応のUIコンポーネントを無料でダウンロードできるサービスです。 UIコンポーネントは「Adobe Illustrator」と「Sketch」に対応したものがそれぞれ用意されています。ナビゲーションバーやセグメントコントロールなどの豊富なコンポーネントを用いることで、iOSアプリのモックアップを素早く作れます。また、80以上の純正アプリがフルスクリーンでストックされており、マージンの大きさなどを正確に参照することができます。無料で手に入りますので一度ダウンロードしてみてはいか