このページの本文へ

「レスポンシブ」で作る、スマホ対応トップバナー

2013年07月12日 11時00分更新

萩原伸悟

  • この記事をはてなブックマークに追加
本文印刷
edge

 アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateでインタラクティブなスライドショーを制作しながら、シンボル機能について学びました。

 今回は、さまざまなウィンドウ幅に対応できるトップバナーを制作します。PCだけでなくスマートフォンやタブレットでも表示できるレスポンシブなコンテンツの作り方を学習しましょう。

 具体的には、レストランのWebサイトをイメージしたトップバナーを制作します。写真を上下左右に動かしながらテキストを表示し、フェードアウトで切り替えていくバナーです。完成版は以下のリンクを参照してください。

完成サンプル(画像クリックでサンプルを開きます)
完成サンプル(画像クリックでサンプルを開きます)

 このサンプルを以下の手順で制作します。

  1. 画像アニメーションを作る
  2. 文字アニメーションを作る
  3. レスポンシブ化する
  4. スマートフォンのブラウザーに対応する

 最初は固定幅で制作し、その後にレスポンシブ化してスマートフォンに対応します。

1.画像アニメーションを作る

 画像アニメーションを制作します。Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。

ステージを作成する
ステージを作成する

 ステージの色は黒(#000000)に設定します。

ステージの色を設定する
ステージの色を設定する

 スライドで使用する画像をアセットに読み込みます。右サイドのライブラリパネルにある「アセット」の[+]をクリックして、アセットを追加します。作例では「cabbage」「dish1」「dish2」「floor1」「floor2」「tomato」の6つのファイルを読み込みます。

アニメーションする画像を読み込む
アニメーションする画像を読み込む

 アセットに準備した画像をステージ上に配置して、動きを付けていきます。今回は、以下の3パターンのアニメーションを制作します。

作成する画像アニメーションのパターン
作成する画像アニメーションのパターン

 それぞれのアニメーションで変化させるプロパティを解説します。

左右に移動しながらフェードアウト(1枚目、2枚目)

 1枚目(トマト:Tomato)と2枚目(キャベツ:cabbage)の画像は、左右にアニメーションさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードは「ON」にします。

tomato cabbage
タイムライン(s) 左端 不透明度 表示 左端 不透明度 表示
0 0px   オン      
2   100        
2.5 -15px 0 オフ -15px 0 オン
2.75         100  
4         100  
4.5       0px 0 オフ
左端
 左右に動きを付けます。「tomato」は右から左へ15px、「cabbage」は左から右へ15px移動させます。
不透明度
 CSSのopacityプロパティを変化させてフェードイン、フェードアウトさせます。「tomato」は非表示にするときに不透明度を100から0にしてフェードアウト、「cabbage」は表示するときに不透明度を0から100にしてフェードイン、非表示にするときに不透明度を100から0にしてフェードアウトさせます。
表示
 CSSのdisplayプロパティを変更して表示、非表示を制御します。
1枚目と2枚目のタイムライン
1枚目と2枚目のタイムライン

上下に移動しながらフェードアウト(3枚目、4枚目)

 3枚目(料理:dish1)と4枚目(料理2:dish2)の画像は上下にアニメーションさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードはONにします。

dish1 dish2
タイムライン(s) 上端 不透明度 表示 上端 不透明度 表示
4.5 -30px 0 オン      
4.75   100        
5.75   100        
6 0px 0 オフ 0px 0 オン
6.75         100  
7.25         100  
7.5       30px 0 オフ
上端
 上下に動きを付けます。「dish1」は上から下へ30px、「dish2」は下から上へ30px移動させます。
不透明度
 両画像ともに、表示させるときにフェードイン、非表示にするときにフェードアウトさせます。
表示
 CSSのdisplayプロパティを変更して表示、非表示を制御します。
3枚目と4枚目のタイムライン
3枚目と4枚目のタイムライン

位置は固定でフェードイン/アウト(5枚目、6枚目)

 5枚目(店内1:floor1)、6枚目(店内2:floor2)の画像は、位置は固定で、フェードイン/フェードアウトさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードはONにします。

floor1 floor2
タイムライン(s) 不透明度 表示 不透明度 表示
7.5 0 オン    
7.75 100      
8.75 100      
9 0 オフ 0 オン
9.25     100  
10.25     100  
10.5     0 オフ
不透明度
 両画像ともに、表示させるときにフェードイン、非表示にするときにフェードアウトさせます。
表示
 CSSのdisplayプロパティを変更して表示、非表示を制御します。
5枚目と6枚目のタイムライン
5枚目と6枚目のタイムライン

 ここまで画像のアニメーションが完成しました。ブラウザーでプレビューしてみましょう。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く