知れば知るほど面白くなる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の特徴はナビゲー

この記事は、Goodpatchのクライアントワークにおいて、プロトタイピングによる仮説検証をする際に留意しているポイントを簡単にまとめたものです。 特にプロトタイピングによる仮説検証の精度とスピードを上げるために、PMやデザイナー、クライアントなどがどのようにコラボレーションできるかに焦点を当てていきます。 なぜプロトタイピングの話か Goodpatchのクライアントワークでは、「要件が固まった後」からデザインに関わるのではなく、「要件が決まる前」から短期間でのプロトタイピングを実施します。 特にコアのユーザー体験部分については繰り返しプロトタイピングを通じた仮説検証を重ねることが多いです。 筆者自身もこれまで様々なプロジェクトでこのようなプロダクト開発に携わってきましたが、中でも「プロトタイピングにおける仮説の立て方と検証優先度の付け方」については特に個人ごと技量のブレが大きいのではない

今デザイン界隈でもブームになっている「AI（人工知能）」。トレンドを追いかけていると、便利で効率的でクリエイティブな未来にワクワクする一方、人間らしさやアナログの世界が恋しくなることはありませんか？ デザインにおいて、「人間らしさ」というのは大切な要素だと思っています。例えば、ユーザーが困ったときにそっと手を差し伸べてくれるような機能。これは便利さや効率だけでは届かない、人間だから、人の優しさがあるから生まれるものでしょう。 私自身、そんな「作り手の『Humanity（人間性）』が感じられる」デザインやソフトウェアが大好きなのですが、その仕掛けの多くは、些細なインタラクションや文言に宿っているもの。意識的に観察しなければ見逃してしまうでしょう。それだけ、ユーザーの意識に融け込んだ体験であるとも言えます。 この記事では、作り手のHumanityが感じられるソフトウェアについて、アプリUIの観

ジェネレーティブAI技術の進歩などによって、デザインに活用できるAIツールが次々と誕生しています。AIを業務に組み込むことで、今後デザイナーの働き方も大きく変わっていくでしょう。 そこで本記事では、さまざまなAIツールの中からデザイン業務に活用できそうなものをピックアップし、ワークフローのシーン別にご紹介します。主要なツールについては使ってみた感想（レビュー）も記載したので、デザイナー観点でAI活用をどう感じたかをお伝えできれば嬉しいです。 はじめに：AIデザインツールの原理 そもそもデザインに使えるAIツールとはなんでしょうか？AIの分野で重要な役割を果たす3つのキーワードについて、簡単に解説します。 ニューラルネットワーク クリエイティブな仕事をサポートまたは代替してくれるAI技術は、数十年にわたる技術開発の上に成り立っています。その基本的な仕組みの1つとして挙げられるのがニューラルネ

こんにちは。Goodpatch UIデザイナーの金谷です。 最近、ChatGPTで話題沸騰のAI。機械学習、ディープラーニングなどの技術の進歩が著しく、自然言語処理、画像認識、音声認識などの分野で、驚異的な精度と高速な処理能力を発揮しています。 ChatGPTにいろいろな「仕事」をさせる実験が流行っていますが、私自身もAIに負荷が高い（面倒）な作業を肩代わりしてもらえないか、実験をしてみたくなりました。 個人的な願いですが、AIの活用によって業務効率が飛躍的に向上するといいなと考えています。より創造的なタスクに時間をかけられ、品質の高いものを生み出せたり、人間が意思決定をする上で、十分な情報や条件がすぐにそろったり。 というわけで、デザインのワークフローにおけるどんな課題を解決できるのか、順に追って考えてみたいと思います。 Webアプリ・モバイルアプリデザイナーのワークフローごとに面倒な作

「明日はユーザーインタビューだ…！うまくできるかな。緊張してきた…。」 UXリサーチは、限られた時間の中でなるべく多くの有益な情報を収集しなければならず、さまざまなことを意識しようとすればするほど緊張してしまいますよね。 そのような不安を感じている方向けに、UXリサーチの中でも特に実施頻度の高いユーザーインタビューを行う前に確認しておくと良い21の心得をつくりました。最初にサマリーのみまとめましたので、インタビューの実施直前という方はサマリーだけでも確認して参考にしていただけると幸いです。 ユーザーインタビューの21の心得 ユーザーインタビューにおける心得を「場作り」「舵取り」「深掘り」3つのカテゴリに分類して解説していきます。 場作りの心得 遠慮なく、心を開いて語ってもらうための環境作りに必要な心得です。 明るく、笑顔で挨拶しよう アイスブレイクで緊張をほぐそう 興味を持つ・共感する・尊

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

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

みなさんはUXエンジニアという職種を知っていますか？ 近年、エンジニアでありながらもデザインの知識やスキルを活用して、独自の価値を発揮する人たちがいます。しかし、人によって肩書きが異なったり、企業・組織規模・プロダクトの性質によって役割が変化するため、具体的にどのような存在なのかよく分からないと感じる人も多いのではないでしょうか。 そこで、今回は「UXエンジニア」として活動している人たちがUXエンジニア特有の価値観や活動内容、ナレッジや悩みを共有するイベント「UX Engineer Meetup」を2019年10月7日（月）に開催しました。今回は登壇された方々の発表内容を元に、UXエンジニアの仕事内容や組織における役割などについてお届けします！ 株式会社サイバーエージェント | 谷 拓樹さん「私はいかにしてUXエンジニアになったのか」 はじめに、株式会社サイバーエージェントでUXエンジニア

初めまして。UXデザイナーのしんやです。私は4月にGoodpatchへ新卒入社し、UXデザイナーとしての仕事を始めました。今期から新卒2年目になります。入社から振り返るとまだ体系化の余地があるUXデザインの仕事は、手探りな部分が多く、学習と実践を繰り返して知識とスキルを身に付けていったと思います。 この記事では、UXデザインに興味がある方、学習をしたい方向けにUXデザインを学習するのに役立った25冊の本をご紹介します。 ご紹介する25冊の本は、UXデザイナー1年目として、求められている品質にたどり着けなくても暗闇を手探りで進まなければいけない状態だった際に、同じチームで仕事ぶりを見ていた先輩デザイナー、エンジニア、代表土屋からおすすめしてもらった本たちです。ぜひUXデザインの理解を深める際に役立ててもらえると嬉しいです！ 【関連記事】UXデザインとは？UIデザインとの違いや設計プロセス、事

イベントレポート Goodpatchのエンジニアが持つデザインの観点とは？ Goodpatch Engineer Meetup Vol.5 こんにちは！Goodpatchでは2019年12月10日（火）に第5回目となるエンジニアのためのミートアップ「Goodpatch Engineer Meetup Vol.5」を開催しました。 GoodpatchはUI/UXに強みを持ったデザイン会社ですが、今回のイベントではGoodpatchで働くエンジニアだからこそ持ち合わせている、インターフェイスデザインの観点やカイゼン事例、ペアデザインがもたらす価値についてなどのナレッジをご紹介しました。 今回は登壇された方々の発表内容を元に、イベントの様子をお届けします！ 「インターフェイスデザインとの向き合い方」丸怜里 はじめに、弊社の元iOSデベロッパーで、現在はソフトウェアデザイナーを務める丸怜里（@us

アーキテクチャ（Architecture）とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト（Architect）とは建築家や（建築）設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト（仕組士）: システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」（IEEE 1471）と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン

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

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

皆さんはフローチャートについてどんなイメージをお持ちでしょうか。「あると良さそうだけど作るのは面倒くさそう」「作った時のメリットがわからない」「システム開発のためのもの」といったイメージでしょうか。 今回、フローチャートをイチから作成する機会があり、メリットや作成のコツなどをまとめてお伝えしたいと思います。 フローチャートとは フローチャートは、プロセス、システム、コンピューターアルゴリズムを示す図です。複雑化しやすいプロセスの記録、学習、計画、改善、伝達を明確かつ分かりやすい方法で実現するためのツールとしてさまざまな分野で広く活用されています。 引用：https://www.lucidchart.com/pages/ja/what-is-a-flowchart このようにフローチャートは複雑なプロセスをシンプルに表現する際に役立つものです。 アプリやWebサイトでは “どの画面で何をする

Featured image: Business vector created by Freepik UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考えています。最近クックパッドさんでもUXエンジニアを採用しており、「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方は私の印象に残っている記事の一つです。 グッドパッチがチーム全員でデザインをしているように、UXデザインはデザイナーだけの仕事ではありません。例えばUIデザインがよくてもページの読み込みが遅いとユーザーの体験は悪くなってしまいます。その他にもエラーメッセージの言葉や見せ方、フォームのバリデ

しかし、それだけではユーザーがサービスに辿り着いてから、どのような意思決定をして、何を考えて購入しているのかまでのユーザーの行動と感情の変化を把握することができません。 そこでペルソナを作成した次のステップ、カスタマージャーニーマップを作ることで、ユーザーの行動とその感情の変化を時系列でまとめることができます。ターゲットユーザーとして策定したペルソナが、どのような行動をして、何を感じているか時間軸に沿って追いかけてみましょう！ 今回はカスタマージャーニーマップを知らない方へ、作成する目的や作り方のポイントをご紹介します。 Goodpatchでは、新規サービスの立ち上げやサービス・プロダクトの改善のご相談も受けております。 ⇒【資料ダウンロード】ユーザー課題を把握して素早く価値検証を回すフレームワーク「デザインスプリント」とは？ カスタマージャーニーマップとは ユーザーが商品やサービスに関わ