作る側の都合でUI/UXを悪くしないための注意点まとめ
作る側の都合でUI/UXを悪くしないための注意点まとめ：スマホ向けサイト制作で泣かないための秘伝ノウハウ（終）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。最終回は、サイトに載せるべきコンテンツはどんなものが良いのか、2つのコンテンツ例レスポンシブWebデザインとユーザー体験の関係、技術／デザイン面で気を付けることなどを紹介します。 スマートフォン向けWebサイト構築の注意点総括 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「いまさら聞けないCSS3入門＆スマホ対応6つの問題点」では、スマートフォン向けWebサイト上でのCSS実装上の注意点と、機種依存事例を紹介しました。 今回は、K
PCサイトをスマホで表示する場合の問題点
このようにスマートフォンは、パソコンなどと比べてかなり画面サイズが小さいため、パソコンで見たときと同じ大きさでPCサイトを表示することはできません。 PCサイトをスマートフォンで見た場合、スマートフォンのブラウザが自動的にスマートフォンの画面に合わせて、PCサイトを縮小して表示します。 小さい画面サイズに合わせて表示されるわけですから、当然、文字も写真もすべて小さくなります。 PCサイトをそのまま縮小するだけでは不十分。スマホ用に最適化されたサイトを作るなら 文字が小さい 小さい画面サイズに合わせて縮小表示されたPCサイトは、当然ながら、文字も小さくなります。 最近のスマホは高解像度なため、それだけ縮小しても文字がしっかり判別できるのはすごいところですが、とはいえ、とてもそのままで読み続けられるような大きさではありません。 そのため、ユーザーは表示を拡大（ズーム）して読むことになります。
MdN Design｜総合情報サイト
スマートフォン 12 スマートフォンで使えるCSS3デザインパーツ CSS3を使うと画像を使わずにグラフィカルな表現が可能になる。スマートフォンはモダンブラウザを搭載しているので、PCサイトと違って積極的に利用できる技術だ。ここではCSS3を利用したボタンなどのデザインパーツの作り方を紹介しよう。 解説／小林鈴奈（07design） BROWSER iOS Andoroid 01 CSS3のグラデーションやボックスシャドウを組み合わせて使えば、画像を使わずに精巧なデザインのボタンを作ることができる。特にCSSだけで光沢を表現できるのは使い勝手がよい。 【1-1】の立体的なボタンは、ボックスの外側と内側に4種類のボックスシャドウを設定し、円形グラデーションと組み合わせて光沢を表現している。内側のボックスシャドウを白に設定してハイライトを入れているのがポイントだ。テキストにも白のシャドウを下側
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
MdN Design｜総合情報サイト
スマートフォン向けのサイトを構築する上で検討しなくてはならないのがHTML5＋CSS3である。 HTML5に関してはこれからのPC向けWebサイトの構築においても必須となる技術であり、PC、スマートフォンともにここ数年間、一番のトレンド技術になることは間違いないだろう。ここではHTML5＋CSS3でどのようなことがスマートフォンでできるか、どのような問題があるかを見ていこう。 スマートフォンのデザインを考える際に重要となるのは、画面サイズである。一般的に480×320pixel ～960×640pixelだが、実際の寸法としては80mm×50mm弱程度しかない。 つまり、非常に小さい画面の中にWebデザインを構築しなければならないため、おのずとPC向けのデザインでは通用しなくなるのが理解できるだろう。 最近では多くのニュースサイトがスマートフォンに対応している。PCサイトのレイアウトではマ
スマホ向けサイトのユーザビリティとランキングを低下させる12個のマイナス要因
[対象: 中〜上級] さまざまなモバイル向けサイトの研究中に出くわした、ユーザビリティを大きく損ねる12個の要素をE-consultancyがブログで解説しました。 ユーザビリティの悪化だけではなく、なかにはGoogleのランキングを下げる原因にも繋がるスマートフォンサイトの構成ミスも含まれています。 モバイル対応が必須になっている現在のサイト運営において、とても参考になる記事なので紹介します。 なお直訳ではなく、僕なりの言葉で要点を説明します。 英語がわかる方は原文も読んでください。 モバイルサイトのユーザビリティを損ねる12個の欠陥 1. 突然デスクトップ向けサイトに切り替わる モバイル向けのページを閲覧していたのに、デスクトップ向けページに突然移動させられてしまうサイトは確かにありますね。 モバイル向けのデザインだったのに、ページを移動したら何の前触れもなくPC向けのデザインに切り替
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
MdN Design｜総合情報サイト
スマートフォン 11 スマートフォンサイトのーザビリティのポイント スマートフォンサイトは指によるタッチで操作するため、ユーザービリティの指針もPCサイトとは異なる点が多い。スマートフォンサイト独特のデザインのポイントを紹介していこう。 解説／小林鈴奈（07design） BROWSER iOS Andoroid ナビゲーションのユーザビリティ PCサイトと違い、スマートフォンはスクリーン上をタップすることで動作する。そのため、すべてのナビゲーションはリンクであることを明確にしたデザインでなくてはならない【01】。 視覚的にタッチ可能に見せるには、ナビゲーションのデザインを立体的にしたり、リスト状にしたり、矢印を加えたりするとよいだろう。 また、タッチ領域が小さいと指での操作が困難になる。目安として（iPhone3GSまでの解像度で）44px以上のスペースを設けよう【02】。 これは、Ap
サイトのスマートフォン対応時に考えるべきこと (ユーザビリティ実践メモ)
スマートフォンでのインターネット利用はこの2年程で急速に進んでいて、この流れは今後もさらに加速していくと考えられています。 こうした急速な動きを見て、自社サイトのスマートフォン対応を考えている企業の方も多いのではないでしょうか。 スマートフォンというデバイスの特徴、スマートフォンを利用するユーザの状況・文脈、取り扱っている商品やサービスがどんな特性なのかを考慮し、サイトにどのような役割を持たせるのかを考えた上で制作していくことを推奨します。 上記のような考え方が重要であることを示唆する、データから見えてきた面白い事例をご紹介します。 とある銀行の金融商品別にスマートフォン利用比率を調査したところ、無目的ローン（カードローンなど）の閲覧数は住宅ローンの閲覧数のなんと3倍以上という結果が得られました。 住宅ローンと無目的ローンではどのような違いがあるのでしょうか。 担保付の住宅ローンなどはユー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タワーレコード＆HMVのスマートフォンユーザビリティ比較 北條の勝手にスマホ診察 （UI・UX）研究 | アルコブログ