最後のセッションになります。
ホームページを見ると、パソコンの画面で見た時とスマホの画面で見た時、iPadの画面で見た時、デザインが異なっていると思います。これを「レスポンシブ対応」と言います。ユーザーが見る画面サイズに合わせて、ページのデザインを最適化されている状態のことです。
今回はスマホの画面で見た時のデザインを作っていきます。ほとんどのお仕事では先にパソコン画面のデザインを作って、お客様の合意が取れてから、スマホの画面のデザインを作っていきます。

スマホの画面以外にもホームページのデザインを完成させるためにはいくつかの要素があります。
・スマホのハンバーガーメニューの中
・ボタンなどのアニメーション
・ヘッダーの動き
・OGP画像
・ファビコン
鹿間の会社ではこちらを全て作成しています。

ハンバーガーメニューとは、サイト内の三本線（三本線以外のデザインもあります）のナビゲーションメニューで、クリックすると隠れている情報が表示される仕組みです。サイトをスマホやiPadで見た時に、右上によく見るメニューです。

デザインをするときは、ハンバーガーメニューを開いた時のデザインも合わせて作成します。全画面にメニューが出るデザインと右半分(左半分のデザインもあります)にメニューが出るデザインがあります。

ハンバーガーメニューを開いた時のデザインには必ず「×」ボタンがあり、メニューを閉じることができるような仕様になっています。

サイトを見ると、ヘッダーがスクロールしても常に上部についてくるサイトとそうでないサイトがあります。サイトのコンテンツの量が少ない場合はヘッダーの追従は必要ないですが、ある程度のコンテンツの量があったり、お問い合わせをより促したいサイトなどはヘッダーを追従させます。デザイナーが判断をして、（ディレクターが判断することもあります）追従させる場合はそのデザインも作ります。

作り方は今までと一緒で、参考サイトを見ながら良いと思うデザインを参考にしながら作成します。

ファビコンとは、Web画面のタブなどに小さく表示されるアイコンのことです。通常はその会社のロゴを設定します。正方形で作成すればサイズはどのサイズでもOKです。画像が荒くならないように少し大きめ（300px程度）で作成しています。