アクセシビリティに取り組まないと、企業はどれくらい「損」をする？ 試算する方法をご紹介｜Goodpatch Blog グッドパッチブログ
2024年4月に施行された法改正により、障害を持つ方への「合理的配慮」の提供が、民間企業においても法的義務となりました。これによりウェブデザイン分野では、アクセシビリティ対応の機運がますます高まっています。 この手の話になると、「アクセシビリティに取り組むには、どれくらいのコストがかかるんでしょう？」という質問をよくいただきます。実際に挙げてみると、以下のようなところでしょうか。 アクセシビリティの知識習得に費やす時間 専門家にアクセシビリティ診断を依頼する費用 アクセシビリティに対応するため、Webサイトやプロダクトを改修する費用 こうやって具体的な項目を見ると、アクセシビリティ対策に取り組むことを躊躇する方もいるかもしれませんが、逆に「アクセシビリティに取り組まないコスト」を考えたことはありますか？ アクセシビリティに取り組まないことで、潜在的な市場機会を逃し、顧客満足度を低下させるリ
デザイナーのためのWCAGの歩き方｜Goodpatch Blog グッドパッチブログ
近年、日本国内でのアクセシビリティの取り組みは官民の組織区分にかかわらず活発なものとなっています。特に昨今ではデジタル庁がアクセシビリティの確保・維持・向上に取り組んでいる事例を耳にしてアクセシビリティにさらなる関心を寄せている人は多いのではないでしょうか。 そんなアクセシビリティへの理解を深める上で欠かせないのがウェブコンテンツのためのアクセシビリティガイドラインである「WCAG」です。WCAGはウェブエンジニアにとっては一般的に活用されるものになってきていますが、ボリュームの多さや内容の複雑さから、エンジニアと比べるとデザイナーに対しての普及は途上中という現状があります。 一方でアクセシビリティ対応はエンジニアだけの力で取り組むことは難しく、取り組みのためにはデザイナーの力が必須です。デザイナーがアクセシビリティに取り組むことによってユーザーをより理解できるようになる他、特に視覚表現に
Goodpatch流再解釈「デザインの5段階モデル」｜Goodpatch Blog グッドパッチブログ
Jesse James Garret氏がおよそ20年前に提唱した“The Elements of User Experience”は、日本では通称「UXの5段階モデル」と呼ばれ、長年にわたり多くのデザインの現場で引用されてきました。わたしたちもこのモデルのお世話になっていた立場ですが、新たに「デザインの5段階モデル」と称し、より応用の効きやすいかたちでの再解釈と発展を試みています。今回はGoodpatch流再解釈である「デザインの5段階モデル」について、オリジナル版との違いと発展させた部分、そしてその背景を簡単にご紹介します。 「UXの5段階モデル｣（オリジナル）改め、 ｢デザインの5段階モデル｣ （Goodpatch再解釈）と称し、オリジナルからの破壊的変更はなるべく行わずにいくつかの再解釈と発展を試みています。モデルの抽象度合いを5段階に区切る発想とそれぞれの名称はそのまま継承し、特定
排除を考えることから始めるインクルーシブデザイン｜Goodpatch Blog グッドパッチブログ
Goodpatchでは先日、インクルーシブデザインについて学び合う社内勉強会を行いました。 本ブログでは勉強会でお話しした内容をもとに、インクルーシブデザインとは何かについてや、インクルーシブデザインを実践する際のポイントなどについて紹介したいと思います。 インクルーシブデザインとは インクルーシブデザインの定義とポイント インクルーシブデザインにはさまざまな定義があります。この記事の中ではインクルーシブデザインを以下のように定義しています。 インクルーシブデザインとは、あらゆる人間の背景や能力における多様性を理解し、彼らと共に課題を解決するデザイン手法です。 また、Microsoftのインクルーシブデザインチームではインクルーシブデザインを以下のように解釈しています。 インクルーシブデザインとはデジタル環境から生まれた、幅広い人間の多様性を尊重し、活用するためのデザイン方法論です。 最も
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
より良いUIのためのWebアニメーション・パフォーマンス | Goodpatch Blog
この記事はGoodpatch Advent Calendar 2018 1日目の記事です。 フロントエンド開発をしているとアニメーションを実装する機会が度々あります。たとえば、私が担当しているモチベーションクラウドでは、以下のように円グラフにアニメーションを加えています。 アニメーションを用いる上で意識したいポイントとして「パフォーマンス」があります。アニメーションのパフォーマンスについて、この記事では主に“滑らかさ”を指すことにします。 昨今ではハードウェアの進歩もあり、あまり意識しなくてもアニメーションのパフォーマンスが問題になることは少ないかもしれませんが、少し複雑なアニメーションやアニメーション以外の要因によってアニメーションの品質劣化が起きる場合には多少のテクニックが必要になってきます。 今回はUIにおいてアニメーションのパフォーマンスが重要とされる背景とWebアニメーションにお
カスタマージャーニーマップが必要な理由とは？目的と作り方｜Goodpatch Blog グッドパッチブログ
しかし、それだけではユーザーがサービスに辿り着いてから、どのような意思決定をして、何を考えて購入しているのかまでのユーザーの行動と感情の変化を把握することができません。 そこでペルソナを作成した次のステップ、カスタマージャーニーマップを作ることで、ユーザーの行動とその感情の変化を時系列でまとめることができます。ターゲットユーザーとして策定したペルソナが、どのような行動をして、何を感じているか時間軸に沿って追いかけてみましょう！ 今回はカスタマージャーニーマップを知らない方へ、作成する目的や作り方のポイントをご紹介します。 Goodpatchでは、新規サービスの立ち上げやサービス・プロダクトの改善のご相談も受けております。 ⇒【資料ダウンロード】ユーザー課題を把握して素早く価値検証を回すフレームワーク「デザインスプリント」とは？ カスタマージャーニーマップとは ユーザーが商品やサービスに関わ
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
ユーザーの行動をデザインする前に「リグレット・テスト」のすすめ｜Goodpatch Blog グッドパッチブログ
本記事は、ベストセラー Hooked（日本語版）の著者、ニール・イヤール氏のブログ記事を著者及び記事掲載元から許可を得て、翻訳及び掲載しています。デザインが強力であればあるほど、ユーザーはそのデザインに従った行動を取ります。でも、ユーザーが本当は望んでいなかった行動に導いてしまうことは、倫理的に正しいのだろうか？それは本当に優れたデザインなのだろうか？そんな問いに対し、ニール氏はその名も「リグレット・テスト（後悔テスト）」というアイディアを提案しています。 デザイン、及びデザイナーとしての倫理観について考えたことのある方は是非お読みください。 元記事：Want to Design User Behavior? Pass the ‘Regret Test’ First Nir Eyal, January 2018 （文中リンクは原文ママ） リグレット・テストのすすめ – ユーザーの行動をデザ
プロジェクト開始前にも使える！提案時にデザインスプリントを取り入れる３つのメリット｜Goodpatch Blog グッドパッチブログ
クライアントワークに従事される皆さんは、受注前のデザイン提案をどんな手順で作っていますか？ 今回は受注前の提案書作成の際に、デザインスプリントを取り入れるメリットをデザイナーの視点でお話ししようと思います。クライアントワークだけでなく、事業会社でデザイン提案をする際にも、きっと役立つお話だと思います。 スプリントとは デザインスプリントは、GV(旧:Google Ventures)がスタートアップ支援の為に用いているプログラムで、スタートアップだけでなく企業の規模感に合わせて活用することが出来る柔軟なフレームワークになっています。 プログラムの基本構成は5日間で構成されており、時間的な制限の中で素早く「理解」→「アイディエーション」→「アイデアの決定」→「プロトタイプ」→「検証」を行うフレームワークになっています。 スプリントについては以下で詳細を説明しています。 なぜ提案書の段階でデザイ
最適なタスク管理方法がわかる！おすすめのガントチャートとカンバンの比較｜Goodpatch Blog グッドパッチブログ
日々の業務において、スケジュールやプロジェクトの日程・進捗管理は重要です。プロジェクトが非効率的に進んでいく要因として、プロジェクトの管理を行うツールや担当者が明確化されていないという課題があります。また、仮にExcelをタスク管理ツールとして運用した場合にも、見づらいなどの要因から、逆に仕事が非効率的になるという不満が渦まくことも少なくありません。 誰が何をどこまで遂行したのかが把握できず、暗闇の中でプロジェクトが進んでいく・・・そんな経験を一度はしたことがあるのでは？ 本記事では、プロジェクト進行やマネジメントにおいて、そのような課題を抱えているプロジェクトマネージャーやメンバーが使えるおすすめのタスク管理ツールをご紹介します。これらのツールをプロジェクトで上手く使いこなして、業務効率化を測りましょう！ 世界中で人気を集めているタスク管理ツール 世界にはさまざまなタスク管理ツールがあり
失敗から学んだ、ユーザーインタビュー23の心得｜Goodpatch Blog グッドパッチブログ
サービスやプロダクトの開発プロセスにユーザー視点は不可欠です。しかし頭では理解していても、いざユーザー視点でものづくりを始めようとすると、最初のプロセスとしてなんとなく「ユーザーインタビュー」を採用してしまいがちです。 もしあなたがユーザーインタビューとは単純に「話を聞くこと」だと考えているとしたら、それは大きな間違いでしょう。目的設定も下準備も不十分な状態でのインタビューは、ものづくりの質の向上につながるユーザーインタビューにはなりえません。 ではユーザーインタビューには、どのような準備や心構えが必要なのでしょうか。今回は、筆者が失敗経験を元に学んだ23個の心得をご紹介します。 下準備を始める前に、まずはバイアスを外す ユーザーインタビューには下準備が必要だと前述しましたが、実はもっとも大切な準備が「バイアスに気づく」ことです。私たちは普段から、無意識のうちにあらゆる事柄を自分の価値観で
Reboot.css Bootstrap製Reset.cssからCSSの新しいスタンダードを読み解く｜Goodpatch Blog グッドパッチブログ
皆さんが新しくWebベースのプロジェクトを始める際に、様々なパッケージをインストールするかと思いますが、どんなプロジェクトを始めるにせよ、大抵はその中になんらかの Reset.css が含まれていることでしょう。 Reset.css とは、Google Chrome やIEなどの各ブラウザが独自にもっているデフォルトCSSをブラウザごとに差異がないように平準化し、フロントエンド開発者がデザインをしやすいようにするために読み込まれる CSS です。 例えばhtmlファイルに <h1>Hello CSS</h1> と書いた時に、なにもCSSを書かなくても太文字で大きく表示されるのはデフォルトCSSが適用されているためです。 Reboot.css はCSSフレームワークとしてgithubで最もスターを集めている Bootstrap が、現在開発中の v4 から採用している新しい Reset.cs
サービスリニューアルする際、チームでユーザー体験を向上させるためのサービスブループリント｜Goodpatch Blog グッドパッチブログ
クライアントワークにおいて「このサービスのUXをよくしてほしい」というお題のプロジェクトに携わる人がいるかと思います。UXという言葉の捉えるところが大きく、一体何からやったやいいのか戸惑うこともあるかと思います。また、クライアントワークにおいて営業利益に関わる数値の共有をいただくことが難しい場合があります。その際、数値的な情報を持たずに「サービスのUXをよくする」ことにコミットするかの改善点の洗い出しや施策検討の方法を共有できればと思います。 サービスブループリントとは サービスに携わるユーザーやステークホルダー（サービス運営に携わる関係者等）がサービスのタッチポイントにおいて相互に関係するかを明確にした図を指します。サービスブループリントを用いた例ですとアメリカの病院のサービスプロセス改善プロジェクトがよくネットで見受けるかと思います。 参照: サービスブループリントを使って病院のサービ
【考えの伝え方】情報を視覚化してみよう！｜Goodpatch Blog グッドパッチブログ
自分の考えをうまく人に伝えられないことはありませんか？ 自分の頭の中にある考えやイメージを、直接相手の頭の中に送ることができれば簡単に伝えることができるかもしれませんが、そういうわけにもいきません。 ですが、直接送ることはできなくても、情報を視覚化することでより伝わりやすいように工夫することは可能です。 実際に身の回りでは、情報を伝えるために視覚化されたもので溢れています。 そこで今回は、考えを伝える1つの手段として、情報を図解して視覚化する方法をご紹介します。 「情報を視覚化する」とは？ 情報の視覚化とは、文字通り、情報（考えていることや伝えたいこと）を、図解表現などを用いて目に見える状態にすることです。 メリット 自分の思い描いているイメージや、言葉で明確に言い表すことができない事柄を目に見えるようにすることで、その情報の関係性や構造が的確に伝わります。 また、人は実際に目に見えるもの
クリエイティブなコミュニケーションをデザインする -本当のフィードバックとは-｜Goodpatch Blog グッドパッチブログ
グッドパッチには多くのデザイナー、エンジニア、プロジェクトマネージャーといったクリエイティブな人材が在籍していますが、彼ら彼女らを取りまとめる「マネージャー」というポジションの人間もいます。 現在のデザイナー・エンジニア組織は、専門性ごとのグループ単位でマネジメントが行われています。 クリエイティブな人材をマネジメントすることは、とてもチャレンジングなことです。 多くの人が自分で考え自分でものを生み出せるので、タスクレベルの指示や期日の管理などの細かいマネジメントよりも、向かう方向性を合わせて、そこに向けた動きをフォローするようなスタンスの方が合っていると感じています。 そういった考えの中で、常日頃、コミュニケーションのポイントとなると考えているのが、フィードバックです。 今回は、フィードバックをクリエイティブコミュニケーションの１つの手法と捉え、フィードバックする側・される側の心構えを共
Goodpatch社員が愛用している、おすすめのプロジェクト進行ツール５選 | Goodpatch Blog
こんにちは！それぞれの会社によって、愛用しているサービスやツールは異なると思います。今回は、社内連絡や、デザインを考えるときなど 、Goodpatchが日常で使っている王道のツールについてご紹介します。 １.Slack https://slack.com/ Goodpatchでは、社内でのコミュニケーションには主にSlackを使用しています。最近スタートアップ界隈で流行り始めてますがGoodpatchは今年の1月から導入しており、日本でもかなり早くから使い始めてます。Slackは、Flickr創立者のStewart Butterfieldさんが作ったメッセージツールです。チャンネルと呼ばれるチャットルームを作ることができます。 Goodpatchでは、各プロジェクトごとのチャンネルの他に、 日報チャンネル デザインレビューチャンネル ディレクター、デザイナー、エンジニアチャンネル 開発系の
10月1日デザインの日にPrott正式リリース！Prott iOSアプリの使い方教えます！ | Goodpatch Blog
みなさん、10月1日って何の日か知っていますか？！なんと、今日は通商産業省(現経済産業省)が選定した「デザインの日」！そんなデザインの日に、 UIデザインを特化しているGoodpatchが開発しているProttが正式リリース！今回のMEMOPATCHではiOSアプリの紹介を主に、今回の正式リリースの内容をお届けします！ 正式リリースについて Prott（プロット）とはこのMEMOPATCHを運営しているグッドパッチが開発しているモバイルアプリやサイトの為のプロトタイピングツールです。2014年4月にベータ版を公開して以来、多くの方にお使い頂いており、ついに正式リリースとなりました！「高速プロトタイピング＋新しいコミュニケーション」をコンセプト日々開発を進めています。 ベータ版との違いーアプリ開発チームにむけたよりパワフルなツールへー ・最新のiPhone 6などのiOSや、Androidな
雑誌のように美しいレイアウトを生み出すために、Flipboardが開発したレイアウトエンジン | Goodpatch Blog
はじまり 2010年、私たちはFlipboard Pagesという、Webの記事をiPad向けにマガジンページにするというレイアウトエンジンを作りました。 Flipboard Pagesは、Vanity FairやNational Geographicと言った世界一流の出版社のコンテンツをページ割します。 Pagesは、それぞれの出版社のブランドアイデンティティとカスタムタイポグラフィーを再現する美しいレイアウトを生み出すことが出来ます。限定されたモバイルデバイス（例えばiOS 3.2のオリジナルiPad）でも充実かつ高いパフォーマンスでレンダリングするために、PagesはCSS3、SVG、そしてvanilla JavaScriptを使いました。出版社のレイアウトのためのダウンロードファイルサイズは平均すると、およそレイアウト、スタイリング、フォント、ネームプレートイメージなどで90キロバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今すぐSublime Text を消してAtom をダウンロードすべき5つの理由
