みなさん、10月1日って何の日か知っていますか？！なんと、今日は通商産業省(現経済産業省)が選定した「デザインの日」！そんなデザインの日に、 UIデザインを特化しているGoodpatchが開発しているProttが正式リリース！今回のMEMOPATCHではiOSアプリの紹介を主に、今回の正式リリースの内容をお届けします！ 正式リリースについて Prott（プロット）とはこのMEMOPATCHを運営しているグッドパッチが開発しているモバイルアプリやサイトの為のプロトタイピングツールです。2014年4月にベータ版を公開して以来、多くの方にお使い頂いており、ついに正式リリースとなりました！「高速プロトタイピング＋新しいコミュニケーション」をコンセプト日々開発を進めています。 ベータ版との違いーアプリ開発チームにむけたよりパワフルなツールへー ・最新のiPhone 6などのiOSや、Androidな

皆さんはLeap Motion（リープ・モーション）をご存知ですか？この写真を見るとまるでAppleのプロダクトのようですが、これはLeap Motionという会社が開発しているデバイス、Leap Motion Controller（リープ・モーション・コントローラ）です。ユーザーの手と指の動きを感知し、直接コンピュータを操作できるという画期的なセンサーデバイスなのですが、そのすごさはなかなか言葉では伝わらないと思うので、まずは900万回以上再生されているこちらの紹介動画を見てみてください。 マウスやディスプレイなどに触れることなく、指で画面をスクロールしたり、線を書いたり、ゲームをしたりと、まるで映画の世界のような光景です。（『マイノリティ・リポート』がまさにこんなインターフェースでした。）そしてこのデバイス、なんとたった$79.99（日本円でおよそ8,100円）で購入することができ、つ

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

5月20日にリリースされたGunosy2.0は、GoodpatchがUIデザインを担当しています。これまでの紺色をベースとした重めのデザインから大きく変わって、白を基調とした明るいデザインとなりました。そこで今回はリニューアルを担当したGunosyのエンジニア松本さん、弊社代表の土屋、UIデザイナーの貫井の3人に、どういった経緯でリニューアルすることになったのか、どんなことを考えてUIを作っていったのか、その裏話をたっぷりと語ってもらいました！ Gunosy UIリニューアルの経緯 ――ではまず、そもそもどうして今回GunosyのUIを全面的にリニューアルすることになったか教えてもらえますか？松本前回のデザインは、紺色で重めの男性的なデザインでした。最初のターゲットはアーリーアダプターやギークだったし、実際にスタート時は女性のユーザーはかなり少なかったのでそれでも良かった。だけどこれからG

こんにちは！ 今回は最近知った、Macアプリのアイコンに関する小ネタのご紹介です。 iOSアプリのアイコンに関する記事やギャラリーは結構見ますが、Macアプリに関する記事ってあまり多くないですよね。Macアプリのアイコンだって小さくてよく見えないけど、優れたデザインのものはたくさんあります。今回は高解像度のMacアプリのアイコンを見る方法をご紹介します！！ やり方は簡単です。まずFinderの「アプリケーション」から高解像度で見たいアプリを探します。今回はiPhotoを選んでみました。 そして次に「iPhoto.app」を右クリック（トラックパッドを二本指でタップ）します。 するとオプションメニューが表示されます。その中の「パッケージの内容を表示」をクリック。 すると「iPhoto.app」の中が見れます。 その中の「Contents」→「Resources」を開きます。 そして「icns

以前からネットでiOSのデフォルトミュージックアプリを傾けると音量調節スライダーの光のあたり方が変わるという記事をよく見ます。 （参考: 【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）） そこで上記のような細部に凝ったUIはもっとあるんじゃないのかと思い探してみました！これらを知っているとUIの勉強にもなるし、友達にも自慢できるのではないでしょうか？笑 iOS 計算機 iOSにデフォルトで入っている計算機アプリ。iPhoneなどをロックを解除して横にすると足し算やかけ算以外の複雑な計算ができるボタンが出てきます。僕はπしかわかりませんでした。 Foursquare その1 有名なチェックインアプリFoursquare。写真付き投稿の写真を左にスワイプすると隠れキャラが登場します。実はこの隠れキャラ、Foursquareの

先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で

Feedly: Your Google Reader, Youtube, Google News, RSS News Reader 14（無料） カテゴリ: ニュース, エンターテインメント 販売元: DevHD – DevHD Inc Website RSSフィードリーダーのFeedly。メインカラーとして鮮やかな黄緑を使っており、カテゴリー部分では色を多用しています。慣れればどのカテゴリーかぱっとわかりそうで良いですね。 Infomatic Website Infomaticは自分のTwitterやFacebookの使用状況を統計で確認できるアプリ。残念ながら日本のアップルストアではダウンロード出来ませんが、青をベースとした配色が綺麗ですね。 Figure

以前にもMEMOPATCHで紹介した（「優れたアイコンデザイナーまとめ【Dribbble編】」）でも紹介したDribbble、ここに作品を投稿できるのは招待を受けた本当に優れたデザイナーだけです。現在Dribbbleに投稿できる日本人デザイナーは90名弱ほどいるのですが、その中で初めてDribbble投稿者（通称: プレイヤー）になったのが今回インタビューを引き受けてくださったのが、貫井伸隆氏。今回貫井氏にUIデザインについて色々伺ってみたいと思います。 元々はコーダーでサイトの動きを突き詰めいていくうちにUIデザインに出会った ーー貫井さんは日本人初のDribbblerということなのですが、そこに至るまでの経緯を教えいただけますか 中学校まではシェフやパティシエを目指していました。料理の立体造形や色味の美しさ、お皿とのバランスなどに興味があったんです。 その流れで高校は飲食の専門高校を受

こんにちは！ 前回のに書いた「優れたアイコンデザイナーまとめ【deviantART編】」のDribbble編です。ご存知の方も多いかと思いますが、Dribbbleは前回紹介したdeviantARTと同じく、デザイナーが作品を投稿するWebサイトです。誰でも閲覧する事ができますが、投稿できるのはスキルが認められ、招待を受けた人のみがDribbbleに作品を投稿できます。 今回は主にアプリのアイコンをDribbbleに投稿しているデザイナーを5人ピックアップしてみました！ Konstantin Datzさん 作品一覧 https://dribbble.com/shots/181413-Casio-iPhone-Icon?list=users https://dribbble.com/shots/204799-Cigar-Box-iOS-Icon?list=users Artuaさん 作品一覧

こんにちは！ みなさん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サイトを見ていると必ず目に入るのがバナー広告です。 バナー広告は、とりわけその広告先の情報を求めているわけではないが、 潜在的に興味がある人にリーチするための広告です。 デザイナーとしては適切なメッセージを簡潔に伝え、クリックしてもらえるようなバナー広告を作らないといけません。 Creative Web Banner Ad Designsという海外の記事で、Webのバナー広告をデザインするときに下記の事を心に留めておくべきと書かれています。 ◯どこに広告をだすか？ 競合企業がどんなバナー広告を出しているのかを確認し、クライアントのブランドイメージを守りながら競合、またはその他の広告より目を引くものでないといけません。 ◯広告のターゲットは誰か？ 広告のターゲットに合わせたデザインにする ◯その広告は何を販売しているか？ ユーザーが混乱しないようにメッセージ/製品と一致したバナ

このアプリを使うとできるのが下記のような画像です。 簡単に「Promotee」の使い方を説明します！ 使い方 使い方はとてもシンプルです！ 起動するとすぐにこの画面が開きます。 上のデバイス一覧からはめ込み画像を作りたいものを選択します。 矢印のところにはめ込みたい画像をドラッグ&ドロップ できました。 最後に保存先を指定して終了！ 簡単ですよね！ この手でiPhone4Sを握っているテンプレート以外にも iPhone5、iPad、Mac Book Air、Android（Nexus4, 7, 10）もあります！（全27種類） （下記画像参照） 斜めの画面にも対応されてる！ iPhoneやiPadが斜めになっているものもありますが、 ちゃんとはめ込み画像も斜めに加工されているのがすごいです！ はめ込む画像のサイズ、比率はiPhoneの2:3やiPadの3:4以外でも使用可能です。 （下の画