HTML5 × CSS3 で作るUI要素について考えてみた【webデザイン】

久しぶりに記事を書くので少しこった記事を書いてみます。

スマートフォンやタブレットが台頭してきた今日。
GUIというものは進化をとげ「指」を主なインターフェイスとするに至りました。
タッチパネルをここまで成長させたのはAppleといっても過言ではないでしょう。
iPhoneという製品は瞬く間に業界の常識を一段階上へとシフトさせました。
直感的な操作ができるタッチパネルというものは今後も普及し続けるはずです。
windows8でもタッチパネル操作できる端末は増加しています。
私たちweb開発者は今までマウスとキーボードを使用したwebデザインを主に考えてきましたが、
タッチパネルということを考えると違った考え方をしなければなりません。
今日はタッチパネルの特徴とマウスとの操作性の違いをk舞えた上でHTML5 ×CSS3で作るUXデザインについて考えてみます。

タッチパネルとマウスの違いについて考えてみる。

タッチパネルを操作するインターフェイスは指です。
このことからもタッチパネルとマウスの違いというのはポインターの大きさということが簡単に想像できます。
AppleのiOSUIガイドラインにはタップ可能なUI要素の最小サイズは44px×44pxと書いてあります。https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

指はマウスに比べて当然面積が広いですから、細かい操作は苦手です。
タッチパネルで綿密な作業をする時にはスタイラスペンを使用するために
イヤホンジャックにアクセサリーとして突き刺している人も多々見かけますね。
リンクやボタンなどユーザーが操作する要素はなるべく大きく作りましょうというのが
最も基本的な考え方だと思います。

では、第二の違い。
ジェスチャー。マウスでもwindowsだとかざぐるマウスなんてとっても便利ですよね。
僕も重宝していました。
タッチイベントを多用しているサイトってあまり見たことないんですが、
jsですでにタッチイベントを取得するライブラリが結構出ています。

http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries

タッチイベントとサイトへのリンクがまとめられていますのでご活用を!

11のタッチイベント
■ Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, Drag

しかし、webアプリ・webサイトで使用するにはいささか難しいですね。
絶対ユーザーが迷う気がします。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です