デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第4弾は、UIに一貫性・統一感を持たせるためのデザインテクニックです。 UI & UX Micro-Tips: Volume Four. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. デザイン要素に一貫性を持たせる 2. ホワイトスペースはたっぷり使用してください 3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む 4. 短いパラグラフを効果的に使用する 5. カラーパレットを定義し、デザインに統一感を持たせる 6. アイコンをグリッドシステムで使用する際の注意点 はじめに 次のプロジェクトのため
日常の生活に於いて欠かすことのできない存在である自動販売機。喉が渇いた時、仕事の休憩時間に自動販売機で買う、一本の缶コーヒーが癒しという人もいるだろう。だがこの自動販売機、よく見てみれば硬貨の投入口は横向きになっている。一方で駅の券売機などは硬貨の投入口が縦向きになっているようだ。一体なぜなのだろうか。 なぜコイン投入口は縦、横の二種類があるのか 一般的に硬貨の投入口が横向きなのは清涼飲料水などを取り扱う自動販売機、セブンイレブンなどが提供するカップ式のコーヒーの販売機などもやはりコインの投入口は横向きになっている。一方で駅のチケット券売機などは投入口が縦になっている。 日本自動販売機工業会によれば、コインの投入口は投入しやすさを念頭に考えられているが、どちらが投入しやすいかについては定説がない、としている。 ではなぜコイン投入口に縦、横と二種類あるのだろうか。 これは求められる機能から、
カラーはあらゆるデザインにおいて、非常に重要な要素の一つです。 プロのデザイナーはWebサイトやアプリで、さまざまなテクニックを用いています。 カラーのコントラスト、類似性、使用比率で、フォーカスポイントを作成したり、階層をつくりだすこともできます。最近のWebデザインで使われているカラーを効果的に用いたテクニックを紹介します。 5 techniques for fine-tuning UX with color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. カラーの使用比率でフォーカスポイントを作成 02. カラーのコントラストで注意を引きつける 03. カラーを使用してUXのパターンを作成 04. カラーを使用して階層を作成 05. カラーの類似性を使ったテクニック まとめ 01. カラーの使用比率でフォーカスポイ
とにかく機能が重視された時代は終わり、今は見た目が重視されるようになった。CFO（最高財務責任者）やCTO（最高技術責任者）と同じようにCDO（最高デザイン責任者）を設置する会社もちらほら。 この記事では果敢に洗練されたデザインを目指すも、あえなく失敗してしまった事例を集めた。 １．ユニバーサルデザインで哺乳瓶を描くも、何か分からなくて失敗。「哺乳瓶」「授乳室」とシールが貼られることになった。※ユニバーサルデザインとは国籍や言語の違いによらず利用できる設計を指す。 ２．iPhone5cの公式ケース。背面の「iPhone」の文字が「non」になってしまう。スティーブ・ジョブズが生きていたら激怒するレベル。右側は一般人が提案した改良版。 ３．ユニバーサルデザインを目指した男性トイレ。何か分からないので、市販のプラカードが貼られることになった。 ４．ここまで説明する必要はあるのだろうか？エレベー
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――これまで伺ってきたお話を総合する
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEGほか現状Web閲覧に使わ
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEGは写真用途だけでなく、イ
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEGにはすごくたくさんの種類
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEG 2000やXRといった
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――前回、JPEG 2000がプロフ
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。, そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――現在、JPEG 2000が一番
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEG2000やJPEG XR
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――JPEGという団体にはどんな人た
スマートフォンが普及し、オフィスにもPC設置が標準となった現代、「JPEG」に触れたことがないという人はまずいないのではないだろうか。この媒体に掲載している写真やイラストも「JPEG」形式で保存されている。 だが、あまりにも生活に浸透しすぎていて、「JPEG」そのものについて意識する機会はあまり無かったのではないだろうか。 そこで今回は、JPEGを作った団体に所属し、画像処理の研究を行っている拓殖大学の渡邊修准教授に、「世界一身近な画像圧縮技術」と言って差し支えない地位を確立した「JPEG」について、誕生の経緯から普及の流れ、そしてこれからリリース予定の次世代規格までお話を伺った。 拓殖大学 電子システム工学科 渡邊 修 准教授 ISO/IEC JTC 1/SC 29/WG 1 (JPEG) メンバー。画像処理、特に画像圧縮とその応用に関する研究が専門 ――最初に、「JPEG」という名称の
by Patrizio Cuscito ウェブサイトやアプリを使っていると自分の意図するものとは違う操作が勝手に行われていて戸惑うことがありますが、ミスではなく、「わざと」そのようなデザインにしているユーザーインターフェースを「ダークパターン」と呼びます。なぜ善良なデザイナーがダークパターンを使う悪意あるデザイナーになってしまうのか、その仕組みがムービーで公開されています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは何か？ということは以下の記事を読むとわかります。 ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ - GIGAZINE なぜデザイナーが暗黒面に落ちてしまうのかは以下のムービーで解説されています。 Dark Patterns:
Webデザイナーとクライアントの関係は共通の認識で目的をもち、ゴールを目指すことが理想です。しかし現実では些細なことで異なってしまうこともあります。 そんなWebデザイナーとクライアントのあるあるを軽快なアニメーションでまとめたコンテンツを紹介します。 Graphic Designer Vs Client もちろん、すべてのデザイナー・クライアントがそういう事ではありません。そういった人たちもいるという程度でお楽しみください。 掲載にあたり元サイト様にライセンスを得ています。 ※各コメントは著者にアドバイスをいただいたものです。
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
ソフトウェアを設計する際、アプリを端末に読み込む速度を変えることについて、シミュレートする手段はありません。従ってアプリのコンテンツが画面に表示されるまで、ユーザが延々と待たなければならなかったとしても、その原因は必ずしも設計だとは限りません。 さらに、インターネットの通信速度は保証されているわけではありません。画像や音楽などをダウンロードしていると、通信速度が著しく低下することがあります。こんな時のために、ユーザに不満を抱かせず、退屈させない方法を考えておく必要があります。 スピナーの表示は無益 スピナーを表示するのは、コンテンツの読み込み処理や演算処理の最中であることを表すのに適切な方法ではありません。デフォルトでアイコンを読み込むのは（例えば中心からグレーの輪が広がるiOSのスピナーのように）、ユーザによくない印象を与える傾向にあります。スピナーは、デバイスのブート（起動）に始まり、
毎朝、デザイナーは目が覚めると、喜んで自分の製品に取りかかります。それがデジタル製品であっても物理的な製品であっても、デザイナーは心の中で、人々が自分の製品を使いたがるようになり、楽しんで使うようになると信じているのです。 それはやや一般論かもしれません。しかし、私たちはデザイナーとして、自然と 自分が取り組んでいる各プロジェクトを最高のものにし 、革新的なものにして、そして何より、違いをもたらしたいと考える傾向があります。 ああ、私の製品は素晴らしい物になるはずだ。機能やオプション、設定が充実している。みんなが毎日その製品を使い、愛用するようになるだろう。 – あるデザイナー ここで少し意外な事実をお教えましょう。人々は製品を使用ことにあまり興味はありません。ユーザがインターフェースを操作したり、つまみを回したり、レバーを引いたり、ボタンをタップしたりするのはすべて時間の無駄です。むしろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く