ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
50 Manuais de Identidade Visual Para Se Inspirar - Design com Café
Fundador e colunista do Blog, atuo como Namer e Designer, que há 22 anos apoia e empodera empreendedores a ressignificarem suas marcas, tendo trabalhado em importantes projetos nacionais e internacionais, alcançando outros quatro continentes. Além disso, já empreendi como co-founder de aceleradora de startups, de estúdio de desenvolvimento web, plataforma de educação online e marca de HPPC Manual
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
仕様変更に強く再利用しやすい！AbemaTVでも採用されている「Atomic Design」の基本を徹底解説
Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。 通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。 ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。 その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。 Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。 今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。 コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。
Apple、Googleに続くデザインガイドライン、『Microsoft Design』について | DeNA DESIGN BLOG
こんにちは、今年度に新卒入社したデザイン戦略室デザイナーの貴島と申します。本稿ではデザインガイドラインに焦点を当ててご紹介をしたいと思います。 私達がアプリの設計をする上で最初に行うべきことは、プラットフォームのデザインガイドラインを理解・熟知することでしょう。 Apple社は『iOSヒューマンインターフェイスガイドライン』、Google社は『マテリアル デザイン』といった独自のデザインガイドラインを設けており、プラットフォーム上のアプリに対してデザインガイドラインに沿った設計を推奨しています。 またデザインガイドラインは端末毎の差異を含めて画面構成が設計されているため、結果的に各OSに合わせた最適なユーザーインタフェイスの設計を可能にします。 ( ※マテリアル デザイン』日本語版のガイドライン(PDF形式)が先日公開されました。 ) マテリアル – 日本語 - Material Desi
iOS ヒューマンインターフェースの原則 — Medium
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
iOSアプリ開発者が理解すべきデザインガイドライン
こんにちは。Airレジ開発チームでiOSエンジニアをしている山口です。 みなさんはiOSは好きでしょうか。私は開発者・ユーザーとして大好きです。統一感のあるデザインや使いやすさなど素晴らしいですね。その背景にはAppleが定めるデザインガイドラインの存在があります。各アプリケーションがデザインガイドラインに沿って開発を行うことで、iOS全体として統一感のある世界観が築かれています。 しかしながら、ただガイドライン通りにアプリを作っていくだけでは個性のないアプリになってしまいます。iOSらしさを保ちつつ個性のあるアプリを作るには、開発に関わるメンバーがガイドラインを意識し、コミュニケーションを取りながら開発をしていくことが重要だと思っています。 そこで今回は、そのガイドラインの観点からアプリ全体の構成・画面遷移を考える際に知っておくべき内容について書いていこうと思います。 iOSデザインガイ
効率的なアプリ開発のためにデザインガイドラインを作成した話 - ZOZO TECH BLOG
こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか？ それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プロトタイプの準備等、日々試行錯誤しながら最適な方法を探しています。 数ある開発手段の中で今回は、弊社が運営するサービス「iQON」の機能改善やデザインリニューアルに効率的に対応できるよう新たに作成した、デザインガイドラインについてご紹介したいと思います。 デザインガイドライン作成の背景 弊社では1年ほど前からデザイナーが5人に増えたことにより、プラットフォームごとに一人づつオーナーシップをとって制作を進める体制に変更されました。 私も以前は、アプリデザインや広告のデザインなどジャンル関係なく携わって
Googleのアイコンデザイン思想を学ぶ | ビジュアルシンキング
Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。 Icons – Style -Google design guidelines アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。 プロダクト・アイコン 「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを伝えるものです。 image by Google システム・アイコン 一方「システム・アイコン」は、ユーザインタフェースに用いられるもの。 「プロダクト・アイコン」と比べて、小さいサイズでの使用、単色での使用の想定が必要。 image by Google 作りの違い 「システム・アイコン」がフラットな作りなのに対し、「プロダクト・
Designer's guide to DPI
DPI or Dots Per Inch is a measure of spatial dot density initially used in print. It's the number of ink drops your printer can put in an inch. The more dots per inch, the sharper your image. This concept is applied to computer screens under the name PPI for Pixels Per Inch. Same principle: It counts the number of pixels your screen displays per inch. The name DPI is also used in screens. For a co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインの勉強にいい！有名ブランドのガイドラインのまとめ
Material Design
Google Design
デザイン仕様書(ガイド) の書き方(初歩用)