ポートフォーリオ制作（スマホ用デザイン4）

こんにちは。コンスキです。

今回は、スマホ用のハンバーガーメニューを開いた時の見た目を決めていこうと思います。

タブレット用のデザインとほとんど同じにするけど

タブレットとスマホでも、ハンバーガーメニューを開いた時の見た目はほとんど変わらないことが多いと思います。

「ほとんどは変わらない」ということは、少しは変わるところがあります。

その変わるところとは、繰り返しになってしまいますが、要素の大きさと画面幅の比率です。

しかし、レスポンシブデザインにおいて厳格にこういうデザインにしなければならない、という決まりはないと思うので、ハンバーガーメニューの見た目を、タブレットとスマホで全然違くするのもありだと思います。

今回は、使いやすさを重視して要素の大きさと画面幅の比率を変えるだけにしようと思います。

そして、作ったデザインがこちらです。

タブレット用のデザインとの違いがわかりやすいように、同じ画面サイズだった場合どのように表示されるのかを横に並べて比べてみました。

なぜ画面はばに対する要素の比率を上げる必要があるのか説明します。

まず、上のように同じ画面サイズにすると気がつくことがありませんか。

もしタブレットに表示する画面幅と要素の大きさの比率を変えずにスマホでも表示してしまうと、要素が非常に小さく見えてしまうことがわかります。

このような理由から、画面の大きさがタブレットに比べて小さいスマホでは、画面幅に対する要素の大きさの比率を大きめにして、見やすくしたりタップしやすくする必要があります。

ここまででハンバーガーメニューを開いた時のデザインを含めた全てのスマホ用のデザインを作成することができました。

そこで、パソコン・タブレット・スマホ用のデザインを全部比べてみようと思います。

横に並べているのでデザインの細部は見えなくなってしまっていますが、全体的にどんな違いがあるのかを見ていただけたら幸いです。

今回でデザインのようなことは全て完了しました。

パソコン用のデザインのコーディングはすでに終わっていますが、タブレット用とスマホ用のデザインは、CSS のメディアクエリというものを書く必要があります。

メディアクエリは、基本的にスタイルを塗り替えるものだそうです。

そのため、タブレット用のデザインとスマホ用のデザインのCSSをいち書く必要はありません。

しかし、反対にどのスタイルをどのように書き換えなければいけないのかを考える必要があります。

今回までに作成したタブレット用のデザインを参考にして、次回はタブレットのメディアクエリを書いていこうと思っています。