メディアデザイン演習3β
11 ウェブサイトを作ろう6

実製作に向けて

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

自分のウェブマガジンのためのフレームCSSに、Web用に書き出したグラフィックを追加して形をつくっていきましょう。どうすればいいのか困っている人は率先して声をかけて下さい。


スケジュール管理

残された時間や、自分の理解度を把握する

自分の作りたいサイトは、どう作れば良いのか。サンプルを作ってみて、出来るかどうかを試す。
その後、実作にどれくらい時間がかかるかを考えて、そこから逆算したコンテンツ量を決めて作り始める。
ウェブサイトデザインは追加したり更新していけるので、まずはすっきりと出来る範囲のコンテンツ量を目指すと良いと思います。

TIPS
▷ IllustratorをWeb作業に最適化するためのポイント (環境設定)

Adobe サイトより:
▷ IllustratorでWebデザインをはじめよう !
第五回 デザインを作り込もう パーツの装飾編

第六回 完成したデザインから画像を書き出そう

その他、参考になるブログ記事:
▷ IllustratorでのWebデザインがいい感じ!おすすめポイントや設定いろいろ
▷ PhotoshopでWebサイトのデザインをしよう

※ 情報の間違いはありませんか?

世界中から見る事の出来るウェブサイト。
そこに嘘の情報や不確定な情報、憶測のみで断定した情報は掲載されていませんか?
また、英単語を使ったメニューのスペルが違う事はありませんか?確認しましょう。



[ふりかえり] レイアウト編

実際に自分が制作しようとおもっているウェブサイトについて:
ワーヤーフレームから、実際の数字などを決定し、HTML+CSSで実際のフレーム(枠)づくりをやってみましょう。
divを活用してみてください。

どうしてもできない、もしくは、やり方が分からないなどの問題が発生した場合は、どんどん質問してください。
数値に関しては、キリのいい数字にするのがよいでしょう。




1・ワイヤーフレームについて

- ワイヤーフレームって?
内容をどのように配置すれば見ている人に伝わりやすいかを考えて作った画面構成図

例)ワイヤーフレームと完成したウェブページデザインが見られる http://www.wireframeshowcase.com/

・大きさ、場所、順番などをしっかり決める
・色味(テーマカラー)なども検討する
・いくつかページレイアウトのバリエーションがある場合は、全ページの形ぶんつくる

- グリッドデザインをしよう http://photoshopvip.net/archives/14323
見えない補助線を使って整列させて行く

- 画面サイズについて
現状、横幅960px~1024pxを使う事が多い。
資料:もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ〔日本では1366×768〕

スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。
画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。


2・詳細のグラフィックデザインを行っていく
道具は、IllustratorやPhotoshop、もしくはFireworksというアプリケーションが使われる事が多い。

[ウェブ用画像のPOINT]
・色はRGB
・単位はピクセル
・画像形式 GIF・JPEG・PNG

 

来週の内容

引き続き要素と属性の紹介
来週もマガジン実製作編レイアウト編です。
HTMLの辞書/参考書を手に入れておきましょう。
わからない事は早めに質問して下さい。