メディアデザイン演習4γ
05 Dreamweaver基礎編

Dreamweaverを実際に触ってみる

使いこなしたいウインドウ:
プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ

■まず確認
自分の名前のついた"サイト"になっているかを確認しましょう。
現在、数名でそのマシンを共有しているので、他の人のサイトに間違って保存しない様に気をつけましょう。

ウェブ分析レポート

製作者の視線を持ってウェブサイトを分析的に見るレポートを書いてきてもらいました。
早速提出してください。
以降、年内の授業期間中はいつでも何枚でも提出して下さい。

ープリントを参照してください
このプリントと同じフォーマットでレポートを提出してもらいます。
イラストレータデータをダウンロードして、文字を入力してください 。

●ここをクリックしてダウンロードする●
Adobe Illustrator CSデータ 610KB

動的コンテンツをつくるために javascript、flashなどの連携

[ 動的コンテンツにまつわる話]

A ● 投稿記事などがPOSTするとすぐに反映される
B ● ウェブサイト内部の要素を動かしたい

——————————————————————————

A ● 投稿記事などがPOSTするとすぐに反映される

 CMS(Contents Management System:コンテンツ・マネジメント・システム)
 サーバにリクエストして記事を生成する。
 ブログを作ったりするときに適している。

有名なCMS 例: Wordpress, Movable Typeなど
[リンク] 無料CMS配布サイト http://freesoft-100.com/homepage/rental/cms.html

※サーバがこのCMSを動かす仕様か、記事などを保存しておくデータベースを持っているかが必須条件になる。
これはサーバ管理者に確認する必要がある。
☆ちなみに、この授業で使用する学校のwww3サーバはこの条件が満たせない
興味があれば、サーバを持たなくても、wordpress.comで体験してみることができる。サークルのウェブサイトなどを作ってみるのもいいかもしれない。

—————————————————————————

B ● ウェブサイト内部の要素を動かしたい

ー サイト全体に動きを反映させたい場合 方法は2つ 

1: Adobe Animate を使う[旧名 Adobe Flash]
2: Javascript を使う最近はこちらが主流]

——————————————————————————

1: Adobe Animate で動的コンテンツを制作し、HTMLを使って貼付けてブラウザで表示する
キャンペーンサイト等に使われる事が多い。

※iPhoneやiPad等を使うと、Flashを使用したホームページが閲覧できないので新しいプラットフォームに書き出すべく、新しいアプリとして名前が変わった。
HTML5 Canvas、Flash PlayerとAir、WebGLなど、複数の環境でみられるファイルに書き出せるようになった。


2: Javascript でHTML要素を動かしたり変化させたりする

JavaScript(ジャヴァスクリプト)とは、プログラミング言語。主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。(via. Wikipedia)


ー ページ全体
例: A4折形 http://www.a4orikata.jp/
   MOMA http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/
   Google Gravity http://mrdoob.com/projects/chromeexperiments/google-gravity/


[基礎知識]
ブラウザは
HTMLで文章内の目印付け(タグ)を
CSSで目印やクラスに対してデザインの指示を
解釈して画面上に表示します。

目印やクラスに対して、動きを指示するのが Javascriptです。
(※OSやブラウザによっては思った動きをしないので注意)


Javascript を学び始めるときの問題点
1 書き方をいきなり覚えるのはハードル高め
2 動きの指示をするのに、同じこと何度も書くのが大変
 ↓
「もっと簡易に導入したい!!」


簡易にしてくれる ライブラリ がある。特に jQuery を使ってみよう。
+ ライブラリを活用した機能拡張(プラグイン) 

機能拡張は多種多様にあり、出来の良いもの悪いものそれぞれです。
いろいろ調べていいものをセレクトして使うと、ウェブサイトの彩りとして活用できるでしょう。

便利なライブラリ例
プログラム入力を簡易にしてくれる『ライブラリ』がある。(JavaScriptの繰り返し行う部分などを省略して書ける道具)

[資料]「ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus) 」


特に jQuery を使ってみよう。

jQuery 日本語リファレンス http://semooh.jp/jquery/
googleでホストされているjQueryをワンクリックでリンクできる便利サイト http://scriptsrc.net/

+  jQuery+◎
ライブラリを活用した機能拡張(プラグイン) 
機能拡張は多種多様にあり、出来の良いもの悪いものそれぞれです。
いろいろ調べていいものをセレクトして使うと、ウェブサイトの彩りとして活用できるでしょう。


よく使われるライブラリプラグイン
・Lightbox2(写真拡大) http://lokeshdhakar.com/projects/lightbox2/


[資料]
2016年総まとめ、jQueryのプラグインとスクリプト100選
http://coliss.com/articles/build-websites/operation/javascript/best-javascript-libs-jquery-plugins-2016.html

2015年
http://coliss.com/articles/build-websites/operation/javascript/best-jquery-plugins-and-scripts-2015.html

jQueryのプラグインを探す時に便利なサイトのまとめ
http://coliss.com/articles/build-websites/operation/javascript/best-site-when-looking-for-jquery-plugins.html

[tips]マウスが上に乗ったとき、画像や文字の透明度を変えるCSSテクニック

css内
a:hover {
 filter: alpha(opacity=80);
 -moz-opacity:0.8;
 opacity:0.8; }

html内
<a href=”#”><img src=”ーーー.jpg” />画像も文字もaタグにかこまれたものはマウスオーバーで半透明になる</a>

マウスが上に乗ったとき、画像や文字の透明度を変えるCSSテクニック
透明度の数字は任意で変えられます(三つとも同じ値にすること)




どんなウェブサイトにするか

制作内容は自由にします。
ただし、

・全世界に公開しても問題の無い内容にすること
・ブログ(日記的)などの雑多なコンテンツの集積ではなく、一定のテーマや対象が決まったもののほうが好ましい
・自分ならではの着眼点や切り口を持って作成すること。(もうすでにあるものや自分が作らなくてもいいものではないよう考える)
・素材や文章は自分で責任を持って作るもしくは依頼して集める事
 
・トップページ以下、複数ページを行き来するつくりにすること


企画書制作

参考になりそうなウェブサイトや書籍などを使って、企画をまとめていきましょう。



 企画を考える

何故つくるのか 自分が作らなければならない理由はどこにあるか
誰が見る/どう感じる/どのような関係を築きたい
そうするためにどんな内容をどのように見せるか

こんな感じにしたいという類似例をいろいろ集めて分析してみる(オンラインブックマークを活用すると良い)


企画書を書く

ターゲット
コンテンツ/掲載するもの
構造/リンクなどの方法や見せ方
視覚的要素/全体的なグラフィックの方向性をスケッチ

ヒアリング

企画書を手元に、どんなサイトにしていきたいのか、話を聞いて行きます。
参考例などがあれば、見せて下さい。


ーー 企画と同時進行で ーー

ラフデザインとして作ったワイヤーフレームから、レイアウトを決定していき、それに従ってグラフィックデザインを進めてください。

※ 1 ポイント
Illustrator 100%表示がブラウザに出る原寸です。
Photoshop 解像度72ppi で100%表示がブラウザに出る原寸です。

※ 2 ポイント
ワイヤーフレームやグラフィックデザインは、ピクセル単位で制作管理し、きりのいい数字のほうがレイアウトのときに役立つ。

必要なページフォーマット全部を作る。
文章や画像など、コンテンツ部分をさしかえればいいだけのものは一つだけ作って省略してもよい。


「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。今回は「ワイヤーフレームの作り方」です。

 

IllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおす すめします!今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。

 

ワイヤーフレーム作成+グラフィックデザイン作成

今後の作業のおおまかな流れ

ワイヤーフレームをノートに手書き や イラストレータ等でスケッチする
※画面のサイズ感を確認しながら(参考サイトなどをよく見る)

 ↓

IllustratorやPhotoshop、Fireworksなどでワイヤーフレームから完成形のデザインに落とし込んで行く

 ↓

DreamweaverでHTML(範囲を表すタグ)+CSSでレイアウト用の枠組みをつくっていく

レイアウト用の枠組みに、ウェブ用に書き出したグラフィックパーツを配置していく。
また、文字原稿なども配置していき最終の見た目の調整を行って行く。

作業のなかで発生した問題はどんどん質問して解消していってください。