スマートフォンサイトの開閉するメニューとアクセシビリティ
今週はスマートフォンサイトの実装を行いました。その中で、スマートフォンサイトではよく見られる、ボタンを押すとメニューが開閉する仕組みの実装がありました。実装後にiOSのVoiceOverを利用して動作を確かめたのですが、他のサイトを見ると上手く開閉することが出来ないメニューボタンがいくつか見つかりました。どのような問題が見られたか等をまとめてみたいと思います。 上手く開閉できないボタンの例 いずれもVoiceOverをオンにして操作した場合の問題です。VoiceOverがオフの場合は、問題なく操作できました。 なお、会社名・サイト名を上げていますが、上手く動作しなかったことを伝えたいだけで、他意はありませんので念のため。 1. JavaScriptの不具合？ ※追記（2014年12月15日）：再度確認したところ、問題なく動作するようでした。 味の素様のウェブサイトにあるメニューの開閉ボタン
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
モバイルデバイスにおける地図と所在地検索
店舗の地図はシンプルなリスト表示より見た目は魅力的かもしれない。しかし、それによってモバイルデバイスで生じるユーザビリティ上の課題はあまりに多い。 Maps and Location Finders on Mobile Devices by Aurora Bedford on January 19, 2014 日本語版2014年2月17日公開 所在地を見つけて行き方を知るというのは、ユーザーがスマートフォンで最もよく行うタスクの1つである。モバイルのWebサイトやアプリを利用して、ユーザーがどれだけ素早く容易にあなた方の所在地を見つけられるかはあなた方のビジネスの成功に大きな影響を与えかねない。所在地を見つけるのが大変だと、モバイルユーザーがライバル企業のほうを向いてしまい、二度と戻ってこなくなってしまう可能性もあるからである。その上、たとえユーザーがあなた方の所在地をがんばって見つけてく
What Is Web Hosting And How Does It Work? [2024]
What’s up, Internet!? Today we’re going to be answering the question of what is web hosting and going over a little bit about how it works. As always, we have a video guide for this available on our YouTube Channel and below: We’ll let you know about some great places to sign up for web hosting in case you’re looking to start a website for your blog, portfolio, business, or whatever else you’re dr
![What Is Web Hosting And How Does It Work? [2024]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec79cc862ce41e7c99d22641baa7d2b5c7432a56/height=288;version=1;width=512/https%3A%2F%2Fe8y8n8b5.rocketcdn.me%2Fwp-content%2Fuploads%2F2018%2F06%2Fwhat-is-web-hosting-how-does-web-hosting-work.jpg)
Meta viewport
Back to the index. Last major update on 13 April 2014. The meta viewport was originally invented by Apple for the iPhone. Since web developers started to use it a lot, other mobile browsers also implemented it, including the parts that don’t make sense. Meanwhile W3C has reverse-engineered a specification. Although I’d love to study it more and compare it to my findings, I’m afraid it’s so densely
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
スマートフォン向け検索でのランキングの変更について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
MobileDetect, PHP mobile detection class
🤝 Supporting If you are using Mobile Detect open-source package in your production apps, in presentation demos, hobby projects, school projects or so, you can sponsor my work by donating a small amount 👍. I'm currently paying for hosting and spend a lot of my family time to maintain the project and planning the future releases. I would highly appreciate any money donations. Special thanks to: th
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
Kindle Fire HD： 初代Kindle Fireよりずっと優秀
Amazonの新型Kindle Fireのユーザビリティは昨年のモデルよりずっと優れている。また、9インチ版より7インチ版のほうが良い。 Kindle Fire HD: Much Better Than Original Kindle Fire by Jakob Nielsen on December 19, 2012 日本語版2013年1月17日公開 昨年、我々はAmazon.comの第1世代Kindle Fireのユーザビリティをテストした。あれは酷かった。製品はホリデーショッピングのシーズンに間に合うよう、準備不足で発売されたのが明らかだった。 Amazonは今度は製品を改善するのに1年をかけて、先日、Kindle Fire HDという名前で最新版を発売した。それには7インチと9インチの2種類のフォームファクタがある。 私は両方のサイズを購入した。で、バージョン2.0についての私の結
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
愛宕山太郎坊/Staff
愛宕山太郎坊 アニメーション制作進行支援ソフト 愛宕山太郎坊 ログイン 会社id ユーザー名 パスワード ユーザー名またはパスワードが正しくありません。 閉じる ログイン
Vexing Viewports
This agreement has never been more important. That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple. You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768×1024
ASSIOMA(アショーマ) » LTEとかWiMAXとか4GとかAXGPとかって何が違うの?進化の過程を解説
通信業界ではLTE元年と呼ばれた2012年があと少しで終わろうとしているが、気が付けばニュースやCMなどではLTE、WiMAXといった言葉が飛び交い、店の看板には「WiFi使えます」というシールが貼られている。今回は、「さちテク」によるこれらの乱立する無線技術がどのような経緯で進化してきたのかを解説頂いた。 ——- ニュースやCMで飛び交う謎の言葉 LTE、AXGP、4G、WiMAX…… これらは、今世の中に出てきた携帯電話の最先端かつ最新鋭技術を表す言葉です。 でもこれらの言葉が気になって、調べてみようとしても、なんだか難しいことばかりでてきます。 お店に聞くと「速いんです！」「新しいんです！」「すごいんです！」「でも月7GBまでで、あっ、でも超過した場合は買い足していただければ」などと余計わけがわからなくなります。 かと言って詳しい人に聞くと、「LTEは下りにOFDMAを採用した第4世
「レスポンシブWebデザインのこれから」の極私的フォローアップ
2012年12月14日 著 先日、仙台オフィス開設記念セミナー レスポンシブWebデザインのこれからというセミナーでお話させていただいたのですけど、そこで話したこと、話し忘れたこと含め、レスポンシブWebデザイン（以下「RWD」）に関連して最近思うところをまとめておくなど： モバイルファーストといっても、いまだデスクトップ環境からのアクセスが8割、9割というサイトは少なくない。なので、いつの時点でどこまでパワーをかけてモバイル/マルチデバイス対応すべきかは、しっかりアクセスログ解析結果を踏まえるべき。 最適化（≒専用化）と汎用化は、まったく方向性の異なるアプローチであり、RWDはやっぱり後者であると思う。RWDを最適化と称する向きはいまだに散見するけれども、何に対し、どういう尺度で最適と表現しているのかは補記すべき。 スマートフォンやタブレット型デバイスの隆盛で明確になったのは、「Webサ
Media features of the most common devices
I've set up a test page to find out the media features values of a device. Since then, I've been doing some testing with various devices. Here are the results of my investigations. You will find values for number of mobile devices / browsers after the break. Along with the regular Android browser you can find Opera, Firefox and Chrome on the Android ecosystem. You can also find the Android SDK whi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
notes from côme
マルチスクリーン対応と最近のアプリの傾向
