日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
酔いどれデザイン日誌 - Drunken Design Diary -
皆さん、UIデザイン時のエンジニアとの情報連携を行う際、どのツールを使っていますか？私はFigmaを愛用しています。 ただ、このFigmaに一点だけ気に入らない箇所があります。それはコメントが要素に吸着しない（くっつかない）ことです。これができないせいで、修正等で要素のサイズが変わったり場所が変わった際、すべてのコメントの位置を手作業で修正するという無駄な作業が発生していました。 いつかアップデートで修正されるだろうと思って我慢していましたが、全く修正されず・・・。もはや諦めていたのですが、つい最近Figmaでコメントを要素にくっつける方法を発見したので、今回はその方法を皆さんにお伝えしようと思います。 目次 Figmaのコメント仕様について Figmaのコメントを要素に吸着する方法 Figmaについて思うこと Figmaのコメント仕様について まず、Figmaのコメントが何に対して吸着し
UXデザインツール「STUDIO」でのプロトタイプ作成が最高という話 | sizucca.com
ブログ書くぞーー！！ と取り急ぎのブログを立ち上げた のが 1 ヶ月前。 月日が経つのって早いですね（思わず目が遠くなる）。 その内ビルド方法を忘れて記事の更新できなくなりそうな未来が見えるわぁ…と思っていたら、 テンション上がるプロトタイピングツール「STUDIO」を見つけたので、 勢いに任せてその感想を書き散らしてみようと思います。 目次 作成したデモ プロトタイピングツールの使い所 STUDIO の感想 あとはこれができれば最高！！な要望 敢えての懸念点 まとめ 作成したデモ 百聞は一見に如かず。とにかくどんなプロトタイプが作れるのか見たい！！という方は、 以下からデモで作成したプロトタイプのライブプレビューがご覧いただけます。 iPhone 版 ※ 1 ページのみ Web 版 ※ 1 ページのみ sizucca.com（iPhone 版） ※ グローバルナビゲーション部分は遷移可能
見た目が悪くても人気なサービスから学ぶユーザビリティ設計
まるで90年代かのような、見た目は良くないけれども人気のあるWebサイトは、今現在でも多く存在しています。 上記のWebサイトは、お世辞にも良いデザインとはいえないですが、それにもかかわらず人気があります。なぜ人気があるのか、それはユーザーがもっとも必要としているものを確実に提供しているWebサイトであるからです。 たとえば、各Webサイトにはこのような特徴があります。 ・Redditは、ユニークユーザーが2億3,400万人、月間ページビュー数が81.9億、日間投票数が2,500万（2016年時点の統計）にもかかわらず、表示速度が非常に速いサイトです。 ・Hacker Newsは最新のスタートアップ関連のニュースを掲載するだけのサイトです。しかし、この「コンテンツを目立たせる」ことこそが、ユーザーからもっとも評価されている点です。 ・Wikipediaは情報がとてもよく整理されていて、ユー
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
【デザイナー向け】これからAndroidのデザインをする人へ - Qiita
このナビゲーションバーがスマートフォンの場合は横画面にした場合は右側に配置されるのですが、タブレットは下側に表示されます。 さらに、ソフトウェアキーボードではなくハードウェアキー(通常 静電方式のタッチ)の場合があります。これにより、端末によってレイアウトが変わるのでデザインをする上では注意が必要です。 smart phone tablet 端末サイズ一覧 海外端末が多いですがGoogleのMaterial.ioのページを見ると、dpとpxが記された端末のサイズ一覧を見ることが可能です。 https://material.io/devices/ こちらのページにある端末がAndroidのデファクトスタンダードになりますので、本当はこちらに合わせるのがベストですが、日本だと独自にカスタマイズされた端末達と戦う事になります… お互い頑張りましょう💪🏼 iOSとの違い 戻るという概念 戻るボ
Facebook UIデザイン大解剖─UIの使いやすさを決める「グレースケール」の配色ルール ｜ブログ｜root｜デザインの実践を個から組織・事業へ
初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（e-words.jp）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の一つで、白と黒とその中間の何段階かの灰色のみを用いること 一言でいってしまえば、限りなく黒に近いものから限りなく白に近いものまで「いろんなグレー」ということでしょうか。 グレーという色は地味ですが、UIデザインにおいて実はもっとも重要で、なおかつ難しい色なのではないかと考えています。 例えば、Webサイトのキーカラーなどは、目立ちますし、サイト、しいてはブランドそのものの印象を決定づける色なので、色選
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
なぜウェブデザイナーは暗黒面に落ちて人をだます「ダークパターン」を使うようになるのか？
by Patrizio Cuscito ウェブサイトやアプリを使っていると自分の意図するものとは違う操作が勝手に行われていて戸惑うことがありますが、ミスではなく、「わざと」そのようなデザインにしているユーザーインターフェースを「ダークパターン」と呼びます。なぜ善良なデザイナーがダークパターンを使う悪意あるデザイナーになってしまうのか、その仕組みがムービーで公開されています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは何か？ということは以下の記事を読むとわかります。 ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ - GIGAZINE なぜデザイナーが暗黒面に落ちてしまうのかは以下のムービーで解説されています。 Dark Patterns:
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める（例示は3パターンでお願いする） 私にとって、実際に稼働してい
ケーススタディ：NetflixはどのようにA/Bテストを実施しているのか？ | UX MILK
Netflixはどうやって素晴らしいストリーミング体験を提供しているのでしょうか？ 彼らがどのようにサイトを作り、さらにA/Bテストを通してどのようにUIの改善をしているのでしょうか？ この記事では私がYelpで参加したDesigners+Geeks eventで学んだことから共有します。２人のスピーカー、Anna Blaylocky氏とNavin Iyengar氏はNetflixのプロダクト・デザイナーであり、何年も何百万人という会員に行ってきたA/Bテストから収集した実態について語ってくれました。また、参加者がデザインを考える上で手助けとなるようないくつかの関連する例を示してくれました。 科学的な手順 仮説 科学において仮説は、研究や実験を通して検証されるアイデアや事象の原因を指します。デザインでは理論やや予想を「仮説」と呼ぶことができます。 仮説の基本的な概念には、あらかじめ決まった
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
現役のデザイナーが語る！優秀なUI/UXデザイナーになるために不可欠なスキルとは | TechAcademyマガジン
現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは UI/UXデザイナーと聞くと、UIデザイナーとUXデザイナーはそれぞれ使えるツールが違い、求められることも違うことがあるでしょう。それでも優秀なデザイナーとして活躍するために必要な要素を紹介しています。これから目指す上でぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になりま
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
モバイルアプリのUXを改善する４つのディテール
アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。 モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。 ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。 この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。 スプラッシュスクリーン ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順
UXデザインで考えるコンテンツ設計 | ykazu.com
先日、ベースキャンプ名古屋にて開催された WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」（講師: 長谷川 恭久さん）の参加レポートとなります。 このセミナーでは、主に Web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法をレクチャーとワークショップを交え、5時間で学ぶというものです。 良いコンテンツを設計し提供するためには、ユーザーを理解すること・今のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。 良いコンテンツとは？ 「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
growiz.us
UXデザインに役立つフレームワーク5選【すぐに使えるテンプレ付き】 | カスタマーエクスペリエンス（CX）とは？ 基礎から実践までやさしく解説
