タッチUXを実現する7つのポイント
タッチUXを実現する7つのポイント ここまでタッチデバイス全般におけるタッチUIの特徴とその癖について説明してきました。それを踏まえて、実際にHTML5でタッチUXを実現する際に気を付けるべき7つのポイントを述べていきます。 1．ボタンは大きく 指でタッチすることを考慮すると、ボタンは大きくすべきです。小さ過ぎて押しにくいボタンは使いにくいだけでなく、ユーザーをイライラさせUXを大幅に損ねます。また、現在主流の静電容量方式のタッチスクリーンでは、（恐らく）誤動作対策のため、あまり小さいタッチ点は認識しません。 どれくらいのサイズが望ましいのでしょうか。その答えは、AppleとGoogleからそれぞれiOS、Android向けに出しているガイドラインにあります。 iOS human interface Guidelines Android Design どちらも素晴らしいドキュメントで、デザ
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
node-webkit でアプリを習作してみた話 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） node-webkit というのは、HTML+CSS+JSでデスクトップアプリケーションが作れるランタイムです。 故あってこれでアプリを作ろうという企画がありましたので、 学習の為に簡単な物を作ってみました。 つくってみたもの Imaguria https://github.com/mach3/imaguria 画像を Data URI に変換する node-webkit 製の単機能アプリケーション。 画像をアプリケーション画面にドロップするか、 コピーした画像をアプリケーション画面にペーストすると、 Data URI が表示されます。 Windows版とMac版をご用意しました。 あまり使い道が思いつきませんが、せっかく作ったのでもしよろしければ。 この内容ならWebアプリケーションで十分用を足せるので あまり良い題材とは言え
タッチUXを実現する7つのポイント
思ったより指はじっとしていない。タッチUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する。 普及してきたタッチデバイス 現在、スマートフォンやタブレット端末がすさまじい勢いで普及してきています。iPhone/iPadは新製品が出るたびに販売記録を塗り替え、Androidのスマートフォンやタブレットも各社からさまざまな端末が発売されています。今秋にはMicrosoftからWindows 8/RTも発売され、いよいよタブレットが本格的な普及期に入ります。 これらはすべてタッチUIで操作する、ということがこれまでのPCと大きく異なります。 直感的で分かりやすいタッチUIはあっという間に市場に受け入れられました。ユーザーは新しい体験を期待と興奮で歓迎しました。今やスライドしてページスクロールは当たり前で、スワイプでページをめくることに迷う人はいません。 同時に、そのような端末で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5ハイブリッド アプリ開発実践編
