タグ

UXとWeb制作に関するhikohicoのブックマーク (21)

  • なぜそのモーダルはダメなのか?店舗設計に学ぶUX改善5つの秘訣 - WPJ

    海外サイトで最近よく見かける、メール登録を促すモーダルウィンドウ。なぜあのUIがダメなのか? 優れた実店舗のUXから考えてみると… インタラクティブなデザインにおいて心理学は重要な役割を果たします。最適なUXを提供するためには、ユーザーに共感し、ユーザーが行動する前にユーザーの意図を汲み取らなければなりません。それによって、ユーザーが求める方向へ簡単に導き、最適なコンテンツを見てもらえるようになります。 この記事では、実店舗が売上を伸ばすために取り組んでいる5つの方法(中にはとても些細なものもあります)について考えてみます。どれもオンラインショップの改善にも応用可能な方法です。 1.レジでの追加購買促進 一般的に、小売店は往々にしてもっとも値段の高い商品を店舗の前面に配置して、お客さまに先に見せて(価格差に関するお客さまの心理を利用するため)、より安価な商品を店の奥に置くことで、とてもお得

    なぜそのモーダルはダメなのか?店舗設計に学ぶUX改善5つの秘訣 - WPJ
  • UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

    世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01: 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28: 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデートApple Watch デザイン原則」を追加 2015/10/

    UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
  • ユーザビリティの高め方7選 デザイン会社 ビートラックス: ブログ

    デバイスがパソコンからモバイルへ、そしてウェブからアプリの時代へ移り変わっていくとしてもユーザビリティとは常に変わらず求められるものである。そしてユーザービリティはそのサービスが提供する価値に大きな影響を持っている。 例えば、ECサイトを考えてみるとユーザビリティが直接購買意欲につながるわけではないが、商品購入までの過程をスムーズにおこなうことができたら、ロイヤリティーの高い顧客を増やすことが出来る。ユーザビリティはその全てのフローに関わるものである。 それではユーザービリティが高いサービスとはどのようなものだろうか?学術的な分野でユーザビリティの権威とも言われるJakob Nielsen博士はユーザビリティの高いインターフェイスは以下の5つのポイントを兼ね備えていると述べている。 学習しやすさ : システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない

    ユーザビリティの高め方7選 デザイン会社 ビートラックス: ブログ
  • 優れたUXを実現するための人間中心デザインとは? - UXploration

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

    優れたUXを実現するための人間中心デザインとは? - UXploration
  • 小さな変更で大きくUXを改善するマイクロデザインってなに? | WebNAUT by Beeworks

    ※この記事は2015年2月4日に執筆された記事です。 1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか? 王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。 このマイクロデザインという言葉、概念としては新しくないのですが、 日ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。 目次 マクロデザインとマイクロデザイン マイクロコピーとは? マイクロインタラクションとは? マイクロデザインとブランディング まとめ マクロデザインとマイクロデザイン マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。 WEBデザインでいうと、マ

    小さな変更で大きくUXを改善するマイクロデザインってなに? | WebNAUT by Beeworks
  • UXデザインで考えるコンテンツ設計 | ykazu.com

    先日、ベースキャンプ名古屋にて開催された WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」(講師: 長谷川 恭久さん)の参加レポートとなります。 このセミナーでは、主に Web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法をレクチャーとワークショップを交え、5時間で学ぶというものです。 良いコンテンツを設計し提供するためには、ユーザーを理解すること・今のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。 良いコンテンツとは? 「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを

    UXデザインで考えるコンテンツ設計 | ykazu.com
  • アプリUI勉強会 in ネットイヤーグループ

    2. メンバー紹介 鈴木 健一鈴木 智大 イマジカデジタルスケープ、IADI、FICC inc. にてデザイン/ディレクション業務に 従事した後、2014 年にアプリやサービスのUI デザインを専門に行うSTANDARD inc. を設立。マーケティングエージェンシーで培ったノウハウを基に、ユーザーの 課題解決とビジネスゴール達成を両立するUI デザインを提供する。 元ケーキ職人。 CEO,Designer Designer DTP 制作会社、某新聞社を経て株式会社ナナメウエにてデザイナーとして数々の アプリUI デザインを手がける。2014 年2 月からSTANDARD へ参画。ユーザー の目的を最短で達成し、満足度を高めるためのユーザー体験やUI 設計、情報を 正確に伝えるためのビジュアルデザインを提供する。 元ブレイクダンサー。 3. メンバー紹介 吉竹 遼Designer 2011

    アプリUI勉強会 in ネットイヤーグループ
  • グッドパッチ代表が語るユーザーインタフェースとアプリ戦略

    数多あるアプリの中からユーザーに選ばれるために必要なこととは何なのか。 500万ダウンロードを突破し、ニュースキュレーションアプリの中で勢いのあるGunosy(グノシー)。TVCMのプロモーションやレコメンドエンジンなど、選ばれるアプリとなった理由はいくつか挙げられる。中でも、その操作性や読みやすさは初期から高い評価を得ていた。 そのユーザーインタフェース(UI)を生み出した会社は、気鋭のテクノロジーベンチャー、グッドパッチ。ネクストスタンダードとなるUIを生み出す株式会社グッドパッチ 代表取締役 土屋尚史氏にお話を伺いました。 iPhoneが登場したとき、世界は変わると思った 新しい技術とかそういうものがもともと好きで、新しいサービスとか技術とかデバイスとか出てきたら真っ先に試して取り入れる側の人間なので、スティーブ・ジョブズが初代iPhoneを発表するときのYouTubeを見て“これは

    グッドパッチ代表が語るユーザーインタフェースとアプリ戦略
  • アプリUI/UXデザイナー必見!「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー

    あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している

    アプリUI/UXデザイナー必見!「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
  • 【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL

    PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです! そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください! サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※記事は2014年7月8

    【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL
  • UX設計に最適解を導き出す「UIディレクション」のカバレッジ

    こんにちは、渡辺 将基です。 僕は、日々Web戦略/サービス設計/UIUXなどをメインに「ロジカルに考え、シンプルに生む」をモットーに、インターネットサービスにおけるイノベーションへのアプローチを探求しています。 今回タイトルでは「UIディレクションのカバレッジ」という表現をしましたが、今回はクオリティの高いUIを作るためにはどういう観点での品質管理が必要なのか、ということを自分なりにまとめてみたいと思います。 ユーザー体験から逆算する「情報設計・レイアウト」 情報設計やレイアウトには無限に選択肢があるだけに、「どんなユーザーに、どんな接触態度で、どんな体験をしてもらいたいか」というマーケティング的な視点を持っているか否かで、アウトプットに大きな違いが出てきます。 初めにUIを設計する際には比較的このような視点を持ちやすいのですが、既にリリースしているサービスに対峙すると、どうしても既存

    UX設計に最適解を導き出す「UIディレクション」のカバレッジ
  • 開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!

    数多のアプリが氾濫する Android アプリですが、過去に開発の経験がある方・現在進行形で開発中の方……数多くいらっしゃるかと思います。 そんな方に是非、ご覧頂きたいのが Google が Youtube にて公開している ANDROID DESING in ACTION UX アンチパターンです。ご存じの通りアンチパターンとは「べからず集」のことで「これは駄目だからこうして欲しい」といったことがわかりやすく紹介されています。 動画の内容としては、ダイアログの表示方法、ボタンの位置、タッチフィードバック……etc 開発者の方はそのまま知識を吸収することができますし、開発者ではない方も「へー」と思えること間違いなしです。

    開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
  • 優れたユーザーインタフェース(UI)を実現するチェックリスト36項目

    【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく! 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない

    優れたユーザーインタフェース(UI)を実現するチェックリスト36項目
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート! 

    10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした! 今回は勉強会の中で特に参考になった点を書いていきます! 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です! 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン! 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま

    UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート! 
  • 「根拠のないリニューアルは悪」- 株式会社ネコメシ 山本郁也氏が語る、UXを考える上で大切なこと|U-NOTE【ユーノート】-イベントまとめプラットフォーム

    2006年4月19日 ... マーケティングの世界で古くから使われている格言に「ドリルを買いに来た人が欲しいの はドリルではなく穴である」というものがある。ソリューションを売る難しさの質を表現し ている言葉だが、これが未だに理解されていない。 2. Break the bias 「確証バイアス」 ⇒自分に都合の良いものを信じてしまいやすくなるというもの。 起業家というのは中立的な立場になりにくい。 「生存者バイアス」 ⇒成功者の意見を聞いてみたいということはよくあること。 ただ、成功している人の言っていることが全て正しい訳ではない。 成功している理由を分かっている人はあまり多くない。 「リニューアルすれば、良くなる症候群」 ⇒ビジュアルのリニューアルは、根的な設計が間違っているという論理の上で、少し気に入らないから直すくらいのレベル。 自分が気に入らないという理由だけで行うと、たいて

  • デオシークの口コミや効果を検証!ワキガの私が使い込んでみました! | 愛と小町

    デオシークの特徴 加齢臭も撃退 強烈な足のニオイも撃退 ワキ、足など全身のニオイをシャットアウト デオシークは厚生労働省が認可した医薬部外品で、殺菌効果や消臭効果がきちんと認められた有効成分が配合されている商品です。 市販されているデオドラントクリームと比べると、医薬部外品は入っている成分が違いますので、消臭効果が高いです。 デオシークは、デオドラントクリーム単品でも消臭効果が期待できますが、ボディソープとのセットを使用することでさらなる消臭効果が期待できます。 ワキガや加齢臭などのような頑固な臭いによる悩みは深いですが、デオシークによって悩みから解放される人が増えています。 博士有効成分は消臭効果や殺菌効果が認められている成分なんだ 頑固な臭いはデオシークで一発なんだ もう怖くないんだ 価格 3,380円(定期コース) 6,980円(単品購入) 有効成分 パラフェノールスルホン酸亜鉛、イ

  • クックパッド流UIの作り方 - takeshi nagayama's blog

    なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッドUIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を

    クックパッド流UIの作り方 - takeshi nagayama's blog
  • UXデザイナー(User Experience Designer)は本当に必要なのか? / Maka-Veli .com

    ※超今更です。今更UXかよと言われそうで恥ずかしいんですが、まだまだUIUXが混同されがちだなーというのと、じゃあUXって必要なのかよ?というモヤモヤを整理したいなと思い書きました。 UXデザインとは まず前提ですが、UX(User Experience)デザインとは、 ユーザーエクスペリエンス(UXと略記されることが多い)とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。ウェブ上での商品販売などソフトウェアやビジネスに関連して使われることが多いが、インタラクションデザイン全般に適用される概念である。例えば自動音声応答装置は貧しいユーザーエクスペリエンスをもたらすデザインとしてよく引き合いに出される。VIA:Wikipedia と、あります。 ユーザーエクスペリエンス=直訳するとユーザーの経験・体験と翻訳されますが、ユーザーが満足するかしな

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

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