実製作に向けて

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

自分のウェブマガジンのためのフレームCSSの目処がたったら、グラフィックをデザインしていきましょう。　まだ何を作るか迷っている人は率先して声をかけて下さい。

ちなみに、先週の理解度テスト、模範回答は以下になります。
>模範回答１（divを活用したレイアウト編）
>模範回答２（より正確なhtml5タグでレイアウト編）

グラフィックデザインを行う

準備：
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。

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

Adobe サイトより：
▷ IllustratorでWebデザインをはじめよう !
　 第二回 Webデザイン用のドキュメントを作成しよう
▷ 第三回 コンテンツを配置してワイヤーフレームを作ろう
▷ 第四回 デザインを作り込もう　画像・配色・テキスト編


その他、参考になるブログ記事：
▷ IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
▷ PhotoshopでWebサイトのデザインをしよう
▷ 【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト

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

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

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

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

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

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

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

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

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


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

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

来週の内容

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