（20-E）「Movie」のパートの画面を作成する - WEBデザインアイデアラボVol.20

CREATIVE POINT E

「Movie」のパートの画面を作成する

	KEY WORD 1		パターン化できる部分は正確にパターン化する
	KEY WORD 2		見出しに紺色を使う

青から赤へのグラデーションのある部分に「Movie」という文字を配置する【1】。「Music」と同じように「Movie」の右上の部分に、サイトのロゴを「Movie」のときと同じ大きさで配置する【2】。このような表現は一定のパターンを踏襲することが重要だ。特に、本作例のようなフリーレイアウトの場合、パターン化できる部分は正確にパターン化しておかないと、ばらばらな印象になってしまう。

見出しとテキストブロックを配置する【3】。見出しが白では「Movie」と同じになってしまい、テキストブロックと同じ黒を使いすぎると色味がなくなって地味な印象になってしまうので、ここでは紺色を使うことにした。「Music」と同様に、特集タイトルである「春の夢」を50％の透明度で大きく配置する【4】。ここでも白の部分に重ねることで、透明感を感じさせようとしている。ここまでで、写真画像の中にトップ画面を含めて3つのコンテンツを配置できたb。この3つの領域を動くようにしたい。そこで、画像をJPEG形式で書き出す。テキストブロックの部分は表示しないで書き出し、Dreamweaverでテキストを配置したほうが望ましい。

INDEX　スクロールでページ内を移動するインターフェイス
CREATIVE POINT A　窓辺で花をぼかして撮影する
CREATIVE POINT B　ひとつの背景画像から複数の画面を想定する
CREATIVE POINT C　トップ画面を作成する
CREATIVE POINT D　「Music」のパートの画面を作成する
CREATIVE POINT E　「Movie」のパートの画面を作成する
CREATIVE POINT F　クリックで目的のコンテンツに移動するスクリプトを作成する