Webデザイン入門編3: UI/UXの基礎

デスクトップで扱うウェブサイトやアプリケーションと違って、モバイル端末は、表示スペースに限りがあるということを意識しないといけません。
また、スマホなどは電車の中や隙間時間などの使う環境、片手で使ったりタップやスワイプなどの操作方法を意識する必要があります。

[ハンバーガーメニュー]
タップすると、上や左などから縦長にリスト化されたメニューが出てくる、というスタイルです。

[カルーセル]
複数の商品や、バナーなどを固定したスペースでスライドしながら表示するものです。
メインビジュアルや、オンラインショップの商品、広告バナーなどにも使われます。

[DrawerMenu(ドロワーメニュー)]
上下左右の端から内側へ指を移動することで表示することができるのがドロワーメニューです。
タップではなくスワイプのように、指を外から移動させるというモバイル端末ならではの操作方法が 実現できるUIです。

スマホを操作する指は基本的に、片手で操作することが多いので、親指を使う人が多いと思います。そのため、左手または右手の親指で押しやすい位置が、良いUIの位置となります。

ボタンのサイズは、左からでも右からでも押せるというメリットがあるため、特にスマホのボタンは横長にした方が良いです。
タップできる要素の配置位置ですが、特にモバイルでは、リンクなどタップできるものは近づけないことが大事です。

左右の端は手で隠れる可能性が高いため、ページの左右に余白をとりましょう。 10pxから20pxぐらいが良いとされています。