UXデザイナーが実践するチームデザイン！UX Design Meetup イベントレポート | Goodpatch Blog
UX Design Meetupとは みなさんの会社にUXデザイナーは何人いますか？同じ会社に、UXデザイナーが何人もいる状況は少ないのではないでしょうか？ UXデザイナーとは、プロダクトの戦略策定を含む上流工程の設計から、ユーザーインタビュー、ペルソナ定義、カスタマージャーニーマップなどを用いて体験をデザインする職種です。チームとして、UIデザイナーやエンジニアと働く機会が多いことも特徴ですが、UXデザイナーとして働く人はまだまだ少なく、企業でのUXデザイナーの需要は日々高まっています。 今回はUXデザイナーとしてキャリアアップしたい人のために、横でコミュニケーションを取るためにミートアップを開催しました。 登壇者は、グッドパッチがクライアントワークでプロトタイピングをお手伝いさせていただいたUnipos株式会社 CXOの矢口 亮太郎さん、そして株式会社グッドパッチ DesignDiv.
サービスリニューアルする際、チームでユーザー体験を向上させるためのサービスブループリント｜Goodpatch Blog グッドパッチブログ
クライアントワークにおいて「このサービスのUXをよくしてほしい」というお題のプロジェクトに携わる人がいるかと思います。UXという言葉の捉えるところが大きく、一体何からやったやいいのか戸惑うこともあるかと思います。また、クライアントワークにおいて営業利益に関わる数値の共有をいただくことが難しい場合があります。その際、数値的な情報を持たずに「サービスのUXをよくする」ことにコミットするかの改善点の洗い出しや施策検討の方法を共有できればと思います。 サービスブループリントとは サービスに携わるユーザーやステークホルダー（サービス運営に携わる関係者等）がサービスのタッチポイントにおいて相互に関係するかを明確にした図を指します。サービスブループリントを用いた例ですとアメリカの病院のサービスプロセス改善プロジェクトがよくネットで見受けるかと思います。 参照: サービスブループリントを使って病院のサービ
デザインとは課題解決である。では課題解決の思考法は？｜Goodpatch Blog グッドパッチブログ
「デザインとは課題解決である」とよく聞きます。 サービスをデザインする時はユーザーの課題やビジネスの課題を、組織をうまくデザインして発展させていくためには組織的な課題を解決します。どのような仕事も課題解決の連続です。課題解決がうまくできれば、仕事のスピードやクオリティの向上に直結します。 この記事では、個人的に意識している課題解決の思考法をご紹介します。 1. 課題の特定 課題とは現状と理想の状態のギャップです。現状を正確に把握した上で、理想を明確に定義する必要があります 現状の把握 サービスに関する課題であれば、定性・定量の調査から現状を把握します。組織的な課題であれば、1on1やKPTで意見をすいあげるのが有効的です。 理想の定義 理想の定義が曖昧だとあれこれ意見が発散して悩んだ結果、結局意見がまとまりません。ゴールやコンセプトという形で明確に理想の状態を定義できると、チームメンバー全
「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
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
なぜ日本のWebデザインはダサいのか？｜Goodpatch Blog グッドパッチブログ
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
デザイナー版のGitHub！デザインのバージョン管理システムAbstract社内勉強会を開催しました！｜Goodpatch Blog グッドパッチブログ
ナレッジ・ノウハウ デザイナー版のGitHub！デザインのバージョン管理システムAbstract社内勉強会を開催しました！ エンジニアたちにはGitHubがありますが、デザイナーには今までデザインの履歴を管理するシステムがありませんでした。そこで2017年7月にローンチされ世界中で注目を集めているのがAbstractです。 デザイナーたちのためのワークフロープラットフォームとして、デザインプロセス上の強い不満を解消するのではないかとデザイナーたちから期待されています。 以前Goodpatch Blogでは、Millanoteの活用法をご紹介しましたが、Goodpatchには新しいツールを積極的に使うカルチャーがあります。そんな中で今回はProttのリードデザイナーであり、先日もデザイナーデーを主宰したBertが社内のデザイナーに呼びかけ勉強会を開催しました！ 初回ということもあり社内でまだ
Goodpatchのデザイナーが仕事で使っているデスクトップアプリ・Webサービス・手書きツールまとめ | Goodpatch Blog
みなさんはお仕事をされているときに、どのようなツールを用いて作業をしているでしょうか。 何かいいものがないかと探している方、まず何を使ったらいいのかわからないという方など、様々な方がいるかと思います。 先日Goodpatchのメンバーページ(⇒ABOUT)ができたので、今回は、Goodpatchのデザイナーに仕事でどのようなツールやアプリを使っているのか、またなぜ使っているかという理由を聞いてみました。 これらがみなさんの参考になれば嬉しいです！ UIデザイナー(小林幸弘さん) コバさんは、新しいツールやサービスが出たときにはとりあえず新規登録してみて、インタラクションであったり、見た目であったりを確認するようにしているそうです。その中でUIが細かいところまで考えられているものや、個人的に好きな見た目だったら使い続けるのだとか。 4コマノート、Notepod アプリ、スマートフォンサイトの
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
有名Webサービスのデザインから考える、上手な料金プランの見せ方 | Goodpatch Blog
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M
Sketch.appで描かれたDribbble投稿作品まとめ10こ | Goodpatch Blog
最近のMEMOPATCHではSketch.appについての記事を続けてアップしているのでSketchに興味を持たれている方もいるのではないでしょうか？ 前回記事: 「Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app」 前々回記事: 「Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ」 Sketchをダウンロードして気になるのが、どんなものを作れるかではないでしょうか。Sketchはまだ新しいアプリですがいくつかのクオリティの高い作品がDribbbleなどのデザイン投稿サイトにあがっています。そこで今回はSketchで描かれたアイコンをご紹介します！ （各リンクはDribbbleの作品ページに飛びます） Mailbox client [.sketch] https://dribbble.com/shots/1
Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ | Goodpatch Blog
つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、Adobe製品に比べたら圧倒的に情報量が少ないSketch。Adobe製品と同じような機能やショートカットも多いですが、使いこなせるようになるまでは少し時間が掛かりそうです。Goodpatchでもマニュアルや記事を読みながら、隙間時間にSketchを触ってその機能を確かめています。というわけで今回は、Sketchの基本的な機能や、発見した小技、ショートカットなどをまとめてみました。 先日アップした「
Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app | Goodpatch Blog
Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFontcaseもリリースしています。 （Sketchを使い始めている海外のデザイナーたち→「Sketch App vs Photoshop」、Dribbbleにsketchで描いた作品をアップしている人も→[.Sketch] Wireframe UI kit） アイコンやWebサイトのデザインもきれいで、Goodpatch社内でも最も話題になっているアプリ。Sketchも使ってみようと盛り上がっています。ただSketchにつ
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
【インタビュー記事】日本人初のDribbblerに聞く、優れたUIデザイナーになる為の秘訣とは: 前編 | Goodpatch Blog
以前にもMEMOPATCHで紹介した（「優れたアイコンデザイナーまとめ【Dribbble編】」）でも紹介したDribbble、ここに作品を投稿できるのは招待を受けた本当に優れたデザイナーだけです。現在Dribbbleに投稿できる日本人デザイナーは90名弱ほどいるのですが、その中で初めてDribbble投稿者（通称: プレイヤー）になったのが今回インタビューを引き受けてくださったのが、貫井伸隆氏。今回貫井氏にUIデザインについて色々伺ってみたいと思います。 元々はコーダーでサイトの動きを突き詰めいていくうちにUIデザインに出会った ーー貫井さんは日本人初のDribbblerということなのですが、そこに至るまでの経緯を教えいただけますか 中学校まではシェフやパティシエを目指していました。料理の立体造形や色味の美しさ、お皿とのバランスなどに興味があったんです。 その流れで高校は飲食の専門高校を受
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
グッドパッチのディレクターが愛して止まないワイヤーフレームツール | Goodpatch Blog
ステンシル ステンシルの中からワイヤーフレームを選び、下のボックスからドラッグ&ドロップで挿入します。 メニューバーのボタンをクリックすると設定画面が出てきます、この画面で、好きな値に変形できます。 そして背景はロックすることをおすすめします！ロックすることで、ほかの要素を動かすときに背景が影響を受けなくなりますのでおすすめです。 グループ ある程度要素がまとまったらグループ化すると作業が楽になりますよ！ 画像挿入 画像も簡単に挿入できます、Cacooは画像を自由に変形させることができるんですが、この機能は便利です。画像を無理矢理、枠におさめることが可能です。 （本当はちゃんとサイズを計算して画像も作りますが急ぎのときなどは便利です。） 書き出し 完成したら、書き出します。 無料版はPNGのみ回数無制限で、PDFなどは３回まで無料となってます。 簡単にワイヤーフレームが完成しました。次はこ
なぜ日本のWebデザインはダサいのか？ | Goodpatch Blog
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
Webデザイナーにおすすめ、お気に入りのWebサイトをストックしておくツール4つ | Goodpatch Blog
気に入ったデザインのWebサイトをブックマークして、後で見ることはできますが、 デザインが気に入って保存したのであれば、デザインからブックマークを選びたいですよね。 それができるアプリがWebblaです。 上がアプリの画面です。 iPhotoに似たシンプルなデザインなのでとても使いやすいです。 ブックマークの方法は、URLを直接入力（⌘ Nで入力）/配布されているブックマークレットを使う（Preferences>control にブックマークレットがあります）/拡張機能を使う（safariのみ）があります。 保存をすると「All Bookmarks」にブックマークがサムネイル表示されます。 さらにアプリ内でフォルダ分けすることができます！ （COLLECTIONS、⌘ shift Nで新規フォルダ） これを使うことで、自分でジャンル分けや整理することができます。 お気に入りデザインのサイト
短時間、高クオリティ！Appleデバイスのはめ込み画像が簡単に作れるMacアプリ「Promotee」 | Goodpatch Blog
このアプリを使うとできるのが下記のような画像です。 簡単に「Promotee」の使い方を説明します！ 使い方 使い方はとてもシンプルです！ 起動するとすぐにこの画面が開きます。 上のデバイス一覧からはめ込み画像を作りたいものを選択します。 矢印のところにはめ込みたい画像をドラッグ&ドロップ できました。 最後に保存先を指定して終了！ 簡単ですよね！ この手でiPhone4Sを握っているテンプレート以外にも iPhone5、iPad、Mac Book Air、Android（Nexus4, 7, 10）もあります！（全27種類） （下記画像参照） 斜めの画面にも対応されてる！ iPhoneやiPadが斜めになっているものもありますが、 ちゃんとはめ込み画像も斜めに加工されているのがすごいです！ はめ込む画像のサイズ、比率はiPhoneの2:3やiPadの3:4以外でも使用可能です。 （下の画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
