4/27(Sat)
＜以下書き起こし全文＞
まず最初にですね、Google Web Designerを開いてもらいたいんですけれども、そこでファイルから新しいファイルを選択していただいて、空のファイルのHTMLファイルを選んでいただきます。
ここで、適当なファイル名を選ぶと、Google Web Designerで、実際にモノが作れる状態になります。今回まず最初にですね、Google Web Designer
でシェイプツールというものを使って、丸とか三角とかを作ってみたいと思います。
Google Web Designerでモノを作る時って言うのは、このツールバーっていうものがあると思うんですけど、ここを選択してモノを作っていきます。今回作るシェイプっていうのはこちらにあります。ここで長押しすると、ペンツールとか、楕円ツールとか長方形ツールとかを選ぶことができるということですね。みなさん制作されている方であればIllustratorとかPhotoshopを触っているかと思いますので、このへんはまぁ直感的にできるかと思います。
で、実際に書いていきます。こうやってやると四角形が描けて、この四角形っていうのが、単なるグラフィックというのではなくて、HTMLコードなんですね。このキャンバスタグに書かれたという状況です。
こちらをもとに簡単に一旦アニメーションをしていきたいのですが、アニメーションするには、何秒後かっていう指定する必要があるんですけれども。2秒後に特定の座標まで移動するっていうのをここで一旦作っていきます。
で、こちらがタイムラインって言われるものなんですけれども、ここが1秒目、ここが2秒目、そういう感じですね。2秒目の段階でキーフレームを挿入して、キーフレームを選択した状態で要素を動かすと、アニメーションができるという、そういう仕組です。
場所以外に、Flashと同じように、モノを大きくしたりすることができると。Google Web Designer上で、このように再生する方法と、実際にHTMLファイルで見る方法があって、ここがGoogle Web Designerで再生する場所ですね。こちらをクリックすると、ブラウザで見れるというところですね。
プレビューボタンを押すと、今、現状僕の環境ではFirefoxが開かれているんですけれども、こちらはブラウザを選択することができて、ここを長押しすると選べるという、そういう仕組みです。
Webデザインに興味のあるあなたに、Webデザインをわかりやすく学ぶための授業3選をご紹介します！
これらの授業を通じて、Google Web Designerの使い方や、初心者向けのWebデザインなどについて理解することができます。
ぜひこれらの授業を受講し、Webデザインに関する知識を身につけましょう！
Google Web Designerを使い、インタラクティブなバナーの作り方を学ぶことができます。
・「Google Web Designerって名前は知ってるけど、実際にどんな事ができるか知らない方」
・「今後、HTML5を使って、バナー広告を作っていきたい方」
・「スクリプトは分からないけど、FlashやAfterEffect等のツールでアニメーションを作ったことがある方」
上記のようなニーズをお持ちの方を対象としています。
月1回開講されるこの授業では、毎回Adobe Creative Cloudのアプリの中から気になるテーマをチョイスし、直近のアップデート情報や制作に役立つTips、リリース情報の裏側などをCreative Cloudエヴァンジェリストの皆さんに紹介、実演していただきます。
デザイナーや動画編集者の制作業務に欠かすことのできない、Adobe Creative Cloudの未来を受講生の皆さんと一緒に考える授業です。
Illustrator・Photoshop等、基本的な制作ツールの使い方は習得したものの、実際にクライアントワークに臨むにはまだ知識・経験に自信がない。
そんな「デザイン初心者」の方が、一人でデザインの仕事を受けられる中級者を目指していくための授業です。
案件に応じたコンセプト設計・ワイヤーフレーム制作から、仕上げに至るまで、時間が許す限り全ての工程を実演します。
いかがでしたでしょうか？
これらの授業を受講することで、Webデザインに関する基本的な知識を身につけることが出来るでしょう。
さらに、これらの授業を通じて、自身がこれからWebデザインとどのように関わっていこうかを考えることも出来たのではないでしょうか？
スクーではこれら3つの授業以外にWebデザインに関する授業を多数開講しています。
ぜひスクーでさまざまな授業を受講し、Webデザインに関する知見を深めていきましょう！
