ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Googleがコードレビューのガイドラインなど、ソフトウェアエンジニアリング実践のためのドキュメント「Google Engineering Practices Documentation」を公開
Googleがコードレビューのガイドラインなど、ソフトウェアエンジニアリング実践のためのドキュメント「Google Engineering Practices Documentation」を公開 ライセンスはクリエイティブコモンズの「表示 3.0 非移植 (CC BY 3.0)」で、複製や再配布、営利目的を含めた改変や翻案が可能になっています。 Googleで一般化されたエンジニアリングプラクティス Googleはこのドキュメントを次のように紹介しています。 Google has many generalized engineering practices that cover all languages and all projects. These documents represent our collective experience of various best practic
Yahoo! JAPANトップで見るウェブデザインの歴史
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年 アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah
UIデザインのガイドラインとの付き合い方 - Satoshi Murata
UIデザインの仕事をしていると、iOSやAndroidといったプラットフォームが公開しているデザインのガイドラインとどのくらい折り合いをつけていくかということがしばしば議論の的になります。 私がアプリをデザインする場合は、ウェブのデザインをするときよりもそれを多く尊重しますが、ウェブの場合は独自のガイドラインを重視しています。 ガイドラインの意味 そもそもUIデザインのガイドラインとは何なのでしょうか。端的には、システムの振る舞いやグラフィックとしての表現方法に一貫性を持たせるための指針であると考えています。ノーマン風に言えば、行動的な側面で、デザイナーがシステムイメージを適切にデザインすることを助け、ユーザーのメンタルモデルに寄り添うための指針と言えるでしょうか。デザインシステムではこれを機能パターンや認知パターンというふうに呼び分けていたりします。 ガイドラインに定義された振る舞いを忠
長く愛されるコンポーネントのための取り組み｜Masaki Osumi｜note
はじめにこの記事はGoodpatch UI Design Advent Calendar 21日目の記事です。 僕が担当しているプロジェクトではWebアプリケーションを開発しているのですが、その開発の中で発生したコンポーネントにまつわる問題とそれを改善するための取り組みについてご紹介します。なお、この記事の中で言う"コンポーネント"はUIを構築するための"UIコンポーネント"を指すのだと思ってください。 デザインと実装の分業によるコンポーネント設計思想のズレ開発初期はデザイナー1人とエンジニア2人の体制でデザイナーがデザインファイルを作成して、エンジニアが実装を担当していました。初期段階では、厳密にAtomic Designなどの設計手法は用いていませんでした。 その頃は人数も少なかったので、コミュニケーションも取りやすくスムーズに進められていたのですが、その後、デザイナーが3人、エンジニ
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
Sketchでデザインしながらガイドラインを作ろう｜Chizuru Kamisono
はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1. エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2. デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という
ソシオメディア | デザインガイドラインの生存可能モデル
ソシオメディアでは、デザインコンサルティングの一環としてデザインガイドラインを作成することがよくあります。デザインガイドラインの役割は主に以下のようなものです。 大規模なシステム開発において、複数の画面設計者がそれを参照し、デザインに統一感を持たせるため 将来的に複数のサブシステムが追加開発されるのを見込んで、それらのデザインとメインシステムとに統一感を持たせるため サードパーティに対してアドオンやプラグインのAPIを提供する際、デザインガイドラインを合わせて提供するため 特に開発体制の中に専属のデザイナーがいない場合、デザインガイドラインが画面設計者にとっての拠り所となります。アプリケーション全体における概念モデルと画面構成の関係、共通画面要素の役割、各画面種別ごとの基本的なレイアウトやコントロール表現、配色やアイコンの意匠といったものをガイドラインで定めることにより、ユーザビリティ上の
そのUIは見えているか？ ゲームにおける色覚ハンデユーザー対応
Facebookでシェアされていた以下のドキュメントが素晴らしい。 川崎市の公文書作成におけるカラーユニバーサルデザイン・ガイドライン。 http://www.city.kawasaki.jp/shisei/category/50-3-4-0-0-0-0-0-0-0.html 文中にもあるが、色盲、色弱などの色覚ハンデを持つ方は意外と多く、日本人男性で5%、女性で0.02%に及ぶ。この数字には地域差があり、世界的には男性の8%、女性の0.5%が何らかの色覚ハンデを抱えている。 比較的少ない日本での割合を見ても、例えば学校のクラスに一人はいる計算になる。 普段、なかなかハンデがある事をカミングアウトしないかも知れないが、私も友人知人に数人のそういった方がおり、割と身近に困るという話を聞く事がある。 ゲーム開発においても、これらの知識は知っておいた方が良いが、これまで18年ほど現場にいるが、少
ウノウラボ Unoh Labs: Web Application Testing cheatsheet
こんにちは！ やまもと＠テスト番長です。 先日マサトさんに教えてもらったのですが、 こんなウェブアプリケーション用のチェックシートがあるそうです。 SECGURU: Web Application Testing cheatsheet なかなか面白いので、軽く日本語にしてみました。（Special thanks to: ジュンヤさん） ※間違ってたらごめんなさい。 1. アプリケーション名とバージョン 2. コンポーネント名 3. 通信プロトコル SSLならばバージョンと暗号方式 4. パラメーターのチェックリスト URLリクエスト URLエンコーディング クエリストリング ヘッダー クッキー フォーム フォーム（Hidden） クライアントサイドのヴァリデーションチェック 使用していない余計なパラメータの存在 文字列長の最大/最小値 連結したコマンド（Concatenate
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
[J] CSSガイドライン メモ編 - Jamz (Design)
上ノ郷谷氏のスタイルシートを書く時のガイドライン - 2xupというエントリーにコメントしたのですが連休中に時間が取れず... 有言不実行は最低... なので、追加コメントと今後のためのメモを残しておきます。 利用者インターフェイス (User Interface) ビジュアルフォーマットモデル (Visual Formatting model) ビジュアルエフェクト (Visual effects) : というような書き方がされており、こういう正式名称があったことを知ったわけですが、念のため関連ページをメモ。 Cascading Style Sheets, Level 2 Cascading Style Sheets, Level 2 (日本語訳) CSS のガイドラインに関しては以前から情報収集していて、こうした資料を公開していただけるのは非常にありがたい。と同
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Sketch.appでデザインガイドラインを作ってみた
サービスの一貫性と高速開発をもたらす「動くスタイルガイド」 | Visional Designer Blog