| CREATIVE POINT D |
「Music」のパートの画面を作成する |
| KEY WORD 1 |
テキストの行は内容の単位で改行する |
||
| KEY WORD 2 |
画面の左側に大きな余白を残す |
写真の黄色い部分に、トップ画面のメニュー項目として使った「Music」の文字を大きめに変更して配置する【1】。同じ書体を使うことで視覚的なつながりが生まれ、リンク先であることを暗示している。また「Music」の右上の部分に、Webサイトのロゴを70％程度に縮小して配置する【2】。これで、Webマガジン「風をあつめて」というWebサイトの中の「Music」パートという現在地を示すことができた。次に、このコンテンツの見出し文である「スタン・ゲッツのテナーで聞く」、「IT MIGHT AS WELL BE SPRING」を配置する。「スタン・ゲッツのテナーで聞く」を明朝の黒、「IT MIGHT AS WELL BE SPRING」をサンセリフの赤と対比させて表現した【3】。背景がぼんやりとした画像なので、配置する要素は、あまりあいまいな色ではなく、白・黒・赤といったはっきりした色で表現する。ここにテキストブロックを配置する【4】。文字は箱形に組むのではなく、行は内容の単位で改行していく。短い文章の場合は読みやすく、またデザイン的にも変化が生まれる。最後に、特集タイトルである「春の夢」を50%の透明度にして、大きく配置する【5】。文字が半透明になっているので大きくても違和感がないし、白い花に白い文字を重ねることで透明感を強調している。「IT MIGHT AS WELL BE SPRING」に対してもあえて重ねてしまい、そのぶん画面の左側に大きな余白を残すようにしている。
【1】トップ画面のメニュー項目として使った「Music」の文字を、大きめに変更して配置する
【2】「Music」の右上の部分に、サイトのロゴを70％程度に縮小して配置する
【3】「スタン・ゲッツのテナーで聞く」を明朝の黒、「IT MIGHT AS WELL BE SPRING」をサンセリフの赤と対比させ表現する
【4】行を内容の単位で改行して、テキストブロックを配置する
【5】特集タイトルである「春の夢」の文字を50％の透明度にして大きく配置する
INDEX スクロールでページ内を移動するインターフェイス
CREATIVE POINT A 窓辺で花をぼかして撮影する
CREATIVE POINT B ひとつの背景画像から複数の画面を想定する
CREATIVE POINT C トップ画面を作成する
CREATIVE POINT D 「Music」のパートの画面を作成する
CREATIVE POINT E 「Movie」のパートの画面を作成する
CREATIVE POINT F クリックで目的のコンテンツに移動するスクリプトを作成する
