守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
ユーザーエクスペリエンスとは何か？【インタビュー】ホワイトハウスも注目のUXデザイナーJanice Fraser氏（前編） デザイン会社 ビートラックス: ブログ
世界中で講演を行い、ホワイトハウスでもプレゼンテーションを行ったという「UXの第一人者」Janice Fraser氏。 UXに特化する会社を立ち上げた彼女の経験・バックグラウンドや、彼女が語る「Lean UX」などに関しては同記事の後編に譲るとして、まずは彼女が定義する「UXとは何か？」ということや、よく混同されがちな「UIとUXの違い」、更には「国を超えるとUXに違いはあるのか？」「良いUXを測るための指標」について伺った。 ◆目次（前編）◆UXとは？混同されがちなUIとUXUXに国ごとの違いはあるか？良いUXかどうかを測る指標は？◆話者プロフィール◆ ゲストトーカー：Janice Fraser LUXr, Inc. CEO @clevergirl UXデザイナー、起業家。UXを重視したウェブサービスのデザインを手がけるAdaptive Path社の共同創業者、初代CEO。 15年に渡る
素敵なデザインからユニークな仕掛けまで、404ページのデザインショーケース 30 - NxWorld
デザインが素敵だったり見せ方が面白いなと思った**404ページ（エラーページ）**のデザインショーケースです。 このように一覧化しているとゲームができたりアニメーションが付いていたりといった遊び心あるサイトが目に止まりますが、エラーページに辿り着いてしまったユーザーに対してどのように目的のコンテンツへ誘導させているかなど、そういった面で参考になるものもあります。 404ページのデザインショーケースですが、意図的にエラーページにリンクを飛ばずのもどうかと思ったので各紹介サイトへのリンクはTOPページになっています。 PlatinumGames Inc. Official WebSite 404ページ内に8bitのミニゲームが表示され、実際にプレイすることもできます。 また、見た目だけでなくソースコードも工夫されており、ソース内にこのゲームの攻略情報が記載されています。
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
アフォーダンスからシグニファイアへ - A Successful Failure
2012年02月13日 アフォーダンスからシグニファイアへ Tweet D.A.ノーマンが『誰のためのデザイン? 』で紹介した概念、アフォーダンス(affordance)は、UIデザインにおける基本的な考え方として受け入れられてきた。UIに関する書籍を紐解けば、アフォーダンスに関する解説を見つけることができるだろう。率直に言ってアフォーダンスの考え方を知らないUI屋、デザイナーはもぐりと看做してよい。 デザイン界におけるアフォーダンス デザイン界においてアフォーダンスは、製品などのモノが、どのように扱われるべきか、どのような性質を持つものかが、ユーザに一目でわかるように付与された（主に）視覚的なサインの意味で使われる。わかり易い例を挙げると、アフォーダンスとは、踏んでは倒せないノコノコにトゲを付けるようなこと、と説明されている（下図）。トゲゾーはトゲという視覚的なサインによって、踏んではい
選ばれるウェブデザインとは
LVMH Watch & Jewelry PR&AD Manager/Assistant Manager/Specialist
http://blog.iaspectrum.net/2013/06/25/ux_honeycomb/
See related links to what you are looking for.
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
アクセシビリティから変わるビジュアルデザイン
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
話題のエロサイトから学ぶ、サインアップページのA/Bテストによる実践効果 - masturbate.jp はてなブログ支店
A/BテストがWebサービスを開発する上で非常に重要な手法であるということは、GoogleやFacebook、Twitterといった有名企業がこのような手法の効果を公開したことで我々一般人にも認識されてきました。 ですが、現在日本のサービスの実践結果はあまり共有されていません。競合サービスに情報を知られたくない、共有する意味がないなど様々な理由が考えられますが、これでは日本のWebサービスのレベルは上がらないでしょう。 そこで、我々masturbate.jpは惜しみなく実践結果を共有し、エロサイトだけでなく全てのWeb人達のスキルアップ・ノウハウの蓄積に貢献したいと考えております。 今回はmasturbate.jpのサインアップページで行ったA/Bテストを基に我々が学んだことを共有しましょう。 まず、masturbate.jpをご存知ないかたに説明すると、masturbate.jpはPin
目が不自由な人のネット利用に関する8つの迷信
2013年3月23日 アクセシビリティ 以前「Webアクセシビリティは、誰がどう必要としているのか？」という記事を書きましたが、最近Webアクセシビリティの記事を読む機会が増えています。その中で、Webページを音声で読み上げるスクリーンリーダー（音声リーダー）についての興味深い記事があったので翻訳してみます。誰もが聞いたことがあるような、アクセシビリティに関するものですが、いくつかは間違った情報として流れているものも多いようです。また、元記事のコメント欄も賑わっていたので、そこにコメントされていたものも抜粋して紹介します。 ↑私が10年以上利用している会計ソフト！ 私はフロントエンドデベロッパーとして、アクセシビリティについてはもちろん聞いた事があり、スクリーンリーダーで読みあげるのに何の問題もないWebコンテンツを作るよう、最善を尽くしてきました。しかし、多くのデベロッパーと同様、実際に
なぜEtsyでは無限スクロールは失敗したのか
「ユーザーがページに滞在してコンテンツに関わる時間が長くなる」といわれる無限スクロールを採用したものの、うまくいかなかったというEtsyでの事例から、その教訓を読み解きます。 U-Site編集部 2013年1月25日 HCD新人部員のTです。 1年以上前の記事ですが、「Pinterestによってもたらされた、6つの重要なWebデザインとユーザビリティにおけるトレンド」という下記の記事を読んでいました。 該当記事：6 Important Web Design and Usability Trends Sparked By Pinterest – The Daily Egg ここで挙げられている項目の3つ目のトレンド、”Deliver Content in Flow”を見てみますと、「無限スクロールによって、ユーザーがページに滞在してコンテンツに関わる時間が長くなる」と書かれています。 Bec
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
■公開資料
2010年9月15～18日にドイツのDagstulで行われたUXセミナーの成果をまとめたものです。 様々な解釈で語られていたUXについて、共通の認識を形成すべく、専門家(研究者、実務家)30名が「UXの概念」について議論しました。 その成果は、2011年2月に「ALL ABOUT UX」というサイトで公開されました。 原文の公開場所はこちら(https://experienceresearchsociety.org/wp-content/uploads/2023/01/UX-WhitePaper.pdf)です。（2023年2月修正） UX白書の日本語訳は、hcdvalue有志が日本語訳・校正したものです。 本ページは、そのUX白書を人間中心設計推進機構の校閲を経て、日本語公式訳として公開するものです。
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS7でAppleが目指したのは「UIデザインの常識」の再発明である
in the looop | Looops communications