メディアデザイン演習4β
07 制作1

実製作に向けて

企画書を提出してください。それを見せてもらいながら、ヒアリングを再開します。
その待ち時間は、ウェブサイトの計画を進めるために必要なことをしらべたり、素材を集めたり、情報を整理したりしましょう。特にDreamweaverの技術的な疑問はクリアしておけるようにしましょう。



ウェブデザインにまつわる読み物
HTML5についての資料:
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
http://www.html5.jp/trans/w3c_differences.html?101
・HTML5で作られたhtmlサンプル
http://designreflect.com/html5-css3-website-templates/

スタイルシートでレイアウトする時に便利な知識:
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ | コリス
http://coliss.com/articles/build-websites/operation/css/css-tutorial-fluid-width-equal-height-columns.html

どれだけウインドウを拡大縮小しても、下にぴったりくっつくフッター
Pure CSS: Sticky Footer - Science and Society
動作実例:http://www.lwis.net/profile/CSS/sticky-footer.html
導入方法:http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/


[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ
http://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-the-first-half-of-2011.html


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

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

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


企画書制作

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



 企画を考える

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

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


企画書を書く

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

ヒアリング

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


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

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

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

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

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


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

 

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

 

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

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

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

 ↓

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

 ↓

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

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

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