「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
Goodpatch社員が愛用している、おすすめのプロジェクト進行ツール５選 | Goodpatch Blog
こんにちは！それぞれの会社によって、愛用しているサービスやツールは異なると思います。今回は、社内連絡や、デザインを考えるときなど 、Goodpatchが日常で使っている王道のツールについてご紹介します。 １.Slack https://slack.com/ Goodpatchでは、社内でのコミュニケーションには主にSlackを使用しています。最近スタートアップ界隈で流行り始めてますがGoodpatchは今年の1月から導入しており、日本でもかなり早くから使い始めてます。Slackは、Flickr創立者のStewart Butterfieldさんが作ったメッセージツールです。チャンネルと呼ばれるチャットルームを作ることができます。 Goodpatchでは、各プロジェクトごとのチャンネルの他に、 日報チャンネル デザインレビューチャンネル ディレクター、デザイナー、エンジニアチャンネル 開発系の
雑誌のように美しいレイアウトを生み出すために、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キロバ
Photoshop CC新機能 "リンクされたスマートオブジェクト" で震えた。これはUIデザインが捗る！ | Goodpatch Blog
はじめまして。最近SNSでTシャツを晒される機会が増えたなと感じるUIデザイナーのみっつーです。よろしくお願いします！ 先日Photoshop CCのアップデートがあり色々機能が追加されましたが、その中でも気になる新機能がありましたので、そのことに関してMEMOPATCHで初めて記事を書きたいと思います！ 早速ですが、最近Sketchでデザインすることが増えてきました。 というのも、徐々にpluginが増えてきて Sketch Symbol Plugin 等を使用しpage間でオブジェクトの変更、差し替えが簡単になり、作業がかなり捗るようになってきたからです。（みんなもSketch使ってみたらいいと思う。） 「もうこれからはPhotoshopを使うこと少なくなるのかもな、さよならかな…」と思った矢先に、今回Photoshopのアップデートの一報がきたわけです。今回のアップデートで追加された
Goodpatchのデザイナーが選ぶ、インスピレーションを得られるサイトまとめ | Goodpatch Blog
先日@yajijiさんの「デザイナーとして煮詰まった時に見るサイト9つ」という記事が話題になりましたが、皆さんはデザインする前や、何かアイディアが思い浮かばないときなどにチェックしているサイトはありますか？それぞれお気に入りのサイトがあるかと思いますが、そういったインスピレーションが得られるようなサイトはいくつ知っておいても損はありませんよね。というわけで今回は、Goodpatchのデザイナーが日々チェックしていたり、デザインのインスピレーションを得たいときに見ているサイトをまとめて紹介します！（※DribbbleやBehance、Designer Newsなど、@yajijiさんが挙げていた9つは除いています。） Premiumpixels http://www.premiumpixels.com/ Dribbbleでフォローしたいデザイナーとして紹介したOrman Clarkが運営して
有名Webサービスのこだわりがわかる、ブランドガイドラインまとめ | Goodpatch Blog
皆さんはブランドガイドラインを見たことはありますか？あまり馴染みがないかもしれませんが、ブランドに一貫性を持たせるために作られる企業のロゴやビジュアルなどに関するガイドラインのことで、スタイルガイドと呼ばれることもあります。社内だけでなく社外に向けて公開されている場合も多く、調べてみると有名なWebサービスでは用意しているところがほとんどでした。そこで今回は各サービスのブランドガイドラインをまとめて紹介します！ Facebook https://www.facebookbrand.com/ ロゴやボタン、スクリーンショットなどがダウンロードできます。Webサイトや印刷物などあちこちにロゴやボタンが使用されるFacebookは、データがAI、PSD、PNG、EPSで用意されています。かなり細かくルールを定めていて、もし印刷時に技術的な制約で指定の色を使えないときは白黒で印刷する、という決まり
簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog
しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 （この記事はGoodUIから翻訳抜粋したものです） GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック
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
膨大なコンテンツを美しく、レスポンシブで見せているWebサイトまとめ | Goodpatch Blog
ニュースサイトやイメージギャラリー、ブログなどの情報量やコンテンツが多いWebサイトをデザインするのは大変ではないでしょうか。日々、情報の更新があるようなWebサイトはコンテンツを整理し、かつ見やすいようにレイアウトしなければなりません。そこで今回は「25 Beautiful Content Heavy Websites」で紹介されていた中から “膨大なコンテンツを美しく、さらにレスポンシブで見せているWebサイト” をいくつかピックアップしてまとめてみました！ House http://house.pl/ 大きなメインビジュアルがまず目に入るサイト。縦長長方形のブログ記事と赤い横長の長方形のプロモーション記事で構成されています。 Monocle http://monocle.com/ 写真や各記事のエリアの大きさが異なるWebサイトですがとても整った印象があります。 Esquire ht
パララックスを使ったストーリー性のあるWebサイトまとめ | Goodpatch Blog
昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: 15 Awesome Websites That Tell a Story As You Scroll） Every Last Drop http://everylastdrop.co.uk/ 私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。 Ben the Bodyguard http://benthebodyguard.com/index.php 写真やメモ管理アプリの
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
ビビッドな色使いが目を引く、フラットなUIデザインのアプリまとめ | Goodpatch Blog
Feedly: Your Google Reader, Youtube, Google News, RSS News Reader 14（無料） カテゴリ: ニュース, エンターテインメント 販売元: DevHD – DevHD Inc Website RSSフィードリーダーのFeedly。メインカラーとして鮮やかな黄緑を使っており、カテゴリー部分では色を多用しています。慣れればどのカテゴリーかぱっとわかりそうで良いですね。 Infomatic Website Infomaticは自分のTwitterやFacebookの使用状況を統計で確認できるアプリ。残念ながら日本のアップルストアではダウンロード出来ませんが、青をベースとした配色が綺麗ですね。 Figure
思わず就職したくなるデザインの採用ページまとめ13こ | Goodpatch Blog
こんにちは！ 前回の記事「Webサイトを魅力的にするAboutページまとめ8つ」に引き続き、Webサイトの特定のページをまとめてみました！ 今回まとめたのは「採用ページ」です！ 国内外問わず「優れたデザイン/ 企業のことがよくわかる/ その会社で働きたくなる」をポイントにまとめてみました！ 海外編 Pinterest http://about.pinterest.com/careers/ Pinterestのロゴと同じ赤色と、たくさんの職場内の写真が印象的なページです。 各セクションがリズムよくわかれているので文章がとても読みやすいです。 Kickstarter http://www.kickstarter.com/team 画像と文章の組み合わせ方がとてもきれいです。おもしろいのは採用ページ終盤の「It’s fun!」というセクションにある文章の中の「hack days」にマウスオンする
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
思わず目を引く！クリエイティブな海外のバナー広告デザインまとめ16個 | Goodpatch Blog
ブログやWebサイトを見ていると必ず目に入るのがバナー広告です。 バナー広告は、とりわけその広告先の情報を求めているわけではないが、 潜在的に興味がある人にリーチするための広告です。 デザイナーとしては適切なメッセージを簡潔に伝え、クリックしてもらえるようなバナー広告を作らないといけません。 Creative Web Banner Ad Designsという海外の記事で、Webのバナー広告をデザインするときに下記の事を心に留めておくべきと書かれています。 ◯どこに広告をだすか？ 競合企業がどんなバナー広告を出しているのかを確認し、クライアントのブランドイメージを守りながら競合、またはその他の広告より目を引くものでないといけません。 ◯広告のターゲットは誰か？ 広告のターゲットに合わせたデザインにする ◯その広告は何を販売しているか？ ユーザーが混乱しないようにメッセージ/製品と一致したバナ
Webサイトを魅力的にするAboutページまとめ8つ | Goodpatch Blog
こんにちは！みなさんはWebサイトを見ている時、Aboutページをチェックしますか？ 今回たまたま見つけたWebサイトのAboutページがとても個性的でおもしろかったので、Aboutページについて調べてみました！（そのWebサイトは最後にご紹介します） Aboutページについて調べていたところ、「16 Tips for a Better Website（Webサイトをより良くする16のTips）」という記事にWebサイトをより良くするTipsとしてAboutページのことが書かれていました。（以下翻訳抜粋） ビジネスパーソンや顧客がお仕事をお願いする時、たいていどんな人と仕事をするかに興味が湧きます。あなたのチームの写真や経歴をAbout usページに記載してみてください。技術的なスキルや資格などを書くのもいいですが、趣味や家族、好きな事を書く事で人間味がでます。 確かにAboutページで社
iOS, Mac, win, Androidのアプリアイコンサイズまとめ | Goodpatch Blog
こんにちは！ 最近Goodpatchでアプリの制作依頼をいただくようになったので、この機会にアプリを作る際に必要なアプリのアイコンサイズを一通り調べてみました！ 調べたのは以下の6種類です。調べた限りこれらがまとまっている記事がなかったのでMEMOPATCHで記事にしました。（サイズは全てピクセルです） ◯PC ・Mac OS ・Windows XP ・Windows 8 ◯モバイル ・iOS ・Android ・Windows Phone 7 16 x 16（icon_16x16 .png） 32 x 32（icon_16x16@2x .png） 32 x 32（icon_32x32 .png） 64 x 64（icon_32x32@2x .png） 128 x 128（icon_128x128 .png） 256 x 256（icon_128x128@2x .png） 256 x 25
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーテストする際に使ってみたい、手軽に使える便利なツール5つ | Goodpatch Blog
