uiとデザインに関するflakwingのブックマーク (79)

  • 管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ~業務システムとSaaSのUIを考える

    私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その

  • UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ

    WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

    UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
  • 2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ

    アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ(英: Simplicity)と有効性(英: Effectiveness)が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基的な操作を行

    2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
  • 優れたUXを実現するための人間中心デザインとは? - UXploration

    当記事は、2015年2月5日に無料動画のオンライン学習サイト - schoo WEB-campus(スクー)にて開催した授業「優れたUXを実現するための人間中心デザインとは?」のフォローアップになります。 当日の授業の内容は schoo の下記ウェブサイトよりご覧いただけます(会員登録が必要です)。 はじめに 当企画は schoo と弊社コンセントとの合同企画で「社会に求められる価値あるデザイナーとは?」というテーマのもと、著者含むコンセントのアートディレクターの佐藤とサービスデザイナーの大崎の3名でそれぞれの立場から1人づつ授業を開催してきました。 デザイン領域の拡張に伴うデザイナーとしての役割とは? 佐藤 通洋 先生 - 無料動画学習|schoo(スクー) サービスデザイン時代のデザイナーのあり方とは? 大崎 優 先生 - 無料動画学習|schoo(スクー) 最終回となる今回は、以下の

    優れたUXを実現するための人間中心デザインとは? - UXploration
  • AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較

    スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー

    AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ

    日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル

    モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
  • 『難しくないデザイン効率化のすすめ』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド(仮)でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは? と、なかなか一筋縄ではいかない問題です。 ガールフレンド(仮)デザインチームの場合、1年目~3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう

    『難しくないデザイン効率化のすすめ』
  • UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか

    「基的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー(便宜上、UIの良さがわからないユーザーをエントリではそう呼ぶ)によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか? まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか? 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した1つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無

    UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
  • 直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ

    UIデザインの参考に!斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって? そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ

    直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
  • 思わず触りたくなるiOSのUIデザイン - RyoAnna

    ユーザーインターフェイスが洗練されているアプリは、使っていて気持ちいい。ボタンの形、配置、配色、画面の遷移、アニメーション。これらのデザインと機能がマッチすると、多くの人に受け入れられるアプリになる。 今回はiOS、特にiPhoneUIデザインを紹介したい。どれも触りたくなるものばかりだ。 Qiwy iOS/iPhone app curl test by Mikael Eidenberg UX/iOS/UI iPhone idea with video process by Cuberto Qiwy iOS/iPhone app switch and slider by Mikael Eidenberg Untitled iOS/iPhone synth app navigation by Mikael Eidenberg Iphone UI by Matthias Mayr Busin

    思わず触りたくなるiOSのUIデザイン - RyoAnna
  • UIデザインの参考になるサイトまとめ | ナナメウエblog

    毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins

  • Microsoft R Server now available for Academics and Students via DreamSpark - big data statistics, predictive modeling and machine learning capabilities - Microsoft UK Faculty Connection - Site Home - MSDN Blogs

    In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...

    Microsoft R Server now available for Academics and Students via DreamSpark - big data statistics, predictive modeling and machine learning capabilities - Microsoft UK Faculty Connection - Site Home - MSDN Blogs
  • スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】
  • UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス

    Dribbble - What are you ... / Gallery of UI Elements -... / 365psd | Download a free...他...全6件

    UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス
  • layer8.sh

    This domain may be for sale!

  • iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design

    いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns

    iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
  • 書評「UIデザインの基礎知識」 - elm200 の日記(旧はてなダイアリー)

    私はずっとプログラマとして活動してきたが、ウェブデザインをはじめとする見かけのデザインは苦手だった。ずっと避けて通っていたのだが、いまの時代、ウェブサイトのプロトタイプくらい自分で作れるようになりたいと思った。デザイナーの知人に相談したところ、紹介してくれたのがこの。 ユーザーインタフェースデザインの基礎知識 ~プログラム設計からアプリケーションデザインまで~ 作者: 古賀直樹出版社/メーカー: 技術評論社発売日: 2010/04/23メディア: 単行(ソフトカバー)購入: 11人 クリック: 170回この商品を含むブログ (15件) を見る 豊富な例を引用しながら、ユーザーインターフェイスをデザインする上で陥りがちな典型期な過ちを解説していく。数学科出身の著者というだけあって、解説は理論的で、感覚より論理を重視するプログラマにも分かりやすい。 理想的なコンピュータシステムは、ユーザー

    書評「UIデザインの基礎知識」 - elm200 の日記(旧はてなダイアリー)
  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

  • webデザインにおける視線誘導のおはなし | 07design.blog

    こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す