中学生のためのレスポンシブWebデザイン

第23回「Dreamweaverでマガジンレイアウトに挑戦しよう! まずは言葉の確認だ、「整理」「整頓」「整列」の違いってわかる?」



第23回の授業(テキストキャスティング)を開始します!
新カリキュラムの第1回になります!


さぁ、それではスタートするよ!

今回は、「講座ビデオ版・Dreamweaver CC 2015 によるレスポンシブWebデザイン」で習得した知識、技能の応用です。

すでに学習した操作は省略していくので、わからなくなったら、講座ビデオでその都度、復習してね。


[01]
まず、Webページのレイアウトについて学んでいきましょう。
レイアウトって言葉、私たちの日常生活でもよく聞きますよね。

部屋に置かれている家具
机の上の文房具
食事のとき、テーブルに並ぶ料理

これ、ぜんぶ「レイアウト」なんだ。

自分の机の上を見てごらん。
いろいろな物が置かれていると思うけど、本もノートも筆記用具も、勉強しやすいように置く場所を決めているよね。

台所にも行ってみてよ。
お母さんが、料理しやすいように、包丁やまな板、調味料などを「レイアウト」しているから。

つまり、レイアウトって、誰でもやってることなんだよ。




[02]
レイアウトに関する3つの言葉について、確認していくよ。

よく「整理・整頓(せいり・せいとん)」って言うじゃない。
どういう意味かわかりますか?

お母さんに、「部屋、散らかってるわね、整理しなさい」なんて言われたことない?

「整理」というのは、必要なもの、必要ないものを分けることなんだ。
いらないものをゴミ箱に捨てて、掃除するあたりまで。




[03]
「整頓」は、「整理」を終えた後に、どこに何があるのか分かるように置き場所を考えたり、必要なものをすぐに取り出せるように工夫することなんです。

ちょっと難しい言い方をすると、「機能性を高めて配置すること」が「整頓」

この2つの作業は連続しているから、まとめて「整理整頓」って言うよね。 





[04]
この「整頓」のテクニックで、みんなも日常生活でよく使っているのが「整列(せいれつ)」です。

「整列」ってわかる?

机の上とか、本棚に、本をきれいに並べていくでしょ。

あと、フィギュアを集めている人ならわかると思うけど、きれいに並べるだけじゃなくて、自分の好きなフィギュアを目立たせるために、真ん中に置いたりするでしょう?

整列には、右揃え、左揃え、中央揃えがあるんです。
もっと言えば、上揃え、下揃えもある。

みんなは、それを無意識にやってるんだ。




[05]
これからつくるWebページは、マガジンだから「レイアウト」がとても重要になります。

でも、いま説明したとおり、レイアウトって誰でもやっていることだから、デザイン分野だけのことじゃないんだ。

基本は、「整理」「整頓」で、代表的なテクニックに「整列」がある。

このことを意識して作業できるかどうか、がプロと、そうでない人のとの違いかな。




[06]
それじゃ、Dreamweaverを使って、整理・整頓、整列について学んでいきましょう。
Dreamweaverを起動してください!

マガジンレイアウト、やっていくよ!



それでは、第24回(新カリキュラムの第2回)の投稿をお待ちください。



今回のテキストキャスティングは、こちらの講座ビデオの追加コンテンツです。

テキストキャストの課題データやサンプルデータは、専用ページからダウンロードすることができるようになります。

購入方法:Creative Edge School Booksのストア( http://design-zero.tv/ia/dw1/
形式:ビデオ(学習パートごとに分割されています)
総再生時間:1時間40分
発売期間:27日(土曜日)、28日(日曜日)※月曜の朝7時まで
価格:1,500円
※シンクゼロマガジン(旧・全記録)の読者ページでは常時アクセスできます。



前回(第22回)までは、以下のページにまとめてあります。

中学生のためのレスポンシブWebデザイン
Dreamweaverライブビュー編



シンクゼロマガジンとは?

筆者:
Creative Edge School Books