Google製iOSアプリがマテリアルデザインに固執しない方針にシフト

2021/10/11 18 users シフト マテリアルデザイン iOSアプリ 方針 iOS向け

Googleは自社プラットフォームのAndroidだけでなく、AppleのiOS向けにもアプリを提供しています。このようなAppleプラットフォーム向けにGoogleが提供しているソフトウェアのデザインを担当しているJeff Verkoeyen氏が、Google製のiOSアプリではGoogleのデザインガイドラインである「マテリアルデザイン」に固執しない方... 続きを読む

待機状態のUIについて整理してみる(デザイン編)

2021/05/05 141 users Introduction 待機状態 ローディング デザイン編

Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UI のことです。 ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため。 この記事ではデザインガイドラインや既存のデザインシステム... 続きを読む

個人的UIデザインの情報源まとめ

2020/10/13 707 users UIデザイン UIデザイナー エンジニア デザイナー 情報源

どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドライン... 続きを読む

Droidkaigi2019でRoomClipのデザインガイドラインを公開した話｜takaaya｜note

2019/02/19 29 users RoomClip Note やりとり パーティ 好評

2019年2月7〜8日に開催されたDroidkaigi2019で、RoomClipは企業スポンサーとして参加しました。 （パーティのケーキ大好評でした✨） そこでデザインガイドラインを（抜粋ですが）公開したところ、私からしてみると意外にも好評だったようで、少しでもエンジニア・デザイナー間のやりとりが円滑になったらいいなぁを応援... 続きを読む

デザインガイドラインの初回構築時のポイントと運用方法 - Life is bitter

2019/02/06 38 users Life is bitter HERP ATS 運用方法

エンジニアとデザイナーが互いにプロダクト開発をしやすくするためにデザインガイドライン(あるいは拡張してデザインシステム)を作ることがあります。いま私がデザインしているプロダクトであるHERP ATSでは1年前にデザインガイドラインを設けて運用しています。 デザインガイドラインを実際に構築して1年ちょっと運用し... 続きを読む

ウェブデザインの本質に主眼を置いたデザインガイドライン「ブルータリスト・ウェブ・デザイン」 - GIGAZINE

2018/07/09 392 users GIGAZINE ウェブデザイン 主眼 焦点 アプリケーション

by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取り... 続きを読む

Atlassianが見据えるデザインシステムの先にあるもの | UX MILK

2018/06/21 47 users Atlassian ADG UX MILK シニアデザイナー

デザインシステムを作っているプロダクトチームは多くあり、デザインシステムも発展しています。 私たちはAtlassianのAlex氏（デザインチーム主任）とVenn氏（シニアデザイナー）に、どのようにAtlassianのデザインガイドライン（ADG）を発展させてきたのかと、将来この業界がどこへ向かうと予測しているのかを直接伺い... 続きを読む

とある求人サイトをデザインリニューアルした話｜Yoko Nishida｜note

2018/05/12 91 users Yoko Nishida デザインリニューアル リモ 下調べ

副業で「 コデアル 」という求人サイトのデザインリニューアルをしました。このリニューアルでは、何をやったのかを振り返ってみようと思います。 〜 目次 〜 1. プロジェクト概要 2. まずは下調べ 3. 主要画面のデザイン 4. デザインガイドライン 5. 機能単位のデザイン 6. コミュニケーションルール 7. 実装レビュー 8. このプロジェクトでの学び 1. プロジェクト概要 コデアルはリモ... 続きを読む

React Sketch.appでデザインガイドラインを作ってみた // Speaker Deck

2018/04/25 59 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

動的デザインガイドラインのつくり方 // Speaker Deck

2018/02/11 30 users Speaker Deck つくり方

Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE 続きを読む

膨大なデザインシステムを細やかに検索・参照できる。デザインシステムプラットフォーム『Adele』。UXPinから｜小山和之｜Kazuyuki Koyama｜note

2018/01/19 257 users Adele UXPin プロトタイピングツール Note 検索

膨大なデザインシステムを細やかに検索・参照できる。デザインシステムプラットフォーム『Adele』。UXPinから プロトタイピングツールやデザインシステム制作ツールを提供する UX Pin は、様々な企業・サービスが公開しているデザインシステムやデザインガイドライン等をまとめた、 デザインシステムプラットフォーム『 Adele 』 を公開した。 リリース当初は43のシステムが登録されている。検索機... 続きを読む

2017年、デザインガイドラインについて考える。｜Yuya Remmy Furusato｜note

2017/11/27 393 users root UIデザイナー エンジニア UXデザイン パーツ

株式会社rootのUIデザイナーの古里祐哉です（ @remmyfurusato ）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると 「デザインガイドラインに注力した」 年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニア... 続きを読む

闇深めだったサービスのスタイルガイド作成までの真実

2017/10/19 46 users スタイルガイド LIMIA Event 作成 登壇資料

Nextstage Nite vol.2 - 実践されるデザインガイドライン - での登壇資料です。 LIMIAのスタイルガイド作成までのお話。 闇を抱えたサービス、サイトにおすすめの手法です。 https://connpass.com/event/68231/ 続きを読む

みんなのウェディングのCSS事情 — みんなのウェディングエンジニアリングブログ

2016/12/15 99 users ウエディング ウェディングエンジニアリングブログ 平岡 ドン

こんにちは。みんなのウェディングの 平岡 です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトン... 続きを読む

効率的なアプリ開発のためにデザインガイドラインを作成した話 - VASILY DEVELOPERS BLOG

2016/02/02 155 users DESIGN VASILY DEVELOPERS 実装 方々

2016 - 02 - 02 効率的なアプリ開発のためにデザインガイドラインを作成した話 Design こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか？ それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プ... 続きを読む

6つの簡単なステップで改善するアイコンデザイン | デザイン | POSTD

2015/12/30 144 users アイコンデザイン Iconfinder POSTD アイコン

この記事では、私のデザインガイドラインを「アイコンデザインを改善するための6つの簡単なステップ」としてまとめました。このステップはアイコンデザインの基礎を示しますが、独断的なルール集ではなくガイドとお考えください。聡明なデザイナーは、どんな状況であれば最大の効果を得るためにこのルールを破ってもよいか、判断できるのです。私がIconfinderに投稿されたアイコンを検討する時には、デザイナーと顧客に... 続きを読む

デザインの勉強にいい！有名ブランドのガイドラインのまとめ | コリス

2015/06/30 627 users コリス Heineken ガイドライン Fedex ケンタ

Apple, Microsoftをはじめ、Sony, IBM, Intel, Adobe, Dell, FedExなど、有名ブランドのデザインガイドラインを紹介します。 スタバ、ケンタ、Heineken、NASA、LEG...記事の続きを読む 続きを読む

Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT

2015/04/10 344 users Primer Facebook MOONGIFT デザイナー

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザイン... 続きを読む

マテリアル・デザインから学ぶ４つの重要ポイント + 参考UIデザイン、無料素材まとめ - Photoshop VIP

2014/12/19 227 users VIP マテリアル・デザイン 重要ポイント 日本語抄 許可

海外デザインブログDesignModoで公開された「Lessons Learned From Analyzing Material Design Components」の著者 Paula Borowskaより許可をもらい日本語抄訳しています。Thank you so much as always! Googleのデザインガイドライン「マテリアル・デザイン（英:Material Design）」に目... 続きを読む

オラクル、モバイル用エンタープライズUIのデザインガイドラインを公開「Oracle Alta User Interface」 － Publickey

2014/12/02 64 users Publickey オラクル コンポーネン レイアウト 原則

オラクルは「Oracle Alta User Interface」（オラクル・オルタ・ユーザー・インターフェース）との名称で、エンタープライズ用モバイルアプリケーションのユーザーインターフェイスに関するガイドラインを公開しました。 ガイドラインは4つの原則「モバイル・ファーストのデザイン」「シンプルで整理されたレイアウト」「明確な情報階層」「ユーザー・エクスペリエンスを向上する直感的なコンポーネン... 続きを読む

話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう | HTML5Experts.jp

2014/08/05 125 users Polymer 連載 コンセプト 後半 特集

連載： Google I/O 2014 特集 (10)この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Ma... 続きを読む

目線トラッキングデータからみるEコマースサイトのデザインガイドライン - GIGAZINE

2014/07/17 61 users GIGAZINE Eコマースサイト What ガイドライン

By Matteo Penzo 実際に商品を手にとって眺め、使ってみることができる実在する店舗とは異なり、ネット上で商品を販売するEコマースサイトにおける顧客誘導には独自の手法が求められるものです。オンラインショップで商品を購入するユーザーは実際に何を見てどのような行動をとっているのか、そこから導き出される有効なサイトデザインのガイドラインがまとめられています。 cxpartners | What... 続きを読む

GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中 - GIGAZINE

2013/06/14 627 users GIGAZINE Behance Gmail Chrome

ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1... 続きを読む

「スマートフォンのためのUIデザイン」を執筆しました - tikeda's blog

2013/03/31 29 users UIデザイン スマートフォン iPhone パターン ルール

2013-04-01 「スマートフォンのためのUIデザイン」を執筆しました UIデザインの入門書「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」を執筆させて頂き、3月30日に発売になりました。ユーザーが見慣れて使い慣れたUIをルール（デザインガイドライン）や、UIコンポーネント毎のパターンにすることで、分かりやすく使いやすくできるのではないかという考え、iPhoneやA... 続きを読む

MacOS Xのインターフェースガイドラインが公開されています | IDEA*IDEA

2008/07/30 287 users Gen Taguchi インターフェース IDEA Mac

MacOS Xのインターフェースガイドラインが公開されています July 30, 2008 12:31 PM written by Gen Taguchi Macは使っていないですが、洗練されたインターフェースはいつもすごいなぁ、と思っていたりします。そうしたインターフェースのデザインガイドラインが公式サイトで配布されていますね。 基本的にMacOS Xのデザインガイドラインのようですが、参考にし... 続きを読む