【Webデザイン】「カード」、「フォーム」、「タブ」、「ハンバーガーメニュー」について

カードとは？

画像、テキスト、アイコン、ボタンなどの要素をまとめられます。

メリット

カードごとに折り返して表示することができるのでレスポンシブと相性が良いので最近とてもよく使われています。

デザイン

テキスト

サイズ、太さ、色などで優先度を付けます。

実装

影や角を取るデザインであれば「overflow-hidden」もセットで使ったりします。

注意点

画像は伸ばしすぎると、見づらくなってしまうのでPCやタブレットでは、ある程度のサイズの上限を指定しておくと良いです。

フォーム

指で押しやすいようにpy-2、mb-8以上は欲しい。

入力時(focus)やボタンクリック時などには、outlineは切っておきたい。（デフォルトで青の枠線がつきます。）

タブ

ハンバーガーメニューと比べてどうか。

常に見えている状態になりタップの手間もいらないので、非常にUI的には良いです。ただ、デメリットとしては、スマホの幅の都合上置けるリンクの数が限られてる点になります。なので、基本使用頻度が低いものはハンバーガーメニューへ、使用頻度が高いものはタブへという感じで使い分けると良いでしょう。

タブの配置

下タブ

スマホにおいて指を伸ばさなくてもタップできるので使いやすい。アプリ（LINE、youtubeなど）においては完全に下タブ中心の文化になっています。Webではまだそこまでブームというほどではないですが、今後デザインを考えるときに基本下タブをメインとしてまず検討していくと良いでしょう。

上タブ

スマホにおいて指を伸ばさなくてもタップできるので使いづらい。

文字を書くか

文字が書いてない方がデザイン性は高いですが、文字が書いてある方がタップ率は高くなります。なので基本的には文字は書くようにしましょう。

例外

例えば、Twitterのように圧倒的に普及しているアプリなどでみんな使い方がわかるような場合などは文字を書かなくても良いです。新規でまだあまり普及していないアプリなどは最初は文字を書いておくのが無難でしょう。

横スクロールさせるか

普通の固定ヘッダーに比べてスクロールさせれる分いろんなものがおけます。ただし、実装難易度が高いので注意（osやブラウザのバージョンによって動かない場合がある。）

ハンバーガーメニューとは？

スマホ対応で数年前からよく見かけるデザインです。メインだけ残してサイドバーは隠してクリックした際にニュルっと出てくるようにします。

ユースケース

基本的には、サイトにおいて使用頻度があまり高くないであろうコンテンツを隠すという目的で使うのが良いです。理由は後述します。

メリット

タブに比べてスマホの場合はリンクを多くおける。

PCサイトなら良いのですが、スマホサイトの場合は横幅をあまり使えません。なので縦に展開できてリンクを多く置けるというのはメリットになります。

タブに比べて画面サイズを最大限に使える。

タブだと常に表示されているので、その分画面幅を消費することになり、画面のダイナミックさが損なわれたりします。

デメリット

スマホだとタッチしにくい。

指が上の方まで届かないケースもあったりする。

中を見るまで何があるのかわからない。

人間は基本ぱっと見不明なものは触らない行動原則がある。おそらく、ハンバーガーメニューを触る人自体は少ない前提で設計されている。（つまり使用頻度が少ないコンテンツを格納するのに向いていると言える。）

タップ数が増える。

この理由はそのままですね。

開閉速度

基本的には、0.3秒を超えるとユーザーがストレスを感じるようになります。

オープンの時

0.25秒以内が良いとされています。

クローズの時

0.2秒以内が良いとされています。

デザイン時に考えること

基本、ABテストなどをすることでどちらが人気かは調査するようにすると良いでしょう。

ハンバーガーを右に配置するか、左に配置するか

スマホは右で操作する人が多いので右に配置するというのも一つの方法です。統計的には右の方が多いみたいです。(Googleは左ですが。）

✖️ボタンの位置

黒い部分の下の方に配置するか、上の方に配置するかなどデザインによっていろいろな選択肢があります。