[Web] UI/UXデザインがわかるサイト8つのまとめ
ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、 どうにもデザインが難しい！ デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、 ユーザビリティの理論を調べてみました。 と、言ってもただの自分のためのまとめメモですが。 あと、gleesyが気になった方はhttp://gleesy.com/より事前登録をお願いします。 【0.目次】 ―基本 ・ユーザビリティ5原則 ・デザインガイドライン ―ガイドライン ・３つのチェック項目と5つの法則 ・インターフェースデザインで気をつけるべき10のこと ・カラーデザインの原則 ―評価方法 ・ユーザビリティテスト ・ヒューリスティック ・チェックリスト ・認知的ウォークスルー ・シナリオウォークスルー 【Ⅰ.基本】 まずは、ユーザビリティの基本となる考え方です。 ユーザビリティを考慮したサイト設計は以下の
![[Web] UI/UXデザインがわかるサイト8つのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3eb672b73358f759376101aa51cca30d48f0e13e/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-ULtIWFct5AM%2FTjFRdl166eI%2FAAAAAAAAAoY%2FFM3B0bh872U%2Fw1200-h630-p-k-no-nu%2Fuxresearch_01_03.gif)
UXとは何ぞや？ UXを高める武器を手に入れよう！ ― 開発者は、いかにユーザー・エクスペリエンス（UX）と付き合うべきか ―
連載目次 ◇本連載の趣旨 ユーザー・エクスペリエンス（以下、UX）とは、大ざっぱにいうと、ある製品（アプリケーション）をエンド・ユーザーが使った際に経験する「楽しさ・心地よさといったプラスの感情」を、（エンド・ユーザーに提供する）価値として重視するコンセプトだ。具体的には、見た目のみではなく、使い勝手や信頼性などの側面を重視した設計を行い価値を実現する。（UXの詳細な定義については後述）。そのUXが注目されるようになって久しい。が、UXの定義や意味するところ、もたらされる恩恵は、一般の開発者レベルまで伝わっているだろうか。 開発者にUXについて尋ねると「UXはデザイナーの仕事（なので、自分には関係がない）」というような意見を持っている方に出会う。本当にUXに関係のない開発者がいるのだろうか。 アプリケーションに対するエンド・ユーザーの不満を例に、不満の原因が誰の責任か見てみよう。 これら、
海外向けWebサイト作成のポイント Top10 デザイン会社 ビートラックス: ブログ
海外向けWebサイトを作ったけれどいまいち問い合わせが来ない。そんな悩みを解消するため海外向けWebサイト作成をテーマとして、海外向けウェブサイトを作るにあたって気をつけなければならないことは正しい英語を使用することだけではもちろんない。 今回はセミナーのテーマとなった”海外向けサイトにありがちな間違いTOP10”をセミナーでのQ&Aと併せてここで紹介する。 1. 英語表記 アメリカ英語 vs イギリス英語海外向けwebサイトに英語を使った場合、気をつけなければいけないことの１つはアメリカ英語とイギリス語の違いだろう。例えば、イギリスではお問い合わせのページに”enquiry”、メールには”email id”、電話も”telephone”など、比較的堅い言葉を使用する傾向にある。 それに対してアメリカは比較的カジュアルで、お問い合わせには”contact us”、メールは”email”、電
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
UXのプロがアドバイス「Web担のサイトはこう変えるべし」――やってみました「UX診断」 | Web担当者Forum
UXのプロが岡目八目で切り込むのが快感今回、「UXデザインパッケージ」のサービスを体験してみたわけですが、結論から言うと、「さすがUXのプロ」という面と、「まさに岡目八目、外部に頼む価値」という面とがありました。 アドバイスは、現状のWeb担の見せ方をかなり大幅に変えるというものでした。つまり、現状をある意味で否定された形なのですが、それに対して違和感は抱きませんでした。というのも、そうするべきだとして示されている理由が理路整然としていた納得できるものであり、さらに自分でも薄々は感じていた「そうだよね」という部分をえぐられていた内容も多かったからです。 たとえば、アドバイスでは、「移動中などにスマホで友人のフィードで見かけた記事などが気になり、でもそのときは読まずにあとから読む」といった行動にうまく対応できるようにと指摘されています。 これは、言われなくてもわかっているはずのことです（実際
おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
知りたい人にも伝わるUXにするために必要なこと
今年のはじめ「Quantifying the User Experience」という書籍を読みました。利用者体験をいかに数値化するのかという課題を、統計学と掛け合わせて解説しています。利用者の行動の観察やアンケートといった、ユーザー調査の結果を数値化して UX に活かそうという内容です。所々、数式が出てくるなど、他の UX 関連の書籍とはひと味違う難解な書籍でした。 実は、この書籍がオススメだから記事を書いているわけではありません。これは UX 実践者（もしくは UX デザイナーと呼ばれる人たち）が陥る問題に繋がるのではと思い、この書籍を紹介しました。UX も他の分野と一緒で、深く掘り下げないと理解できないところがたくさんあります。利用者の体験を考え始めると、必然的に社会学や心理学に目が向いてしまうのもそのためでしょう。また、方法論も確立されはじめたこともあり、海外からたくさんの情報が流れ
2時間で作るカスタマージャーニーマップ――実例とともに考える新しい「おもてなし」のカタチ | 顧客の行動パターンを理解するためのカスタマージャーニーマップ入門
カスタマージャーニーマップを使う3つのメリット顧客体験の分析にカスタマージャーニーマップを使うメリットとして、次の3つが挙げられます。 視野が広がるWeb担当者が考える施策は、PCやモバイルなどの媒体に視線が向きがちです。しかし、顧客の行動文脈から施策を考えるようにすると、もっと広い視野で施策を検討できるようになります。PCやモバイルだけにとどまらないリアルとの連携や、普段はあまり思いつかないような施策の立案が可能になります。 複雑なデータが直感的に把握できる顧客の体験は、「目的」「行動」「タッチポイント」「思考・感情」など、さまざまな要素の集合として構成されています。これらのすべてを把握することは非常に困難ですが、カスタマージャーニーマップを活用することで全体を見渡せるシンプルな形に整理できます。 施策立案が考えやすくなるカスタマージャーニーマップは、顧客の体験の中でも特に「行動と媒体」
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？ まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無
» 情報アーキテクチャ(IA)の第一歩！Webサイトを分解して設計意図を考える | Webnoborder
Webサイトを分解して、Webサイトの設計意図を考えたことはありますか？ 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解Webサイトを分解して、Webサイトの設計意図を考えたことはありますか？ 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解」は、４つの内容で構成されています。 全体の調査であれば４つ全て実施しますが、UIの調査だければUIパーツの部分だけ使うときもあります。 ページ/Webサイトを分解する UIパーツ/ページを分解する 整理・分類された情報/UIパーツを分解する 素材/情報の集合体を分解する ページ/Webサイトを分解する Webサイト
「思いやりから始まるIA」：理解と共感のための情報アーキテクチャ | GREE Creators Blog
みなさま、はじめまして。 UXチームのSatoruです。 僕は、インフォメーションアーキテクト（以下、IA）として、「情報アーキテクチャ」という切り口からUXデザインプロジェクトに関わっています。 「情報アーキテクチャ」というと、「サイトストラクチャを作る」とか「ワイヤーフレームを作る」、「情報設計」など、ビジュアルデザインやUIデザインに関わる一連の設計タスクのイメージを持たれがちですが、それ以外にいろいろな部分で実践、活用が可能なスキルセットです。 今回は、UXデザインプロセスにおける情報アーキテクチャについてご紹介します。 情報アーキテクチャとは、「『情報をわかりやすく伝え』、『受け手が情報を探しやすくする』」ための表現技術で、「複雑なものを明解にする」ということに関わる一連のスキルセットです。 そのスキルセットを使いながら、「データの持っているパターンを整理し、複雑なものを明快にす
UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 - Sadakoa.jp-Blog-
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
デザインに空気を流して最終チェック。初心者にすすめるデザインのコツ その4 « ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
前回は第3章までご紹介しました。今回はデザインを最終的に完成に持って行くためのブラッシュアップに書こうと思います。 UIデザインをするための5つの工程 ロード第1章 スタディ ロード第2章 モックアップ ロード第3章 仮組デザイン ロード第4章 ブラッシュアップ ロード第5章 なんでもないようなことが幸せだったと思う 前回の仮組デザインがスムーズにいっていれば完成は間近です。ここからは最終的な「モノとモノの適切な距離感」を目で計りながら微調整を行います。この項は全体的に感覚的な話しが多いですがロジックで情報デザインを組み上げた後はノンバーバルでの良さを感じれるデザインを目指しましょう。 デザインに空気を流して全体チェック レイアウトしたオブジェクト（写真、文字、イラストなど）が適切な間隔で配置されているかの確認を行います。優秀なIAの書くワイヤーフレームなどであれば要素毎のマージンをピクセ
UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート！
10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした！ 今回は勉強会の中で特に参考になった点を書いていきます！ 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です！ 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン！ 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Webサイトのデザインで「かっこよく！」「インパクトを！」としか言わないWeb担当者よ、本来の目的に立ち返れ | 生田昌弘の「Web担当者に喝！」
カスタマージャーニーマップとは？ UX向上を達成する7つの事例と作成方法 | 実践！ プロも使うラピッドUX手法
ウェブやモバイルの次のプロジェクトの参考にしたい、わくわくするUI/UXデザインのまとめ | コリス
モバイルアプリのUIを処理系統でまとめた『UX Archive』 | 100SHIKI
