グッドパッチでは社員向けにさまざまな研修を実施しています。定期的な新入社員向けの基礎研修のほか、専門性と難度をより深めた「専門研修」を実施することがあります。この記事では、筆者usagimaruがグッドパッチのデザイナー支援組織であるDesignOpsとして2024年に実施した社内研修 「UIデザイントレーニング」 の内容を一部ご紹介します。 UIデザインの新卒研修についてはこちらの記事でご紹介しています。 https://goodpatch.com/blog/ui-training-softwaredesign 研修の概要 この研修は、社内の若手UIデザイナー7名を対象に、情報設計の考え方や方法論を駆使した実践的なUIデザインに取り組むプログラムとして設計しました。主な企画をDesignOps部署中心に行い、筆者が講座自体の設計と制作、そして講師としての登壇と講評までを担いました。 進行

知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン

こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。 イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハートを揺さぶられるポイントについて語り合ったりしています。 知れば知るほど面白くなっていくUIの世界を皆さんにもチラ見せしたい……ということで、イカ会の様子を連載することにしました。第1弾となる今回は、「こんなの見たことない！」と私たちが感動したアプリをご紹介します。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Clear Lists 最初にご紹介するのは、ご存知の方も多いタスク管理アプリ「Clear Lists」。 Clear Listsの特徴はナビゲー

はじめに 2021年、Goodpatchには8人の新卒が入社しました。 今年もGoodpatchでは4月から6月までの3ヶ月間で新卒研修を行っています。昨年は新卒の職種ごとに分け研修を行っていましたが、今年は全職種を対象としてUXデザインやUIデザイン、さらには営業の研修を行っています。 今回の記事では、UXデザイン研修がどのような目的で行われていて、どのような内容を学ぶことができるのかをご紹介します。 研修の目当て Goodpatchの新卒向けUXデザイン研修では以下を目当てとしています。 GoodpatchのUXデザイナーとして必要なマインドセットを理解すること Goodpatchに所属している先輩UXデザイナーを知ってもらうこと UXデザインに活用できるたくさんの手法を理解することも重要ではあるのですが、Goodpatchの研修では手法を伝えることよりも、まずはその土台となる Goo

はじめに UI デザイナーとして、スキルを伸ばす方向性を悩んだことがありますか？ 去年、私はスキルを伸ばす方向性をすごく悩みました。世の中の流れとして、UIデザイナーはUXデザイナーを目指すのが多いのに対して、私はインターフェイスアーキテクチャやインタラクションデザイン、エンジニアリングについてすごく興味があるんです。しかし、どうやってそれらのスキルを伸ばすのかは分かりませんでした。 社内の有志のチームに参加 その時、OOUIをはじめUIデザインを研究する有志の集まりがあって、私はそのチームに参加しました。 【Today's Goodpatch✍️】有志で発足された、オブジェクトベースなUIデザインを研究するチームの様子をキャッチ👀上野学さんの記事をチームで読みながら、オブジェクトベースなUIデザインへの取り組み方などディスカッションが白熱していました！ pic.twitter.com/

UIデザインの現場では、デザイナーとエンジニアの間で様々な問題が起きることがあります。いざエンジニアが実装しようとすると思わぬ矛盾が見つかったり、運用するとき予期せぬデータによって表示が崩れてしまったり…そうしたトラブルは、事前に実装・運用目線からフィードバックする機会があれば防げるかも知れません。そこで今回は、エンジニアが技術的な目線を持ってデザインにフィードバックするポイントをピックアップしてご紹介します。 筆者はWebアプリケーションを専門としており、本稿の内容も基本的にはWebサイト・Webアプリの構築を前提としています。ネイティヴアプリケーションについてはこの限りではない可能性があります。 なぜエンジニアがフィードバックをすべきなのか UIとは実装されて初めて完成されるものであり、実装するうえでの技術的な実現可能性や、デザインが破綻することなく運用に耐えうるか、といった視点で制作

皆さんの会社には、どんなデザイン組織がありますか？ ビジネスにおいてデザインが担う領域が拡張している今、デザイナーの役割も細分化しています。自社の企業としての力を高めるため、デザインに注力したいけれど、どう進めていけばいいのか悩む企業担当者や、すでにデザイナーをマネジメントしているデザインマネージャーの方に向けて、さまざまな形のデザイン組織構築事例について、Goodpatch BlogのTipsを集めました。 多様なデザイン組織を支えるデザイナーの声 証券会社におけるデザイン組織構築 https://goodpatch.com/blog/sbi-securities-design-orgs/ 株式会社SBI証券では、2018年2月にUXデザイン室が設立され、ゼロからのデザイン組織構築に取り組んでいます。あらゆる顧客体験に一貫性を持たせることがブランドを作るからこそ、デザインは現場だけではな

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

この記事はGoodpatch UI Design Advent Calendar 2018の16日目の記事です。 私はOOUI（オブジェクト指向ユーザーインターフェース）に関する勉強をし始めてから、世の中のアプリが全てオブジェクトにしか見えなくなりました（笑）。まだ、完璧に理解しきれていない部分もあるかもしれませんが、Appleの純正な写真アプリを分析・考察しながら、私なりにOOUIの理解を深めたいと思います。 OOUIとは システムを開発する際には、オブジェクト指向（Object-oriented）という設計論があります。その設計論をUIデザインに導入することをオブジェクト指向ユーザーインターフェース（Object-oriented user interface、以下「OOUI」という）と呼びます。 オブジェクト指向（Object-oriented）とは、オブジェクト同士の相互作用として

この記事はGoodpatch Advent Calendar 2018 1日目の記事です。 フロントエンド開発をしているとアニメーションを実装する機会が度々あります。たとえば、私が担当しているモチベーションクラウドでは、以下のように円グラフにアニメーションを加えています。 アニメーションを用いる上で意識したいポイントとして「パフォーマンス」があります。アニメーションのパフォーマンスについて、この記事では主に“滑らかさ”を指すことにします。 昨今ではハードウェアの進歩もあり、あまり意識しなくてもアニメーションのパフォーマンスが問題になることは少ないかもしれませんが、少し複雑なアニメーションやアニメーション以外の要因によってアニメーションの品質劣化が起きる場合には多少のテクニックが必要になってきます。 今回はUIにおいてアニメーションのパフォーマンスが重要とされる背景とWebアニメーションにお

この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。 今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。 マイクロインタラクションの理解 マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。

イベントレポート 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】 私たちが利用するサービスやプロダクトには、毎日使う実用品もあれば、娯楽品もあります。目的は異なっても、どちらも生活に欠かせないものです。技術が進化し、新しいものが生まれ続ける現代において選ばれるサービスやプロダクトには、人に寄り添ったデザインが求められることは想像に難くないでしょう。では、娯楽品のデザインに潜むロジックや哲学はどのようなものなのでしょうか。 2018年4月27日、DeNAとGoodpatchが主催するUI Crunchは、任天堂株式会社さまをゲストに迎え「UI Crunch #13 娯楽のUI – by Nintendo –」を開催しました！告知開始直後からたくさんの反響をいただき、最終的には4200人以上の方々にご応募いただきました。伝説の回となった

Goodpatch Advent Calendar 2017 14日目は、アプリの初回起動時の体験設計を考えてみます。 アプリの初回起動時のユーザー体験はとても重要です。 そこは、ユーザーとアプリ（≒サービス）の出会い場であり、ユーザーがコンテンツに触れるための入り口でもあります。この画面をオンボーディングとも言います。オンボーディングの体験をどうするべきかという話は調べるといろいろ出てくるかと思いますが、今回は私自身の考えを言語化してみたいと思います。 オンボーディングとは アプリの初回起動時にはたいてい3〜4ページくらいの横スクロール画面を用意して、それぞれぺライチでアプリの概要を説明したり、必要なら初期設定もあわせて行なったりすることがあります。そのほか、初回起動時に限らずとも何かしらの機能に初めてアクセスした際のチュートリアルなどもオンボーディングの一種かと思います。 Appleの

サービスやプロダクトの開発プロセスにユーザー視点は不可欠です。しかし頭では理解していても、いざユーザー視点でものづくりを始めようとすると、最初のプロセスとしてなんとなく「ユーザーインタビュー」を採用してしまいがちです。 もしあなたがユーザーインタビューとは単純に「話を聞くこと」だと考えているとしたら、それは大きな間違いでしょう。目的設定も下準備も不十分な状態でのインタビューは、ものづくりの質の向上につながるユーザーインタビューにはなりえません。 ではユーザーインタビューには、どのような準備や心構えが必要なのでしょうか。今回は、筆者が失敗経験を元に学んだ23個の心得をご紹介します。 下準備を始める前に、まずはバイアスを外す ユーザーインタビューには下準備が必要だと前述しましたが、実はもっとも大切な準備が「バイアスに気づく」ことです。私たちは普段から、無意識のうちにあらゆる事柄を自分の価値観で

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

日々の業務において、スケジュールやプロジェクトの日程・進捗管理は重要です。プロジェクトが非効率的に進んでいく要因として、プロジェクトの管理を行うツールや担当者が明確化されていないという課題があります。また、仮にExcelをタスク管理ツールとして運用した場合にも、見づらいなどの要因から、逆に仕事が非効率的になるという不満が渦まくことも少なくありません。 誰が何をどこまで遂行したのかが把握できず、暗闇の中でプロジェクトが進んでいく・・・そんな経験を一度はしたことがあるのでは？ 本記事では、プロジェクト進行やマネジメントにおいて、そのような課題を抱えているプロジェクトマネージャーやメンバーが使えるおすすめのタスク管理ツールをご紹介します。これらのツールをプロジェクトで上手く使いこなして、業務効率化を測りましょう！ 世界中で人気を集めているタスク管理ツール 世界にはさまざまなタスク管理ツールがあり

ビジネスにおけるデザインの重要性が近年騒がれていますが、両者の関係性は今にはじまったことではありません。欧米ではビジネスにデザインシンキングを取り入れることは常識となりつつありますし、過去に売れたプロダクトを見てもデザインが優れたものばかりです。 本記事では、「良いサービスを作ったのに売れない」と悩むビジネスパーソンや、ビジネス目線をプロダクト作りに取り入れたいデザイナーにおすすめなビジネス × デザインにまつわる良本を12冊取り上げました。 1. デザインマネジメント デザインマネジメント こちらは「デザインマネジメント」を主軸において、ビジネスにおけるデザインの重要性を紐解いた本です。 デザインマネジメントとは、デザインをビジネスの根幹にとらえたビジネス手法のことです。大きな特徴は、「顧客価値を探る多様な視点を取り入れよう」という意味合いに加えて、真に価値あるものを顧客に届けるためのア

私が愛してやまないモノには、ユーモアが詰まっている気がします。そんなモノ作りができたらと日頃から考えています。今回のブログでは、みなさまから愛されるモノになるために、私がいくつか試したアイデアをご紹介します。その中で、「これはユーモアだった」「これはクソアイデアだった」という境目を見ていきたいと思います。 試したアイデアと結果について たくさん試したアイデアの中から4つに絞りました。試したアイデアについて、それぞれ結果をまとめてみました。「試」と「結」の構成でアイデアをご紹介してまいりたいと思います。 ※試したアイデアの費用対効果などは算出しておりませんのでご了承ください。 その１ 試：料金を、ラーメンに例えたらどうなるか？ 開発中のサービスの料金体系を見てみると、月額1人あたりの料金が約1,000円でした。そこで、1,000円という料金を「よりリアリティある形」で感じてもらえるように、「

ナレッジ・ノウハウ デザイナー版のGitHub！デザインのバージョン管理システムAbstract社内勉強会を開催しました！ エンジニアたちにはGitHubがありますが、デザイナーには今までデザインの履歴を管理するシステムがありませんでした。そこで2017年7月にローンチされ世界中で注目を集めているのがAbstractです。 デザイナーたちのためのワークフロープラットフォームとして、デザインプロセス上の強い不満を解消するのではないかとデザイナーたちから期待されています。 以前Goodpatch Blogでは、Millanoteの活用法をご紹介しましたが、Goodpatchには新しいツールを積極的に使うカルチャーがあります。そんな中で今回はProttのリードデザイナーであり、先日もデザイナーデーを主宰したBertが社内のデザイナーに呼びかけ勉強会を開催しました！ 初回ということもあり社内でまだ

自分の考えをうまく人に伝えられないことはありませんか？ 自分の頭の中にある考えやイメージを、直接相手の頭の中に送ることができれば簡単に伝えることができるかもしれませんが、そういうわけにもいきません。 ですが、直接送ることはできなくても、情報を視覚化することでより伝わりやすいように工夫することは可能です。 実際に身の回りでは、情報を伝えるために視覚化されたもので溢れています。 そこで今回は、考えを伝える1つの手段として、情報を図解して視覚化する方法をご紹介します。 「情報を視覚化する」とは？ 情報の視覚化とは、文字通り、情報（考えていることや伝えたいこと）を、図解表現などを用いて目に見える状態にすることです。 メリット 自分の思い描いているイメージや、言葉で明確に言い表すことができない事柄を目に見えるようにすることで、その情報の関係性や構造が的確に伝わります。 また、人は実際に目に見えるもの