Web & Product Design | EttricsWe collaborate with brands we believe in We care deeply about design principles and work with brands who understand the importance of quality design.
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
本日ベータリリース完了！Backlogの画面が全面リニューアル、スッキリ・シンプルな新UIに。 | Backlogブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 楽しく集中しやすく！Backlogに新しいUIが登場！！ リニューアル開発メンバーの金です、週末はイノシシから田畑を守っています。 先日から順次リリースを行っていたBacklog新UIですが、2016年9月29日のリリースにて、backlog.jpご利用のすべての皆様に新しいデザインのUIをお使いいただけるようになりました。 グローバルバー中央あたりのUI切り替えボタンを押すことで、ベータ期間中(後述)は自由に新しいUIとこれまでのUIを切り替えて試すことができます。 新しくなった画面を少しだけ紹介 新しいUIとなり、機能追加によりいろいろ詰め込まれた画面から、整理されたスッキリとした画面へと変わっています。その中でも使用頻度の高い画面を紹介します。 課題画面 たくさんのメニュ
ベータリリース開始！BacklogのUIアップデート (2) 〜変更点とデザイナーのこだわり編〜 | Backlog ブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 こんにちは。最近海外ドラマがマイブーム。Backlog Refresh UI Webデザイン担当の中川です。 先日公開したベータリリース開始！BacklogのUIアップデート (1) 決意に至る経緯 では、Backlog Refresh UI の経緯についてご説明させていただきました。 第2弾のこの記事では、BacklogのUIをアップデートさせるために、実際にどういうことをして、どう変わったのか、デザインという観点からご説明します。 今回のリニューアルのコンセプト まず、今回のリニューアルで、やること、やらないことを決めました。 やること 画面をスッキリさせる モダンなUIにする やらないこと 大規模な画面構成の変更 既存機能の削除 やらないことを決める上で大切にしたのは、な
ベータリリース開始！BacklogのUIアップデート (1) 決意に至る経緯 | Backlogブログ
図ではGMailを例に挙げましたが、他のWebアプリケーションやサイトでも、多かれ少なかれ同様の傾向がみられます。この変化は、一過性で将来またもとに戻るといった類の流行ではなく、UIに関する認知科学等の研究や理論が進んだことによる不可逆な変化です。 利用者のマインドの変化 Webアプリケーションの多くが似たような変化をたどれば、インターネット利用者の側もそれらに徐々に慣れていき、「ちょうどいい」という感覚が変化していきます。上の図を見ていただくと、10年前に「シンプルで使いやすい！」と感じていたUIが今の感覚ではちょっと窮屈に感じられるのではないでしょうか。 歯車のアイコンは「設定」、鉛筆のアイコンは「編集」、点が3つ(…)のアイコンは「その他のアクション」といった、デザインの共通言語もこの10年ほどの間にインターネット利用者のマインドに構築されてきました。いちいち「編集」のように文字ラベ
ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる
Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる
UIデザイン初心者が知っておきたい配色の理論
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
今さら聞けない！UI/UXを確実に学ぶオススメの良スライド10選
2016年6月20日に博報堂DYメディアパートナーズのメディア環境研究所が発表した情報によると、スマートフォン/タブレット端末所有状況は2016年に70.7％となった模様です。2010年にはわずか9.8％だったことを考えると、急速に普及していることが窺えます。 参考： 博報堂DYメディアパートナーズ「メディア環境研究所」 Webサイト制作の際、これまではPCに特化したデザイン・構造だけを考えれば済む時代でした。 しかし、急激なスマートフォン・タブレットの普及により、現在はスマートフォンやタブレットを想定した内容が求められています。 その流れで近年注目されているのが*「UI/UX」*です。 操作性が悪いとユーザーはすぐに離脱してしまいます。 スマホやタブレットでより多くのユーザーに快適に利用していただくためにも「UI/UX」の設計は非常に重要です。 今回は、UI/UXについて基本から実践レベ
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
初心者がアプリのUXデザインで押さえておくべき９つの原則
Nick氏はロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルアプリをデザインする際、最も心に留めておきたいことは、ユーザーにとって便利で直感的なデザインにするということです。 デザインしたアプリがユーザーの役に立たなければ、実用価値がありませんし、誰も使ってくれません。便利なアプリだとしてもユーザーの時間と労力を必要とするものであれば、その使い方を学ぶことさえしてくれないでしょう。 良いUIデザインはこの両方のポイントをおさえています： 便利なモバイルアプリはユーザー中心である。ユーザーは差し迫った問題を解決するために、あなたのアプリをインストールします。アプリにはハッキリとした「目的」が必要です。あなたのユーザーが何を達成しようとしているのかを考え、その目的に焦点を当て、必要ないものは全て取り除きます。 UI
超クールなイマドキのダッシュボードのUIデザインまとめ | SHINGO IRIE
プログラマといえど、管理者が使うものといえど、美しい機能美でまとめられたダッシュボードをつくりたいものです。今回は、参考になりそうな美しいダッシュボードを集めてみました。 クールなダッシュボードデザイン集このくらいシンプルなのが好みです。 Gear Admin UI v2 Analytics系。数字の比較や計算が多いものに向いてそう。 Some Analytics 比較的オーソドックスに使えそう。最近、わりとこういうダッシュボードデザインが多いですね。 Dashboard Web App Product UI Design: Job Summary グラフの見せ方が個性的。 To-Do Dashboard サーバーのダッシュボード。 Server Dashboard カラーを統一するのも綺麗にみえます。 Dashboard Overview Screen トップメニューにすることで、画面を
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
UI/UXデザインは「プロトタイプがないと話にならない」- 「Adobe XD」を使った"最強のデザイン手法"
アドビ システムズ主催のクリエイター向けイベント「Adobe MAX Japan 2016」が9月2日、開催された。 これは、米サンディエゴで行われている本家イベント「Adobe MAX」を日本のユーザー向けに開催するもの。イベント当日は多種多様なセミナーが行われたが、本稿では「プロトタイプで舵を取れ！Adobe XDを使った最強のUI/UXデザイン手法」と題して行われたセッションの模様をお届けする。 "ハードルは高くスケジュールは短い"Webの現場 同セッションのスピーカーは、ビジネス・アーキテクツのデザイナーの荒木脩人氏。荒木氏が所属するビジネス・アーキテクツは、ウェブサイトの構築を中心に、コンテンツ開発からデータ解析、調査、分析、最適化まで行うデザイン会社。じぶん銀行や森ビル・六本木ヒルズのウェブサイトやauもモバイルサービスアプリなどが代表的な作品だ。 そんな中、2012年に同社に
UXデザインの基礎知識と参考になる記事5選
UXデザインは重要とよく聞くけれど、具体的になにをすればいいのかわからない…という方は多いのではないでしょうか。もしUXデザインの本当の意味を誤解していたり、軽視してサービスをデザインしていたりすると、理想的な効果をあげられないどころか、むしろ悪評が広まってしまうなんてこともありえます。 UXデザインを理解するためには「UXデザインにはどんな定義があり、どんなものを指すのか」を知らなければなりません。そこで今回は、UXデザインを学びたい方のために基礎知識と参考になる記事をまとめました。UIとUXの違いやUXデザインをするためのポイントを解説していますので、UXデザインの学習の参考に活用していただければ幸いです。 UXデザインの基礎知識 まずはUXについての理解を深めましょう。 UIとUXの違い UX を語る上でまず外せない問題が、UIとUXを混同している方が多いことです。UI / UXと表
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
デザインの伝え方
クライアントや上司、チームメンバーなどデザインを取り囲むステークホルダーにデザインの意図を正しく伝え、承認や合意を得ることは最適なUXを実現するうえで必須です。本書は、デザイナーが、デザイナー以外の人に、デザインに関わる様々な事柄を効果的に説明できるようになるための考え方やテクニックを紹介します。コミュニケーションの重要性、ステークホルダーの視点の理解や心情に寄り添う意味、デザインの狙いを明確にする作業、ニーズを聞き出すためのコツなどを詳しく説明します。 デザインが承認されるまでの手順や合意しておきたい事柄を順を追って解説しているため、デザイナー以外の人にも役立ちます。日本語版付録として、ヒーウォン・チョイ氏による「最小限のドキュメントで理解を最大限に深める」を収録。デザインの有効性を実証するスキルを身に着け、組織としてベストなUXを実現したいと考える人、必携の一冊です。 翻訳者によるサポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Open Color
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
