こんにちは！GoodpatchでUXデザイナーをしているかつきです。 前回の記事では、Flicfitさんとご一緒させて頂くに至った経緯や、プロジェクトを進めて行くにあたってのGoodpatchのマインドセットをご紹介しました。本記事は、デザインプロセス公開記事Part2です。今回は、キックオフから、ターゲットユーザーの定義とユーザーの価値観を分析するところまでを公開します。 両社CEOも参加のキックオフ！ 今回プロジェクトに関わってくださるメンバー全員をお招きして、チームビルディングワークショップと、エグゼクティブインタビューを行いました。両社CEOも参加し、関係性の深まった初回キックオフとなりました。 チームビルディングワークショップでは、Wind&Anchorというフレームを用いて、プロジェクトメンバーのモチベーションの源泉や、それを妨げるものを発表しました。Wind&Anchorの由

こんにちは！GoodpatchでUXデザイナーをしているかつきです。 前回の記事では、キックオフから、ターゲットユーザーの定義とユーザーの価値観を分析するところまでを公開しました。今回は、Flicfitさんとの共同プロジェクト、デザインプロセス公開記事Part3です。本記事では、更にユーザーの行動や課題を深掘って行った過程や、アイディエーション、そして1stストーリーボードが完成するまでのプロセスを紹介します！ 前回公開したキックオフからターゲットユーザー定義までをご紹介した記事は、こちらをご覧ください。 カスタマージャーニーでターゲットペルソナの課題を洗い出し 前回の記事で紹介したターゲットペルソナ設定の目的は、靴を購入する女性が抱える一般的な価値観を明らかにし、現実に存在する人を元にペルソナを策定し、チームでユーザー像の共通理解をすることでした。ただ、それではまだ具体的なユーザーの靴購

株式会社FOLIO CDO（Chief Design Officer）の広野です。 この度、オンライン証券サービス「フォリオ」の正式リリースに伴いまして、思い切ったリブランディングをおこないました。 ビフォーアフターはこちらです。 ご覧の通り、今回のリブランディングプロジェクトはいわゆる「ロゴリニューアル」に留まらず、サービスを提供する上でのスタンスを改めて定義し直した、新たなブランドとしてのフォリオを再誕させることになりました。 パット見のビジュアルでいうと、安心を感じさせる「青」から、躍動感のある「赤」に変わるのですから、FinTech系スタートアップとしてはかなり挑戦的なリブランディングのようにも思われるかもしれません。 ここまで辿りつくのに紆余曲折ありましたが、包み隠さずリアルな8ヶ月の軌跡をここに記したいと思います。 【目次】 1. 危機感 2. 幕開け 3. 壁 4. 光 5.

今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ 公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。 全体像 DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。 解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。 それでは手始めに最上段の「Food」アプリのレイヤー構造を眺め

This domain may be for sale!

サービスデザイン周辺の世界的な傾向、潮流などに興味は持ちつつ、英語に苦手意識がある人、苦手ではないし、多少は分かるけど、きちんと文章を読むのは、結構、億劫で避けがちという人も多いのではないでしょうか？ 本日のnoteは、そんなあなたにお届けする「世界のサービスデザインエージェンシーをサラッと紹介」です。 読んでくださっている方々のバックグラウンド、活躍されているフィールド、立場、興味や関心も多岐に渡るのではないかと思い、特徴や強みの異なるエージェンシーを４つセレクトしました。 • UX界での雄からネクストステージへと羽ばたいた Adaptive Path.org • とにかく大事なのは「人」なんだ！と叫ぶ livework • リサーチなら任せて！のスペシャリスト集団  STBY • 実利追求！数字重視！大きめのプロジェクトをガンガンやるよ！な Engine 日本以外の国々で『どのようなエ

そんな声を、そう珍しくない頻度で耳にします。（先月だけで2度耳にしました。） これはデザイナーにとって明らかに醜悪な話ですが、実はビジネスにとっても最悪な計画です。 言いたいことは分かります。 賢明な彼らには「デザインに凝るよりも、仮説検証が先だ」という意図があるのです。 しかしそんな彼らに伝えたいことがあります。 それは、 「ソリューションやコンセプトが正しく伝わらないと、仮説検証に致命的なノイズが生まれる」 ということです。 「最低限のデザイン」とは？ 先に言っておくと、UIデザインを1週間で形にすることは可能です。それどころか、1日2日で作ることも可能かもしれません。 また、初期フェーズ等においてはデザインが最低限のもので構わないことには大いに同意できます。 最低限というのは、ソリューション検証に耐えられるだけのデザインを指します。 検証のためにはまずきちんとソリューションとコンセプ

紙のデザインはメインの仕事ではないけれど、ロゴ制作の依頼に合わせて、名刺の依頼もいただくことが多い。頻度は高くないものの、1年に数回はあるので、自分のメモも兼ねて名刺デザインについてまとめてみたいと思う。 この記事は実験的に有料にしていますが、投げ銭制度となっており、購入しなくてもすべて読めます。その代わり購入いただいた方にはオマケでこの記事用につくった名刺のIllustratorデータをダウンロードいただけます。基本フォーマットまず基本的なこととして、名刺のサイズは「55 × 91mm」 海外だともう一回り小さな名刺が主流で「51 × 89mm」 載せる内容意外と依頼する側は何を載せるのか決まってなかったりする。そのため、まずこちらから項目を渡し、載せたい情報のみを教えてもらうと良い。 名前 フリガナ（ローマ字、平仮名。大抵はローマ字） 肩書 会社名 電話番号 メールアドレス URL S

はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ

配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

今回は、サービスデザイナーとして、マネーフォワードiOSアプリのデザインリニューアル（2014年5月公開バージョン）のほか、大手新聞社新規メディアアプリなどを担当し、現在はヘルスケアベンチャーFiNCのアプリ・サービスデザインを担当する齋藤 恵太のインタビューをお届けします。 クライアントワークに従事する傍ら、社内勉強会やPodcast、ラボサークルの立ち上げなどリーダーとして組織にも貢献する齋藤が、どんな想いを抱いてグッドパッチで働くのか。そしてこれから目指す先の展望について、話を聞きました。 「サービスデザイナー」ができるまで学生時代、研究室のアルバイトでサイトのコーディングを手伝っていた制作会社に、そのまま新卒として入社しました。主にコーポレートサイトなどを手がける少人数の会社でしたね。近所の会社が開催していたUI関連の勉強会に参加して、そこに来ていたグッドパッチのメンバーに会ったこ

前回の記事では、コードを学んだ経験がインタラクションを重視したデザインをするきっかけになったという話を書きました。 今回はマイクロインタラクションとコードについてです。 マイクロインタラクションとは？僕がマイクロインタラクションという言葉を知ったのは、この本がきっかけでした。 アプリやWebサービスを使っていると、些細だけど使いやすさに繋がっていたり、他のアプリにはない特徴となっているインタラクションに出会うことがあります。登録フォームのパスワードの安全性を示すバーや、いいねボタンを押した際の一瞬のアニメーションなど表現や目的は様々です。 この本では、こうしたインタラクションが ・小さいけれど気の利いたアイディア ・「こよなく愛する製品」と「許容範囲の製品」の違いを生むものであるとされ、様々な事例と共に分析されています。事例を眺めるだけでも楽める本なので是非手にとってみてください。 マイク

＜更新＞ ページ下部におまけとして有料部分を追加し、ワークショップとして使用したスライドを添付しました。ほとんど無料で読めます。 ----------------------------------------------------------------------------- デザイン思考にはHMW(How Might WE)というメソッド？があるそうです。僕自身はあまり明るくない分野なので、ここでは詳しい方の説明を貼ることにします。以下のブログがとてもわかりやすかったです。 デザインにおけるHow Might Weとは何か：具体例とその効果 - デザインダイアローグコペンハーゲン How Might Weと言うのは、日本語にすれば「我々はどうすれば◯◯できるか」というカタチで、解くべき問題を定義する方法です。約10年前にIDEOが使い始めたのち、今では世界中の多くのデザインファー

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

【加筆あり】 マツモトキヨシのロゴデザイナーが言った『UXの本質』と、IT業界の根本的なズレが致命的になるについて 今も「UI/UX」の議論が増えていますが、日本人が好きな表面的な手法論から、そもそもの深い部分の議論になっているのは、すごい良いと思っています。 特にIT業界が「UI/UX」が盛んに見えますが、そもそもの議論が「アプリ」「WEB」に限定されており、狭義の議論になっているので、本質的な話をしないとこの問題は解決できないと思っています。 私自身も以前はカスタマージャーニーなどもやっておりましたが、マツモトキヨシのロゴデザインをしたデザイナーの小谷中さんと、地元千葉で縁があり一緒に仕事をさせていただいた時に、施設のパンフレットデザインを見せた際に言われた、『パンフレットが置かれる現場に行ったみた？』 が今でも忘れられない一言であり、UXの本質的な言葉だと思っています。 デザイナーの

同業者の中で話題になっていたこともあり、しばらく前に『デザイン組織のつくりかた』という本を読んだ。デザイナーを中心としたweb制作会社を営み、顧客のデザインチームと協業する機会も増えている私にとっては示唆に富んだ内容で、非常に有益な書籍であった。影響を受け、会社にいくつかの改善を加えようと決意した部分もあった。 一方、本書で書かれているのはかなり進んだ世界であり、挑戦すらできない会社がまだまだ多いのではないだろうか。また、デザイナー以外にはやや難しい内容であるようにも感じた。私が本書を良書だと思えたのは、長年デザインの仕事に従事し、それなりのデザインリテラシーがあり、ある程度明確な問題意識が既にあったからであろう。 本書の存在とは別に、私自身もデザイナーのマネジメントや組織作りという側面で、ここ数年思いにふけることが多かった。2017年の夏に「デザイナーのマネジメント」をテーマにしたイベン

カラーの組み合わせを数学的に見つけるのではなく、顔料と光量に基づいてナチュラルなカラーの組み合わせを見つけることができるオンラインツールを紹介します。 色をベースにしたり、写真をベースにして、簡単なクリック操作でWebデザイン・紙デザイン用のカラーの組み合わせを作り出すことができます。 Pigment Pigmentは登録などの面倒なことは一切不要で、すべての機能を利用できます。 まずは、左側からPigment（顔料）とLightning（光量）を調整します。

The repository of publicly available design systems and pattern librariesStart Exploring SystemsWhy Adele?

最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし