ユーザーが自然と目を向ける、視線誘導を意識したUIデザイン｜Goodpatch Blog グッドパッチブログ
Goodpatch Blogでは、人の錯視を考慮したUIデザインの手法「視覚調整」についてご紹介しました。 視線誘導とは 視線誘導とは、ユーザーの視線の流れを意図的にコントロールするために使われる手法の１つです。UIデザインはもちろん、イラストや写真、映像、漫画などアート・デザイン問わず様々な場面で使われています。 視線誘導を使うメリット 視線誘導を意識することで、ユーザーに見せたい情報の順序を意図的にコントロールすることができます。情報の正しい順序を無意識に導き出すことができるので、ユーザーはストレスなく画面を見続けサービスを利用し続けることができます。 情報認知のための視線誘導 視線誘導には大きく分けて２つの目的があります。 ユーザーに情報を認知させるもの ユーザーの視線移動をサポートするもの 情報を認知させるための視線誘導は、ユーザーが注目している部分から注意をそらし、別の部分に視線
Material Designを語りつくす！「Google I/O Extended 2018 Shibuya」資料まとめ｜Goodpatch Blog グッドパッチブログ
ナレッジ・ノウハウ Material Designを語りつくす！「Google I/O Extended 2018 Shibuya」資料まとめ Googleが毎年開催する開発者向けのカンファレンス「Google I/O」。エンジニアなら、参加したことがある方も多いのではないでしょうか。 もちろんGoodpatchからも、毎年メンバーが参加しています。 2017年のレポート：Google I/O 2017レポ &「How Well Do You Know the Web?」紹介 2016年のレポート：Google I/Oに行ってきた！グッドパッチ目線レポート 2017年まではエンジニアのメンバーが参加していましたが、2018年はUIデザイナーのメンバーが参加。現地で得たナレッジを日本のデザイナーコミュニティに還元するべく、報告会「I/O Extended 2018 Shibuya (Mate
フォント選びに悩んでいる方へ。インプットの引き出しを増やすおすすめフォントツール｜Goodpatch Blog グッドパッチブログ
今回は、「フォント」に関するおすすめのツールをご紹介したいと思います。 重要なデザインリソースの一つである「フォント」。皆さんはどのように情報を集めていますか？フォントが変わるだけで、印象がガラッと変わりますよね。これからフォントを学びたい人や情報源が多くどのフォントを選んでいいのかわからない使ってみたいけど情報が多くてわからないという方向けに、便利なフォントのWebサービス、ブラウザの拡張機能をご紹介します。 フォントを比較したい方へ 1. Wordmark.it Wordmark.itは、現在利用しているPCにインストールされているフォントを抽出し、インストールされているフォントで入力したキーワードを表示させることができます。一目でフォントの比較をすることができるため、このページを見せながら、ロゴなどのディスカッションをすると、よりイメージが湧きやすく議論が弾みます。Goodpatch
ロゴデザインの8つの種類と参考になるウェブサイト7選｜Goodpatch Blog グッドパッチブログ
CI(コーポレートアイデンティティ)においてロゴは非常に重要な部分を占めています。 また複雑で混沌とした社会になるにつれ、企業理念や創業者の思いをしっかりと定義したロゴの重要性は依然高まっているのではないでしょうか。最近ではCIデザインという言葉もよく聞くようになり、ロゴを含めAirbnbのCIがどのようにデザインされているかを表した動画も話題になりました。 ということで今回の記事では一般的なロゴデザインの種類、ロゴデザインに役立つウェブサイトなどをまとめてみました。ロゴデザインを始めたばかりの人や将来始めてみたいと思っている人のご参考になれば幸いです。 Goodpatchでは、ロゴデザインやCIのリニューアルのご相談も受けております。 ⇒【資料ダウンロード】Goodpatchにおけるロゴデザインのリニューアルプロジェクト事例のご紹介 ロゴデザインの主な種類 1. シンプルな幾何学模様 シ
デザインの未来：岐路に立ったら、道を取れ｜ドン・ノーマン｜Goodpatch Blog グッドパッチブログ
本記事は、「誰のためのデザイン？」や「エモーショナル・デザイン」などの著書、TED Conferenceやその他多数の基調講演で世界的に有名なドン・ノーマン氏が、サンマリノ大学デザイン学士課程設置１０周年記念に寄せた記事です。 ここで書かれている大きなテーマは、デザインの未来と従来のデザイン教育とのギャップ、そして現代のデザイナーが直面するジレンマです。美しく快いものを作る技術としてのデザインか、思考方法としてのデザインか。私たちには両方が必要だけど、どのようにして両立させ、いかにしてその両方を担うことができる人物を育てることができるのか。大きな問いを投げかける、非常に読み応えのある記事です。本人及び記事掲載元から許可を得て、翻訳及び掲載しています。 元記事：The Future of Design: When You Come to a Fork in the Road, Take It
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
デザイン思考とは？プロセスとビジネスでの活用法｜Goodpatch Blog グッドパッチブログ
ビジネスパーソンの皆さんは、仕事の現場で「デザイン思考」「Design thinking（デザインシンキング）」という言葉を耳にする機会が増えたのではないでしょうか。 「デザインって、思考じゃなくて行動じゃないの？」 「デザインはデザイナーの仕事でしょ？」 こんな風に考える人が多いのではないかと思います。 世間一般的には、デザイナーというとファッションデザイナーやグラフィックデザイナーを想像しますし、デザイン＝表層的な装飾、というイメージが根付いています。 ですが本来、Design／デザインという言葉は「設計」と訳す事ができます。 設計とは、順序立てたプロセスに沿って何かを製作することなので、デザインが持つ装飾的な意味合いとは違うのではないか、と感じるかもしれません。 しかしデザイン思考は、まさに設計の意味に近いアプローチの方法なのです。 そして、今やビジネスの現場で、デザイナー以外のビジ
新人デザイナー必見！ときめきとひらめきの源、デザインリソースで作業を効率化しよう｜Goodpatch Blog グッドパッチブログ
Goodpatch Blogをご覧の皆さんの中には、デザイナー見習いの人や、勉強中の人も多いことと思います。 今回のGoodpatch Blogは、そんな皆さんのためにお届けします。 「デザインのトレンドが知りたいけど、何を参考にすればいいの？」「もっと色んなところからインスピレーションが欲しい！」 という悩みに直面したことはありませんか。 そこで、Goodpatchのデザイナーがよく覗いたり、参照しているサイトをピックアップしてご紹介します。 あなたの仕事をもっと効率的で楽しくしてくれるデザインリソースとして、参考にしてみてください。 1. インスピレーションが得られる Dribbble https://dribbble.com/ デザイナーが使うポートフォリオサイトと言えば、有名なのがDribbbleではないでしょうか。 招待制のサイトであることから、作品のクオリティが高い点が特徴です
雑誌のように美しいレイアウトを生み出すために、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キロバ
Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ | Goodpatch Blog
つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、Adobe製品に比べたら圧倒的に情報量が少ないSketch。Adobe製品と同じような機能やショートカットも多いですが、使いこなせるようになるまでは少し時間が掛かりそうです。Goodpatchでもマニュアルや記事を読みながら、隙間時間にSketchを触ってその機能を確かめています。というわけで今回は、Sketchの基本的な機能や、発見した小技、ショートカットなどをまとめてみました。 先日アップした「
Photoshop CC新機能 "リンクされたスマートオブジェクト" で震えた。これはUIデザインが捗る！ | Goodpatch Blog
はじめまして。最近SNSでTシャツを晒される機会が増えたなと感じるUIデザイナーのみっつーです。よろしくお願いします！ 先日Photoshop CCのアップデートがあり色々機能が追加されましたが、その中でも気になる新機能がありましたので、そのことに関してMEMOPATCHで初めて記事を書きたいと思います！ 早速ですが、最近Sketchでデザインすることが増えてきました。 というのも、徐々にpluginが増えてきて Sketch Symbol Plugin 等を使用しpage間でオブジェクトの変更、差し替えが簡単になり、作業がかなり捗るようになってきたからです。（みんなもSketch使ってみたらいいと思う。） 「もうこれからはPhotoshopを使うこと少なくなるのかもな、さよならかな…」と思った矢先に、今回Photoshopのアップデートの一報がきたわけです。今回のアップデートで追加された
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
ビビッドな色使いが目を引く、フラットな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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今すぐSublime Text を消してAtom をダウンロードすべき5つの理由