株式会社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 日本以外の国々で『どのようなエ

こんにちは。のっちです。 現在デザインツールが世の中に溢れていますが、その中でも特に注目されているのがデザインと他分野のコラボレーション。 今回は、デザインツールの最新事情やそのコラボレーションについて、各分野の有識者たちがお話ししてくださった『Design & Collaboration』に参加しました。どれもこれから伸びそうだなと思わせてくれるものばかりでした。今回はそちらのイベントレポートです。 （ちなみにトップ画像の文字の周りの円たちは、色々なツールのテーマカラーを散りばめたものとのこと。どれがどれだかわかりますか？） InVision Studioが誰でもアクセス可能にまずはInVision Studioについて、Sketchの書籍でも有名な吉竹さん（@ryo_pan）にお話いただきました。 InVision Studioは、InVision社が新しくリリースするデザインツールで

前回のnoteの中で、問題定義の重要性そ問題再提議の具体例をいくつか紹介しました。なるほど、問題を定義し直す事（リフレーミング）でその解決方法の幅が拡がって面白いアイディアが出てくる可能性があると言うことろまではわかったけれど、具体的にはどうすればよいのでしょうか？ 問題を大きくすれば良いと言われたって大きくさせかたには様々な方法があるし、どの程度の大きさにすれば良いんでしょうか。そもそも大抵のアイディアは社会を良くするとか、人々を幸せにするとか、そういったゴールに繋がって居るわけですが、どうすれば「社会を良くすることが出来るか？」なんて問題に正面から取り組んでも正直どこから手を付けて良いのかわかりません。問題が大きすぎるので、もう少し分解してやる必要がありそうです。 問題を再定義するための方法は多くあるので、あくまでもひとつの方法としての紹介ですが、Richard Buchanan氏の論

「デザインするときは、まず情報収集して、コンセプト決めて、案を発散して。。。」 デザインプロセスに関して、いろんなサイトやデザイナーの方々が言及されています。 でも、初学者デザイナーである僕はいつも 「理想のプロセスはわかるけど、実践するとなるとわからんこと多すぎるし、そんなうまくいかねええよおおお」 ってなるんです。 そこで、自分がデザインしたプロセスをしっかり言語化して明らかにすることで、理想のプロセスに近づけるという試みをしようと思います。 ということで、この記事では、ポケモンで言う「トキワの森」に迷っちゃってるレベルの僕のデザインプロセスを書いていこうと思います。 この記事を書く目的は、80%自分のためです。 自分が振り返るためです。 20%はもしかしたら、他の人の役に立つかもしれん。 「あーこういうことはやらんとこ〜」とか「試しにこのやり方やってみるか」とか。 あとは、「ノンデザ

VASILYのデザインチームでは、「IQON」をはじめとするUIデザインに多くの時間を充てていますが、ファッションブランドとのタイアップ企画や、採用イベント用の広報物など、ビジュアルデザインにも力を入れています。 下記は今週開催されているtry! Swiftでの様子です。ブースのグラフィックや配布パンフレットなどを社内で制作しました。 そういったこともあり、VASILYのデザインチームでは基礎デザインスキルのひとつとして、タイポグラフィも大切にしています。 UIデザインをメインに取り組んできた方や、Webデザインからスタートした方の中には、タイポグラフィに苦手意識を持っているデザイナーもいるかもしれません。 タイポグラフィは突き詰めれば突き詰めるほど奥深いデザインですが、今回はそんな苦手意識のある方や、これまで取り組む機会がなかった方向けに、今すぐ使えるタイポグラフィTIPSをご紹介します

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

Frédéric Bouchery @FredBouchery Client: I want you to develop this application Dev: Give me 2 weeks Client: No, I want this for tomorrow. Dev: Okay, you decide... about the result. pic.twitter.com/kacPerpWcq 2018-01-04 22:05:08 Frédéric Bouchery 🌟 @FredBouchery Client: I want you to develop this application Dev: Give me 2 weeks Client: No, I want this for tomorrow. Dev: Okay, you decide... about

Best Design Kit for Sketch Design faster, create beautiful website designs, save time and money developing your web project. Frames solve designer & developer routine. Trusted by 2.6K+ individuals, and 100+ teams including Apple, Google, IBM, Isobar, Netflix and Dogstudio ⇣ See what's inside Frames Kit!

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

こんにちは。Pooleチームのデザイナー、�コーリーです。 先日デザインをしているときに、“UIデザインとデータの関係”が気になりました。 皆さんは、新しいサービスのUIデザインを作成する際、どんなユーザデータを使用していますか？　仮想のデータを入力していると、想定外のことが起きたときに対処できなくなるかもしれません。 そこで今回は、UIデザインを作成する際に実際のデータを意識しなければならない理由と、データを使用するために便利なツールをご紹介したいと思います。 “実際のデータ”を意識すべき理由 データの値によってデザインが崩れることは多々あります。 例えば先日、メンバーページのUIデザインが一瞬崩れたのですが、原因はメンバーの1人である「野田クラクションベベー」の名前が長すぎたことでした。 このように、SketchやPhotoshopなどでせっかく綺麗なデザインを作っても、実際のデータと

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 企画がうまくまとまらない、または伝わらない、なんて経験は過去にありませんか？　「企画を考える」というタスクは数多くある仕事の中でも掴みどころのないもののように感じませんか？ 今回はオンライン学習プラットフォームUdemyの中でも人気の講座から、企画の発想・整理の手法を学んでいきたいと思います。この記事では要点をかいつまんで紹介しますので、詳しく知りたい人は講座の本編を受講してみてください。 企画を「１枚の紙」にまとめてみる 今回取り上げるのは「〜デザイナーの頭の中、大公開〜 企画を「１枚の紙」で、伝えきる」という動画講座です。 トリプレットデザインの大森 剛氏が講師に立ち、企画を考え

Documenting visual trends in graphic design since 2011. Tags Typography Book Photography Magazine Music Art Experimental Invite Cover Odd Flyer Geometric Serie POP Booklet Trippy Abstract Space Architecture Bold Festival Hands Hand Monochromatic Cryptic Pattern Rainbow Scan Series Illustration Black & White Ballsy Vinyl Business Card Social CD Sculpture Occult Stars Face Newspaper Conceptual Statu

グローバルな決済 オンライン、対面、またはプラットフォーム経由での決済を処理。 収益・財務処理の自動化 収益と財務を自動化してビジネスを成長させます。 サービスとしてのバンキング (BaaS) プラットフォームまたは製品に金融サービスを導入します。

中長期のための大きなデザインも大事だけど、そのために日々の改修が犠牲になってはならない（その逆は言語道断）。そんなわけで、しばらくの間は、1〜2日で終わる小さな改修を、コンスタントにnoteチームに提案したいなぁと考えている。 もちろん、「リソースが許せば」だけれども。なぜならpiece of cakeにはまだデザイナーが1人しかいないことだ。そんなわけで、中長期でどういうチームを作るべきかウンウン唸っている。 並行して走るスロットが3-4つ欲しい理想を言えば、デザイン/開発リソースを3つのグループにわけたい。「大局リソース」、「開発リソース」、「カイゼンリソース」の3つだ。これらはそれぞれ独立しているのが望ましい。複数のレイヤーを1人のスタッフが兼任していると、どれかが忙しくなると、他の全てがストップしてしまうからだ。 大局リソース ガイドライン、コンポーネントなど、会社全体にストックさ

深津 貴之 / THE GUILD / note @fladdict Googleのロゴに補助線を引くとズレてる件。 これは「視覚補正」というやつで、人間の錯視や認知を加味した調整なので、間違ってるわけではないと思う。 twitter.com/GiveMeInternet… 2017-09-26 23:25:25