エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた！ | MEMOPATCH

2015/03/17 139 users ナレッジ ワイヤーフレーム グッドパッチ 個々 案件

先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！ １.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進... 続きを読む

Goodpatch社員の必須ツール５選 | MEMOPATCH

2014/10/21 192 users

こんにちは！それぞれの会社によって、愛用しているサービスやツールは異なると思います。今回は、社内連絡や、デザインを考えるときなど 、Goodpatchが日常で使っている王道のツールについてご紹介します。 社内全体 １.Slack https://slack.com/ Goodpatchでは、社内でのコミュニケーションには主にSlackを使用しています。最近スタートアップ界隈で流行り始めてますがGo... 続きを読む

10月1日デザインの日にPrott正式リリース！Prott iOSアプリの使い方教えます！ | MEMOPATCH

2014/10/01 203 users Goodpatch Prott iOSアプリ グッド みなさん

みなさん、10月1日って何の日か知っていますか？！なんと、今日は通商産業省(現経済産業省)が選定した「デザインの日」！そんなデザインの日に、 UIデザインを特化しているGoodpatchが開発しているProttが正式リリース！今回のMEMOPATCHではiOSアプリの紹介を主に、今回の正式リリースの内容をお届けします！ 正式リリースについて ProttとはこのMEMOPATCHを運営しているグッド... 続きを読む

Goodpatchデザイナーがインプットに利用しているサイトまとめ | MEMOPATCH

2014/08/01 106 users Goodpatch インプット 各々 デザイナー 成果

「Open Knowledge Sharing」の言葉の元、Goodpatch内ではメンバーが各々自分のアンテナを張り、面白い情報を共有しています。その成果は毎月のまとめとして当ブログにアップされる他、仕事に直接活かされることもありますし、間接的にも各々の力となっています。今回はGoodpatchのデザイナーが情報のインプットに利用しているサイトをまとめました。英語サイトも多いですが、英語がわから... 続きを読む

【Yosemiteの新機能】Javascriptでアプリケーションを操作し、面倒な作業を自動化してみた | MEMOPATCH

2014/07/15 249 users Yosemite Syo システムアプリケーション Appl

初めまして、ProttのフロントエンドエンジニアのSyoです。よろしくお願いします！ 実は皆さんもう既にご存知と思いますが、Mac OS XにはAppleScriptというスクリプト言語があり、システムアプリケーションや一部のサードパーティ製アプリをコントロールすることができます。これより日常中繰り返し同じ操作する所はプログランミングで操作を自動化することができるので大変便利です。ただし、Appl... 続きを読む

雑誌のように美しいレイアウトを生み出すために、Flipboardが開発したレイアウトエンジン | MEMOPATCH

2014/06/02 450 users Flipboard レイアウト プロセス 著者 雑誌

雑誌のページをめくるように、美しいレイアウトでニュースやブログ記事を読めると人気のFlipboard。その雑誌のようなレイアウトを生成するレイアウトエンジンについて、Flipboardのエンジニアブログに“Layout in Flipboard for Web and Windows”というタイトルで解説されていました。そのレイアウトを生み出すまでのプロセスがあまりに面白かったので、今回その著者の... 続きを読む

Photoshop CC新機能 “リンクされたスマートオブジェクト” で震えた。これはUIデザインが捗る！ | MEMOPATCH

2014/01/21 116 users PLUG スマートオブジェクト UIデザイン UIデザイナー

はじめまして。最近SNSでTシャツを晒される機会が増えたなと感じるUIデザイナーのみっつーです。よろしくお願いします！ 先日Photoshop CCのアップデートがあり色々機能が追加されましたが、その中でも気になる新機能がありましたので、そのことに関してMEMOPATCHで初めて記事を書きたいと思います！ 早速ですが、最近Sketchでデザインすることが増えてきました。 というのも、徐々にplug... 続きを読む

ユーザーテストする際に使ってみたい、手軽に使える便利なツール5つ | MEMOPATCH

2013/10/18 138 users ユーザー ツール5つ

最近はサービスのUI/UXを重視する話題が増えてきました。モックアップやユーザーテストを通して、実際の反応を観察しながら改善していくプロセスやツールが求められています。そこで今回はユーザーテストに役立ちそうな5つのツールを紹介します。 Briefs http://giveabrief.com/ 以前にも「UIデザインの動きまで共有できるモックアップ作成ツールまとめ」で取り上げましたが、アプリのモッ... 続きを読む

有名Webサービスのこだわりがわかる、ブランドガイドラインまとめ | MEMOPATCH

2013/10/11 134 users 有名Webサービス

皆さんはブランドガイドラインを見たことはありますか？あまり馴染みがないかもしれませんが、ブランドに一貫性を持たせるために作られる企業のロゴやビジュアルなどに関するガイドラインのことで、スタイルガイドと呼ばれることもあります。社内だけでなく社外に向けて公開されている場合も多く、調べてみると有名なWebサービスでは用意しているところがほとんどでした。そこで今回は各サービスのブランドガイドラインをまとめ... 続きを読む

Goodpatchのデザイナーが選ぶ、インスピレーションを得られるサイトまとめ | MEMOPATCH

2013/10/09 123 users Goodpatch インスピレーション デザイナー 皆さん

先日@yajijiさんの「デザイナーとして煮詰まった時に見るサイト9つ」という記事が話題になりましたが、皆さんはデザインする前や、何かアイディアが思い浮かばないときなどにチェックしているサイトはありますか？それぞれお気に入りのサイトがあるかと思いますが、そういったインスピレーションが得られるようなサイトはいくつ知っておいても損はありませんよね。というわけで今回は、Goodpatchのデザイナーが日... 続きを読む

Goodpatchのデザイナーが仕事で使っているデスクトップアプリ・Webサービス・手書きツールまとめ | MEMOPATCH

2013/08/23 222 users Goodpatch about デザイナー ツール みなさん

みなさんはお仕事をされているときに、どのようなツールを用いて作業をしているでしょうか。 何かいいものがないかと探している方、まず何を使ったらいいのかわからないという方など、様々な方がいるかと思います。 先日Goodpatchのメンバーページ(⇒ABOUT)ができたので、今回は、Goodpatchのデザイナーに仕事でどのようなツールやアプリを使っているのか、またなぜ使っているかという理由を聞いてみま... 続きを読む

どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ | MEMOPATCH

2013/08/06 242 users インスピレーション UIアニメーション サイトまとめ

皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタ... 続きを読む

簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | MEMOPATCH

2013/07/12 218 users コンバージョン率

しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッ... 続きを読む

UIデザインの動きまで共有できるモックアップ作成ツールまとめ | MEMOPATCH

2013/07/09 704 users UIデザイン

先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前に... 続きを読む

新しいものが大好きなグッドパッチで6月に話題になったアプリ、サービス、デザインまとめ | MEMOPATCH

2013/06/26 125 users Instagram vine グッドパッチ Apple ほか

6月も終わりに近づいてきました。今月もGoodpatch社内で共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します！今月はiOS 7が発表されて大きな話題となりましたね。弊社でもベータ版をインストールし、いち早くAppleのフラットデザインを研究しています。ほかにもVineに対抗してか、Instagramでも動画が撮れるようになりました。 今月もおもしろいWebサイトやアプリ... 続きを読む

有名Webサービスのデザインから考える、上手な料金プランの見せ方 | MEMOPATCH

2013/06/21 435 users 一目 基準 プラン 複数 皆さん

複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、な... 続きを読む

新しいものが大好きなグッドパッチで5月に話題になったアプリ、サービス、デザインまとめ | MEMOPATCH

2013/05/29 111 users Sketch.app Goodpatch社内 ツール まとめ

5月も終わりに近づいてきました。今月もGoodpatch社内で共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します！今月は社内でSketch.appを始めとする様々なWeb制作ツールが共有されました。まだローンチされてないものもありますが、今後よく使うツールになるかもしれないものもあるかもしれないので要チェックです！ 先月の同様のまとめ→ 「新しいものが大好きなグッドパッチで... 続きを読む

iPhoneのUIデザインを語る上で欠かせない、天才デザイナーMike Matasとは？ | MEMOPATCH

2013/05/28 140 users iPhone Dribbble Mike 過言 デザイナー

Mike Matas（マイク・マタス）というデザイナーの名前を聞いたことはありますか？以前「Dribbbleでフォローしたい、世界トップレベルのUIデザイナー14人」でも少し紹介しましたが、UIデザインの歴史について調べたら必ず彼の名前が見つかるはずです。Mikeは私たちが毎日使っているiPhoneのユーザー・インタフェースの重要な部分を多く担当し、今のUIの基礎を生み出したと言っても過言ではない... 続きを読む

Gunosyを支えるUIデザインチームに聞く、Gunosy2.0リニューアルの背景とこれから | MEMOPATCH

2013/05/20 164 users Gunosy Goodpatch 紺色 土屋 基調

5月20日にリリースされたGunosy2.0は、GoodpatchがUIデザインを担当しています。これまでの紺色をベースとした重めのデザインから大きく変わって、白を基調とした明るいデザインとなりました。そこで今回はリニューアルを担当したGunosyのエンジニア松本さん、弊社代表の土屋、UIデザイナーの貫井の3人に、どういった経緯でリニューアルすることになったのか、どんなことを考えてUIを作っていっ... 続きを読む

Dribbbleでフォローしたい、世界トップレベルのUIデザイナー14人 | MEMOPATCH

2013/05/20 188 users Dribbble Goodpatch 招待制 アカウント 作品

デザイナーなら誰でもチェックしているであろうDribbble。招待制なので優秀なデザイナー以外は参加できず、常に高いクオリティが保たれています。Goodpatchでも最近Dribbbleに作品をアップしはじめました（アカウントはこちら）。 MEMOPATCHをご覧の方の中にもDribbbleをチェックしている方やこれから見てみたいと思っている方も多いはず。でもはじめたばかりの頃だと誰をフォローした... 続きを読む

パララックスを使ったストーリー性のあるWebサイトまとめ | MEMOPATCH

2013/05/16 198 users パララックス パララックス効果 ストーリー たくさん 興味

昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: ... 続きを読む

Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ | MEMOPATCH

2013/05/10 174 users Fireworks Sketch 急浮上 半額セール ツイート

つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、A... 続きを読む

Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app | MEMOPATCH

2013/05/08 331 users Fireworks Sketch Adobe 最中 朗報

Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。（2013/05/07）そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFon... 続きを読む

これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（後編） | MEMOPATCH

2013/04/25 172 users デザインカンプ ワークフロー プロトタイプ 長谷川恭久さん

UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめて... 続きを読む

明日友達に自慢できる！隠れUIデザインまとめ8つ | MEMOPATCH

2013/04/24 107 users

以前からネットでiOSのデフォルトミュージックアプリを傾けると音量調節スライダーの光のあたり方が変わるという記事をよく見ます。 （参考: 【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）） そこで上記のような細部に凝ったUIはもっとあるんじゃないのかと思い探してみました！これらを知っているとUIの勉強にもなるし、友達にも自慢できる... 続きを読む