ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【中級編】｜Goodpatch Blog グッドパッチブログ
UIデザインを学んだり興味を持っているみなさんに向けて、UIコンポーネントに関する知識をクイズ形式で紹介するこのシリーズ。100種類のUIコンポーネントについての解説を、初級・中級・上級に分けて全3回でお届けしています。 以下の画像と説明を見て、コンポーネントの名称を当ててみてください。答えの部分をクリック（タップ）すると正解例として、UIデザインの場で広く使われている呼び方が表示されます。中級編は全部で32問。前回からの続きで、Q35からスタート！ Lv.3：正解できたらUI好き 【Q35】 アイコンをタップする、または画面をスワイプすると横から表示されるメニュー。 答え ドロワー（ドロワーメニュー／ハンバーガーメニュー／スライドメニュー） 【Q36】 親ビューとの相互作用を防ぎ、閉じるために明示的なアクションを必要とするコンポーネント。焦点を絞ったモードでコンテンツを表示する。 答え
費用と時間がかかっても、企業がウェブアクセシビリティに取り組むべき6つの理由｜Goodpatch Blog グッドパッチブログ
一方、いざウェブアクセシビリティの確保を進めようと思っても、専門的な人材や、部門横断での対応が必要な場合もあり、その場合はかなりの費用と時間がかかります。対応すること自体は法的義務でないにもかかわらず、なぜそこまでして取り組む必要があるのでしょうか？ 今回の記事では、ウェブアクセシビリティに取り組む意義とメリットを、6つの観点から解説していきます。 理由1：サイト（サービス）を利用できる人が増える 当たり前ですが、ウェブアクセシビリティを確保すれば、自社のサイトやサービスを利用できる人が増えます。実際、どれくらいインパクトがあることなのでしょうか？アクセシビリティを確保することで恩恵を受けやすいと考えられる層を中心に、具体的な数字を交えて見てみましょう。 ❶ 障害を持つ人 視覚、聴覚、認知、運動機能などに関して、さまざまな障害や特性を持つ人がいます。厚生労働省の調査によると、2016年の推
ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
ちゃんと名前で呼べますか？UIコンポーネントの名称クイズ100問【初級編】｜Goodpatch Blog グッドパッチブログ
こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？ ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。 そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。 まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。
ソフトウェア開発を加速させるエンジニアとデザイナーの関係性｜Goodpatch Blog グッドパッチブログ
プロダクト開発の現場では、デザイナーとエンジニアのコミュニケーションが不可欠です。 コミュニケーションする際には、デザインファイルや仕様書、あるいは抽象的な図をもとに議論が行われます。 そんな時、プロダクトを作るという立場では同じであれど、「デザイン」と「エンジニアリング」という別の立ち位置と観点で物事を見ているために意見がぶつかり合うこともしばしば発生します。ですが、そんな時にコミュニケーションを諦めてしまえば、仕様漏れや設計意図が正しく伝わらないような事態が起きたり、より良いインタラクションを生み出す機会を失うなど、品質低下を招いてしまいかねません。 こちらの記事では、UIデザイナーとしてエンジニアとWebアプリケーション開発を協業するなかで、自分なりに意識していることを紹介していきます。 記事の最後に、実際に今一緒に働いているエンジニアメンバーから聞いたこのまま続けてほしいこと・もっ
UXリサーチにおけるフィールドワークについて｜Goodpatch Blog グッドパッチブログ
UXリサーチの手法としてインタビューやアンケート調査を行われることは多いと思います。Goodpatchのサービス設計においてもそれらの手法はもちろん欠かせませんが、他にも様々な手法が存在します。今回はそんなリサーチ手法の一つとして フィールドワーク を取り上げたいと思います。 ※外出自粛でリモートワークの企業が増えている現在は、今回ご紹介するような手法を取り入れることは難しいと思われます。Goodpatch Blogではリモートで実践するユーザーインタビュー、ユーザービリティテストの方法もご紹介しておりますので、ぜひ参考にしてみてください。 フィールドワークとは フィールドワークは社会学や人類文化学などの学問分野において用いられてきた手法です。 研究対象となる現地に赴き、その土地やそこに住む人々を直接観察することや対話することで調査する手法のこと この記事では現地で実施するリサーチ全般と定
【Goodpatch仕事図鑑】UXデザイナー｜Goodpatch Blog グッドパッチブログ
「新卒がカルチャーの作り手になる」と考えるGoodpatchでは、これまでも積極的に新卒採用を行ってきました。現在もUIデザイナー、UXデザイナー、エンジニアの3職種を新卒で募集中です。 そこで学生さんから各職種についてよくいただく質問に対して、メンバーのインタビューも交えながらQ＆A形式でご紹介していきます。 今回はUXデザイナー編です！ UIデザイナー編はこちら エンジニア編はこちら UXデザイナーの仕事とは？ ビジネスの現場におけるUXデザイナーの役割を、Goodpatchでは大きく分けて３つに定義しています。 対ユーザー：より良い体験をデザインする まずはサービスのユーザーにより良い体験をデザインする役割です。これは全てのUXデザイナーに共通する役割で、そのためにプロジェクトの戦略段階から入り込み、次のようなことを行います。 デザインプロセスの設計 ユーザー調査の設計と実施 ユーザ
UXデザイナーのマインドセットを学ぶGoodpatch流の新卒UXデザイン研修｜Goodpatch Blog グッドパッチブログ
はじめに 2021年、Goodpatchには8人の新卒が入社しました。 今年もGoodpatchでは4月から6月までの3ヶ月間で新卒研修を行っています。昨年は新卒の職種ごとに分け研修を行っていましたが、今年は全職種を対象としてUXデザインやUIデザイン、さらには営業の研修を行っています。 今回の記事では、UXデザイン研修がどのような目的で行われていて、どのような内容を学ぶことができるのかをご紹介します。 研修の目当て Goodpatchの新卒向けUXデザイン研修では以下を目当てとしています。 GoodpatchのUXデザイナーとして必要なマインドセットを理解すること Goodpatchに所属している先輩UXデザイナーを知ってもらうこと UXデザインに活用できるたくさんの手法を理解することも重要ではあるのですが、Goodpatchの研修では手法を伝えることよりも、まずはその土台となる Goo
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
UIにも必要な錯視への考慮、デザイナーが行う視覚調整｜Goodpatch Blog グッドパッチブログ
視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。 今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。 視覚調整とは 視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。 身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓） Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw — Give Me Internet (@GiveMeInternet) 2017年9月25日 この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインに
新しいものが大好きなGoodpatchで2月に話題になったアプリ、サービス、デザインまとめ（2019）｜Goodpatch Blog グッドパッチブログ
やっと少しずつ暖かくなってきました！お花見やピクニックに行く季節が待ち遠しいですね。 本記事では、Goodpatchメンバーの間で特に注目の集まったプロダクトやサービス、デザインをご紹介します！ 過去の月間まとめは、こちらをご覧ください。 メルペイ https://www.merpay.com/merchant/ スマホ決済サービスの戦国時代とも呼ばれる中、2月13日にメルペイが誕生しました。メルカリでの売り上げを一般店舗やネットで使える事を特徴としており、メルカリユーザーにとっては非常に便利なサービスと言えるのではないでしょうか。メルペイはスマホ決済としては後発ではありますが、メルカリのユーザー数の多さや、ユーザー間の売買によって動く総金額の大きさを見ると、かなりインパクトのあるスマホ決済サービスになると予想できます。 決済サービスを使うことで得られるメリットが今まで以上に重要視される中
デザイナーファーストな組織デザイン方法｜Goodpatch グッドパッチ
資料を読むと得られる知識 デザイナーをマネジメントするためには、個々のスキルに合ったマネジメントをする必要があります。デザイナーのスキルアップやキャリアアップにつながるマネジメントの成功事例と失敗談を明かします。また、これからのデザイナーに求められるスキルをご紹介します。 この様な方におすすめです デザイン組織でマネジメントをしている人 デザイナーとしてキャリアを積みたい人 組織にデザインカルチャーをインストールしたい人 ※資料イメージ
より良いUIのためのマイクロインタラクション入門 | Goodpatch Blog
この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。 今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。 マイクロインタラクションの理解 マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。 マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。
Photoshop CC新機能 "リンクされたスマートオブジェクト" で震えた。これはUIデザインが捗る！ | Goodpatch Blog
ナレッジ・ノウハウ Photoshop CC新機能 “リンクされたスマートオブジェクト" で震えた。これはUIデザインが捗る！ はじめまして。最近SNSでTシャツを晒される機会が増えたなと感じるUIデザイナーのみっつーです。よろしくお願いします！ 先日Photoshop CCのアップデートがあり色々機能が追加されましたが、その中でも気になる新機能がありましたので、そのことに関してMEMOPATCHで初めて記事を書きたいと思います！ 早速ですが、最近Sketchでデザインすることが増えてきました。 というのも、徐々にpluginが増えてきて Sketch Symbol Plugin 等を使用しpage間でオブジェクトの変更、差し替えが簡単になり、作業がかなり捗るようになってきたからです。（みんなもSketch使ってみたらいいと思う。） 「もうこれからはPhotoshopを使うこと少なくなるの
資料ダウンロード｜Goodpatch グッドパッチ
サービスを成功に導く、短期集中型価値検証フレームワーク、デザインスプリントとは？ - グッドパッチ では、さまざまな企業様とデザイン思考をベースとしたプロセスでアプリやWEBなどのUI/UXデザインの制作を行なっています。 その中一つとして、短期間での価値検証を行うDesignSprintをお客様といっし … デザイン思考を組織にインストールできる、デザインプロセスワークショップとは？ - グッドパッチでは、さまざまな企業様とデザイン思考やUI/UXの考え方に基づいたワークショップを実施しています。 グッドパッチの開発現場で培われたプロセスを体験するワークショップを通じて、UI/UXに欠かせないユーザーを中 …
実務で活かせる！プロトタイピングの具体的な進め方とは？｜Goodpatch Blog グッドパッチブログ
プロトタイピングには、コミュニケーションとコラボレーションが生まれること、デザインプロセスを最適化でき、ユーザーへのフォーカスを常に保てるなど、たくさんのメリットがあります。また、開発フェーズや目的、オーディエンスによってプロトタイプのカタチは異なるという点についてもお話しました･･･ と、色々理想を語りましたが、実際どうやるのかまだモヤモヤしている方もいるかと思います。 そこでこの記事では、実務でもすぐに使えるように、プロトタイピングの具体的な進め方をご紹介します！ プロトタイピングのプロセス さっそく、プロトタイピングのプロセスについて考えましょう。 言うまでもなく、プロトタイピングは全体の開発のプロセスに沿って行われるため、それ固有の、あるいは単体で考えるべきプロセスではありません。 突然、動きを確認できるようなプロトタイプを作り始めるのではなく、前のフェーズで議論を行い、明確になっ
「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
