デザインシステムの定義と作成方法、導入事例
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、コードを提供しているからです。 デザインシステムは一過性のトレンドを超えて、2018年以降も続くベストプラクティスになりつつあり、将来的にはWeb全体でデザインの一貫性が向上すると期待できるでしょう。 これが何を意味をするかと言うと、すべてのWebサイトが同じ見た目になるということではなく、それぞれのWebサイトにおいて一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるようになる
Design Systems Repo
Design Systems GalleryA comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration. Wonderflow Wanda Design SystemWanda is Wonderflow’s open-source design system built for digital products and experiences. Wanda aims to provide a solid guidance for designers and developers, to reduce the risks of divergence. Italian Public Administration.i
ソシオメディア | OOUI デザインの準備運動
OOUI（オブジェクト指向ユーザーインターフェース）デザインに慣れるための準備運動をいくつか考えてみました。 これらの準備運動は、UIの大まかな構造に関する話が主で、以下をなんとなく知っている状態の方が対象です。 名詞と動詞で捉える 名詞→動詞で構成する アプリケーションをタスクや機能の羅列と捉えるのではなく、オブジェクト（名詞、もの、関心の対象、概念と言い換えても良いです）を並べユーザーに提示し、そこにアクションが付随するという世界観ですので、人によってはアプリケーション像（コンピュータ像）の転換が必要です。 それぞれの準備運動はオブジェクトを探すことを重視したものになっています。好きなものから選んでやってみましょう。 1. ラフスケッチ いくつかのユーザー要件をもとに、オブジェクトを意識しながら、UIのラフスケッチを描いてみましょう。制限時間は20分です。 これは学校の教員が使うための
A Design System isn’t a Project. It’s a Product, Serving Products.
Design systems result in tangible, often gorgeous outputs like a living style guide or array of design assets. When getting started, it feels like a project, evolving from early concepts to a celebrated (first) release of those assets for other people to use. “We did it! We launched a guide. Mission accomplished.” Celebration is justified, no doubt. You did achieve something, and making useful thi
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
MLP(Minimum Lovable Product)を用いたプロダクトデザイン手法｜Goodpatch Blog グッドパッチブログ
多くのクライアントの皆様は、デジタルプロダクトのファーストリリースを上手く立ち上げることに苦労しているようです。 そこで、Goodpatch Berlinを率いるBoris Jitsukataと彼のチームは、過去数年間Minimum Lovable Product (MLP)を用いたデザイン手法を広める努力をしてきました。MLPとは、ファンになってくれるようなユーザーが世の中に存在するのかを検証するための最小限のプロダクトを指します。 このインタビューではBorisに、混同されやすいMVPとの違いから、MLPとはなんであるのか、どのようにして最初の1000人の熱狂的なファンを得ることができるのかなどを語っています。これから新しいプロダクトやサービスを生み出していきたいあなたにおすすめです。 MVPへの誤解 ── まず、MVPという考え方にまだ慣れていない方々に簡単にそれについて説明してもら
うわっ、日本のWebデザイナーの年収、低すぎ…？
以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か
なぜ日本ではデザイナーの地位が上がらないのか？
最近は海外を中心にエンジニアと共にデザイナーの需要が高まっている。理由はシンプルで、プロダクトに加え企業経営にとってデザイン思考やサービスデザインなど、「デザイン」の言葉で表現されるマインドセットやスキルが求められているからである。 実際に、O’Reilly Mediaが2017年に世界のデザイナー324人を対象に行ったリサーチによるデザイナーの給与調査レポートでもそれは顕著になっている。 このレポートでは世界中のデザイナーにアンケートを取り、デザイナーの待遇や地位に関するデータをまとめた。この膨大なデータの中でも特筆する点としては下記があげられる。 世界のデザイナーの待遇調査結果 (中間値による算出):世界のデザイナー平均年収額は$91,000アメリカのデザイナー平均年収額は$99,000カリフォルニア州のデザイナー平均年収額は$128,000アメリカ国内デザイナーの1週間の平均労働時間
プロダクトデザイナーのスキルマップを考えてみた
何でも屋が増えてもスケールしない「UXが付く肩書きがもつ不安感 」という記事で、UX デザイナーが『何でも屋』になっているのでは？という疑問を投げかけました。ひとりのデザイナーとして様々な分野に関わりたいと思うものの、UX の文脈で求められるスキルと知識の幅は広いので、すべてをカバーするのが極めて難しいです。また、ひとりですべてを抱え込むと、組織が求める品質とスピードに応えることができない場合があります。 初期は複数の役割を受け持つことになりますが、プロダクトと組織が成長していかなければいけないときも同じように何でも携わるというやり方が適しているとは限りません。専門性を伸ばしていくことでより高度な提案とアウトプットができますし、互いの弱みを補いながらチームとして動く意味も増していきます。 デザイナーをひとりしか雇えない環境では数多くの分野に精通している人のほうが良いですが、そういう人ばかり
Starbucks Creative Expression
Our new expression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life. As we evolve to meet beautifully diverse customers all over the world, our brand has evolved too. Here we introduce a fresh new design system that maintains the core elements of our brand while keeping our customers’ experience central to creative expression. To achieve this, we
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
デザイナーが思わずとっておきたくなる！無料のPSDファイル86選
プロダクトデザインを行う上でよく使うモックアップは、Web制作やその他デザインの場面、ビジネスの様々なシーンで活用することができます。 例えば、Web制作の場面では、ホームページのデザインにそのまま使うことが可能です。ビジネスの現場では、プレゼン資料で完成予定のデザインを見せたい時に使えます。 様々なタイプの素材があり、しかも無料で手に入るものが豊富にありますので、活用しない手はありません。 今回は、そんな便利なPSD素材の中から無料のものだけをピックアップしてご紹介します。 ビジネスに、デザインに、ぜひ活用してみてください。 ビジネスからデザインまで、幅広いシーンで重宝する無料PSD素材まとめ 1. 3 Elegant Macbook Pro MockUps http://graphicburger.com/3-elegant-macbook-pro-mockups/ 異なる3シーンを収
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインシステムを持たない組織のこれまでの取り組みと今後を考える
Material Design
iOS Human Interface Guidelines：Designing for iOS （日本語）
STUDIO AI | The new age design tool with WebDesignAI inside.
Mind Studios
http://chromelens.xyz/
良いデザインのためのマインドセットの作り方
