ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
アプリのアップデート100本ノックから学ぶUI改善のヒント｜宮﨑 晃
はじめまして。HR業界でアプリマーケティングをしている宮﨑といいます。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 https://twitter.com/yositune12345 noteでは10月の1ヵ月間で100本のノックをする中で感じた「〇〇できたら、ユーザー体験が良くできそう！」というトピックスを投稿します。 どうやってるのか？①Playストアの設定で自動更新をOFFに ②アップデート待ちのアプリが溜まる あとは一通りスクショを残してからアップデートし、UIの変更がないかを見比べていきます。 それではいってみましょう！ ①確認画面で離脱させない確認画面で何か不安になった時、画面を往復させられると面倒な気持ちに。あらかじめ不安になりそうな要素を揃えておいて離脱させな
新規登録 UI まとめてみた｜あき - 良いもの作って正しく届ける
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操作数 本記事でわかること ① UI パターン別の良し悪し ② 操作数を減らす UI 事例 ▼ 目次 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規
コードが書けないデザイナーは淘汰されていく？UIデザイナーの未来予測｜UI Crunch #8 | キャリアハック（CAREER HACK）
深刻な「AI人材」不足、どう解決する！？ デジタル人材育成でIPOしたアイデミー 社長 石川聡彦の視点
【深く考えるシリーズ】メルカリの UI がダサい理由を考えてみた。｜あき - 良いもの作って正しく届ける
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね（IPOの申し込み落選してしまいました、残念）。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの？」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
WEBデザイナーとUIデザイナーは違う職業なの？（求められるスキルや傾向など）｜スズキアユミ（デザインメモ）
【重要：この記事を読む前に】この記事は2018年に書いたもので、すでに4年ほど経過しています。常にトレンドが移り変わる業界ですので、あくまでも過去のものとしてご参考にしてくださいませ！（2022.04.14記） WEBデザイナーとUIデザイナーって、求められるスキルや得られるものって違いがあるの？と質問されて、「それたしかにちゃんと考えたことなかった！！」と思い、私なりに簡単に書き出してみました。 もちろん、会社や顧客によって変わってくるので、あくまでも【傾向】と明記していますが、これからデザイナーを目指している、別の方向へ転職しようと思っている方などに、少しでも参考になれば幸いです！ 【前提】 この記事でのデザイナーの「デザイン範囲」まず、前提として昨今『デザイン』という言葉が広義になり、デザイナーのやることが広範囲になっているので、この記事では『制作・開発工程フェーズをメインとしたデザ
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
見た目が悪くても人気なサービスから学ぶユーザビリティ設計
まるで90年代かのような、見た目は良くないけれども人気のあるWebサイトは、今現在でも多く存在しています。 上記のWebサイトは、お世辞にも良いデザインとはいえないですが、それにもかかわらず人気があります。なぜ人気があるのか、それはユーザーがもっとも必要としているものを確実に提供しているWebサイトであるからです。 たとえば、各Webサイトにはこのような特徴があります。 ・Redditは、ユニークユーザーが2億3,400万人、月間ページビュー数が81.9億、日間投票数が2,500万（2016年時点の統計）にもかかわらず、表示速度が非常に速いサイトです。 ・Hacker Newsは最新のスタートアップ関連のニュースを掲載するだけのサイトです。しかし、この「コンテンツを目立たせる」ことこそが、ユーザーからもっとも評価されている点です。 ・Wikipediaは情報がとてもよく整理されていて、ユー
【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能
あなたの価値を高めるWebアクセシビリティ（!importantバージョン）
2017年6月3日開催のイベント「!important #04 -特盛！アクセシビリティスペシャル-」で使用したスライドです。
beBit.Q Twitterでユーザビリティクイズに挑戦！
【変則○×】Q. ユーザビリティの原則の1つとして「ページ内リンクの使用は避けるべき」と言われている。ページ内リンクがあるとユーザがサイト内のどこにいるかを見失いやすいからである。この原則はどんなケースにおいても守るべき。○か×か。×の場合、例外となるケースも示せ。
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
おじさんマーケターは若者を理解できるのか？ 行動観察調査で見た若者のスピード感とダイナミズム｜POLA 中村俊之 | [マーケターコラム] Half Empty? Half Full? | Web担当者Forum![おじさんマーケターは若者を理解できるのか？ 行動観察調査で見た若者のスピード感とダイナミズム｜POLA 中村俊之 | [マーケターコラム] Half Empty? Half Full? | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd466e9d79123b11eb003e257dea76db8a3dcbf0/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2017%2Fhehf%2F2019%2Fhehf08_nakamura_ogp.jpg%3Fitok%3DqMnBNTKi)
noteのサービス設計で参考にしている本｜深津 貴之 (fladdict)｜note
http://www.life-is-bitter.com/entry/ui_checklist
CASH｜ポジティブな「お金」の表現
【メモ】!important #04 -特盛！アクセシビリティスペシャル- - ひトリ芸大生
ユーザーに考えさせちゃダメ！ クルーグのWebユーザビリティ第一法則 | 超明快 Webユーザビリティ［Web担特別公開版］
