レッスンお疲れさまでした。
本日は、レスポンシブデザインに関してとワイヤーフレーム作成を行いました。
【レスポンシブデザイン】
パソコンで見ても、スマホで見ても見やすいデザインをレスポンシブデザインといいます。
パソコン用とスマホ用にそれぞれ別々に作るのではなく、ひとつのHTML/CSSで画面サイズに合わせてレイアウトを変化させます。
例えば、パソコンのように大きな画面では、写真を横に3つ並べます。
スマホでは画面の横幅が狭いので、写真を横に3つ並べてしまうと、ひとつひとつの写真が小さくなってしまうので、横に並んでいた写真を縦に並べ変えます。
このように、画面サイズに合わせて最適なレイアウトとなるようデザインします。
【シングルページ】
最近の傾向として、シングルページ（1ページ）のデザインも増えてきています。
スマホの普及に伴い、ひとつひとつの項目を別ページにするのではなく、フリックでスクロールしながら全体を見られるよう、1ページを縦に長く使います。
1ページで概要を伝え、さらに詳しく内容を知りたい人のために、別ページで詳細ページを用意したりもします。
【ワイヤーフレーム】
まずは手書きでワイヤーフレーム（設計図）を書きます。
レスポンシブデザインを前提とするのであれば、12カラムを基本にデザインしていきます。