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


第1回「新しいMuseって、ウェブページのカンプ作成で使う「Photoshop」と「Dreamweaverのライブビュー」が合体したイメージなんだ! 」



本日から「中学生のためのレスポンシブWebデザイン」のMuse編、スタートです!

すでに、Dreamweaver編( http://design-zero.tv/Dreamweaver/index.html#textcast )の授業は20回目、レスポンシブWebデザインの基本ページづくりまで進んでいます。



本当は、Museの方が先で、上級編としてDreamweaverの学習がスタートするはずだったのですが、逆転してしまいました。新しいMuseがまだ出ていないんです。


Museから学ぶ人も多いと思うので、初心者向けの内容ですが、Museのオンライン講座はすでに公開されていて、そこで十分学べるようになっていますので、この授業では、レスポンシブWebデザインのページ作成に限定します。

テキストキャスティングで、基本操作から始めちゃうと、50回くらいの授業になってしまうんだ。
基本操作は、Museアカデミーのオンライン講座でじっくり学んでください。


Museアカデミー
Adobe Muse CC 2015の基礎を習得できるオンライン講座があります。




新しいMuseがまだ出ていませんので、Dreamweaverとの同時解説という初の試みで、授業を進めていきます。
高校生の皆さんは、先生の指示にしたがって、Adobe Muse CC 2015の体験版をインストールしてね。



第1回の授業(テキストキャスティング)を開始します!




[01]
Museは、HTMLやCSSを記述せずに、ウェブページを作成できるツールです。

Dreamweaverでも、ライブビューを使えば、HTMLやCSSを記述せずにページを作成できますが、CSSのプロパティを知らないと、指定することができないよね。
つまり、HTMLのCSSの知識は必要。

Museは、その知識さえ必要ないんだ。

というより、HTMLやCSSは一切、見れないし、編集もできない。
「いいから! 俺にまかせろ!」という感じで、触らせてくれないんだ。
ぜんぶ、Museがやってくれるんです。

ちょっと試してみますよ。
こんな感じで、タイトルを配置してみます。





[02]
ウェブブラウザーで表示してみるよ。
Muse上と同じウェブページになっているでしょう。






[03]
HTMLを覗いてみます。
どうです?
当然だけど、ちゃんと記述されていますよね。

私たちが、マウスドラッグでテキストや画像を配置していくと、MuseがHTMLやCSS、スクリプトなどをガシガシ書いてくれるんです。





[04]
ここから、カリキュラムについて説明したいんだけど、その前に、ちょっとややこしい話をするよ。

Museを開発しているAdobe(アドビ)が、10月に「Adobe MAX」という大きなイベントを開催したんだけど、そこで新しいMuseが紹介されたんだ。



新しいMuseは、Dreamweaverの授業で学んだ「レスポンシブWebデザイン」のページをマウスドラッグだけで作成できるんです。すごいでしょ!






[05]
現在のMuseは、パソコン用、スマートフォン用って、作り分けないといけないんだ。

もうすぐ、新しいMuseが出るのに、レスポンシブWebデザインに対応していないMuseを覚えるって、なんかヤル気が起きないよね。

でも、新しいMuseはまだないから、Dreamweaverを使って、先に「レスポンシブWebデザイン」の基礎を完全理解しておこう、というのが授業の目的なんです。

Dreamweaverの習得が目的じゃないから、Muse初心者の人も安心してね。
あくまでも、Museでつくる「レスポンシブWebデザイン」のページが対象です。





[06]
この図を見てください。
ウェブサイトの種類なんだけど、DreamweaverとMuseのアイコンが付いているでしょう。

左端は、1ページだけの「シングルページ」で次が「シングルロングページ」。長い巻物みたいなページね。

中央の上が、ページの少ない「軽量サイト」、下が階層構造をもつ「一般的なサイト」。そして、右側が数百ページの大規模なサイトです。

Musuは、シングルページとか、軽量サイトに適しているんだ。





[07]
Museは、ウェブが仕事ではない人たち向けのツールって話したよね。

例えば、企業のパンフレットとか、セミナーで配布するチラシなどを作成しているデザイン会社に、「セミナー告知用のウェブページも公開したい、作れるなら頼みたいんだけど」なんて依頼が増えてるんだ。

理由は簡単で、社内では作成できないけど、1ページのサイトをわざわざウェブ制作会社に頼めないから。

これは、ウェブ活用に積極的な企業が増えていることが影響してるんだけど、いつも販促物をつくってもらっている会社に、ウェブページも頼めたら楽じゃないですか。

特に、1ページもの、つまりシングルページの仕事がすごく多いんですよ。
Museは、この領域に最適なツールなんだ。

あと、広報の人がMuseを覚えてお客さん向けの宣伝ページをつくっていたり、アーティストの人がブログや通常の個人サイトとは別に、個展用の独創的なシングルページをつくったり、いろいろ。





[08]
この授業でまず、学習しておきたいのが、レスポンシブWebデザインを意識したプロトタイピング。

ちょっと難しい言葉だけど、プロトタイプって「試作品」のことで、本番のページに近いものをつくって、意見を聞いたり、実際に触って、テストするんだ。

このMuseの画面を見て。
下に、パソコンのようなワイドスクリーン用、小型のパソコンやタブレット用、スマートフォン用のページが表示されているでしょう。

これがプロトタイプなんだ。





[09]
Webデザインの制作現場では、この工程で「Photoshop(フォトショップ)」というツールが使われているんだけど、まったく同じことをMuse上でやるんですよ。

右側にあるのが「レイヤー」っていうパネルで、絵をどんどん重ねていくことができる。

このレイヤーで設計したプロトタイプを本番ページにドラッグして、レイアウト作業していくんだ。
まだ、イメージしにくいと思うけど、PhoroshopとDreamweaverのライブビューが合体した感じ。





[10]
まぁ、とにかく始めていこうよ!
大半の作業はマウスドラッグだから、Museのルールを覚えていくことになるけど、楽しみながら学べると思うので。

繰り返しになるけど、新しいMuseはまだ出ていないから、Dreamweaverを教材として使っていくからね。

あっ、Museから学ぶ人に言っておかなきゃ。
Dreamweaverは必要ありませんので。あくまで説明で使うだけ。
Museだけ、用意しておいてください。





それでは、第2回の投稿をお待ちください。

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

Muse CC 2015 ビジネスガイドブック




関連記事:
Dreamweaver/Museのカテゴリーページ:


関連コンテンツ:
Dreamweaver CC 2015 基礎編パート1


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

筆者:
Creative Edge School Books