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

今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた

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

Goodpatchのフロントエンド定例より皆様へ情報を共有する場「Codepatch」第三回！ 初めまして、iOSデベロッパのseiyaです。 今回は前回の記事「【Codepatch #02】PhantomJSを使ってスクリーンキャプチャを自動化、他」で少し触れたProtractorを始め下記の項目でお送りします。 ・Protractorでテスト、スクショの撮影を自動化 ・MixinライブラリBourbon紹介 ・楽々Framer.js! shortcuts-for-framer ProtractorとはAngularJSのE2Eテストフレームワークです。WebDriverJSという、JavaScriptでブラウザを動かすための仕組みを元に作られています。 そのため前回のCodepatchで取り上げたCasperJSと異なり、様々なブラウザでの動作が確認できたり、手元のブラウザと全く同じ見

土屋「インターンシップ、募集かけてみない？」 小島「まじすか！超おもしろそうっすね＼(^o^)／」 土屋「じゃ、担当は小島くんで！」 小島「ファッ？！」 そんなわけで、本記事はサマーインターンシップ担当となりました小島がお送りいたします。 さて、今回サマーインターンシップをやるにあたって私がまず考えたのは この催しの中でグッドパッチが学生の皆様に伝えられることってなんだろう？ということでした。 企業がインターンシップをやる理由として ・本採用のお試し期間を設けることで求職者と企業のアンマッチを防ぎたい （助成金制度などもあります。参考：http://www.chusho.meti.go.jp/keiei/koyou/jinzai.htm） ・新卒採用において、優秀な学生を囲い込みたい （４週間で４０万とかハンパない…。参考：http://line-hr.jp/archives/384651

はじまり 2010年、私たちはFlipboard Pagesという、Webの記事をiPad向けにマガジンページにするというレイアウトエンジンを作りました。 Flipboard Pagesは、Vanity FairやNational Geographicと言った世界一流の出版社のコンテンツをページ割します。 Pagesは、それぞれの出版社のブランドアイデンティティとカスタムタイポグラフィーを再現する美しいレイアウトを生み出すことが出来ます。限定されたモバイルデバイス（例えばiOS 3.2のオリジナルiPad）でも充実かつ高いパフォーマンスでレンダリングするために、PagesはCSS3、SVG、そしてvanilla JavaScriptを使いました。出版社のレイアウトのためのダウンロードファイルサイズは平均すると、およそレイアウト、スタイリング、フォント、ネームプレートイメージなどで90キロバ

Goodpatchは外で使う検索サービス、Pathee(パシー)のUIデザインを担当しました。インタビューとして、Patheeのサービスを作られたTritrueの寺田真介さんと廣瀬誠さん、iOSアプリ制作を担当されたNotespaceの河村真也さん、弊社代表の土屋尚史、UIデザイナーの貫井伸隆、ディレクターの瀧本優の6人にお話をお伺いしました。 Patheeのサービスについて 左から、河村真也さん、廣瀬誠さん、寺田真介さん ―― では、まずPatheeのサービス内容について教えて下さい。 寺田 Patheeは外での検索体験を変えるサービスです。全ての情報を場所と紐づけて、整理してユーザーに提供します。例えばGoogleで「カレー」と検索すると、結果1位はカレーについて書かれたWikipediaのサイト、2位はカレーレシピを紹介しているCookpadのサイトです。外にいる時に、Wikiped

先日@yajijiさんの「デザイナーとして煮詰まった時に見るサイト9つ」という記事が話題になりましたが、皆さんはデザインする前や、何かアイディアが思い浮かばないときなどにチェックしているサイトはありますか？それぞれお気に入りのサイトがあるかと思いますが、そういったインスピレーションが得られるようなサイトはいくつ知っておいても損はありませんよね。というわけで今回は、Goodpatchのデザイナーが日々チェックしていたり、デザインのインスピレーションを得たいときに見ているサイトをまとめて紹介します！（※DribbbleやBehance、Designer Newsなど、@yajijiさんが挙げていた9つは除いています。） Premiumpixels http://www.premiumpixels.com/ Dribbbleでフォローしたいデザイナーとして紹介したOrman Clarkが運営して

月末になるとやってくる、Goodpatchのまとめブログです。冬の足音が聞こえ始め、もうそろそろ街がイルミネーションで埋まる季節になりましたね。2013年もあと9週間ほどで終わりです！ さて、今月もGoodpatch社内で共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します！ 過去のまとめ： 新しいものが大好きなグッドパッチで9月に話題になったアプリ、サービス、デザインまとめ 新しいものが大好きなグッドパッチで8月に話題になったアプリ、サービス、デザインまとめ 新しいものが大好きなグッドパッチで7月に話題になったアプリ、サービス、デザインまとめ アプリケーション MUSIXMATCH http://musixmatch.com/ カラオケの様に歌詞を追って表示してくれる音楽再生アプリケーション。動画がとてもおもしろく、アプリケーションの利用シーンがわかりやすくていいで

色について 自分の会社 / サービスのロゴ、Webサイトなどで元々使っていた色を、そのままiOSアプリのアイコンに使うことは一般的に行われますが、こうして並べてみて、色の使われ方はそれだけではないということに気付きました。 Skype : 空→シアン、Vine : つる植物→グリーン、Bonfyre : 火→オレンジ、といったサービス名が表すモノの色を使っているケースが存在していることが分かってきました。さらに、そのモノからサービスのコンセプトを想像することができました。個人的にはSkype : 「世界中のどこでも繋がる」→空→シアン、Vine : 「ショートビデオがループする」→つる植物→グリーン、Bonfyre : 「会話に火がつく」→火→オレンジ、というようなコンセプト→モノ→色の流れを想像しました。また、Freeshot : Dribbble→マゼンタ、Tracker for Tw

みなさんはお仕事をされているときに、どのようなツールを用いて作業をしているでしょうか。 何かいいものがないかと探している方、まず何を使ったらいいのかわからないという方など、様々な方がいるかと思います。 先日Goodpatchのメンバーページ(⇒ABOUT)ができたので、今回は、Goodpatchのデザイナーに仕事でどのようなツールやアプリを使っているのか、またなぜ使っているかという理由を聞いてみました。 これらがみなさんの参考になれば嬉しいです！ UIデザイナー(小林幸弘さん) コバさんは、新しいツールやサービスが出たときにはとりあえず新規登録してみて、インタラクションであったり、見た目であったりを確認するようにしているそうです。その中でUIが細かいところまで考えられているものや、個人的に好きな見た目だったら使い続けるのだとか。 4コマノート、Notepod アプリ、スマートフォンサイトの

エンジニアが立ち上げた会社と言えば、GoogleやAmazon、Facebookなどが有名ですが、デザイナーが立ち上げた会社と聞いて皆さんはどんな会社を思い浮かべますか？その優れたデザインで話題になったPinterestやPathなどのサービスは、デザイナーが共同創業者として名を連ねており、デザイナーが会社を立ち上げることは珍しくなくなってきました。そこで今回のMEMOPATCHでは、創業者（または共同創業者）がデザイナーのWebサービスを8つ紹介します！ Pinterest https://pinterest.com/‎ デザイナーEvan Sharpは友人二人とサイドプロジェクトとしてPinterestを作りました。とはいえあくまでサイドプロジェクトであったため、その後Facebookでデザイナーとして働きはじめます。EvanはPinterestが気になっていたものの、当時のPinte

複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M