こんにちは。アメーバ事業本部 デザイナーのパジェロです。
現在、スマートフォン版Amebaのデザインを担当しています。
今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。
Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。
それぞれに一覧や特集ページが用意されている上に、掲示板などプラットフォームサイト独自のコンテンツも持っているため、全体として非常に大規模なウェブサイトになっており、そのページ数は優に200を超えます。
この膨大な数のページのデザインを作成していく際に、1ページ1ファイルで管理していくのは効率が悪い、というかほとんど不可能に近いです。
そこで、Amebaのデザインチームでは、Fireworksを使ってサイトデザインを効率良く作成・管理しています。
Webデザインの現場ではPhotoshopを使っている人も多いと思いますが、AmebaではFireworksを採用しています。
Fireworksは、大規模サイトのデザイン制作に非常に向いているからです。
Fireworksを使うメリットは大きく2点あります。
1点目は、リッチシンボルの活用によるデザインパーツの一元化が可能であること。
そして2点目が、ページ機能とステート機能によって複数のページを1ファイルで管理できることです。
この2点のメリットについて、実際のデザインファイルを例に説明していきたいと思います。
そこで自然と、同一・類似デザインのパーツを何度も使うことになります。
この時に便利なのがシンボルです。
よく使うデザインパーツをシンボル化しておけば同一パーツの管理・デザイン変更が楽になります。
例えばAmebaで頻繁に使っているこのボタン。
このボタンも、背景をシンボル化しています。
この画面内のボタンの背景と枠線の色を変更してみます。
1つのシンボルをいじるだけで、
そのファイル内のすべてのボタンに変更が反映されます。
このシンボルに応用性を持たせたものがリッチシンボルです。
リッチシンボルとは、簡単に言うと、色やテキストなどの設定をいじれるようにしたシンボルのことです。
デザインパーツをリッチシンボルにしておくと、複数の類似パーツを単一シンボルで管理することができるようになります。
再びさっきのボタンを例に見てみましょう。
Amebaでは同一デザインのボタンにカラーバリエーションがあり、用途に応じて使い分けています。
デザインファイル内ではこれを1つのリッチシンボルにまとめて管理しています。
選択ツールでボタンのシンボルを選択すると、シンボルプロパティウィンドウに変更できるプロパティ（設定）が表示されます。
今回の場合は、プロパティ「type」を変更することで、ボタンの色を変えることができます。
このように、普通だったらカラーバリエーションの数だけシンボルを作らなければならないところを、リッチシンボル化することによって、たったひとつのシンボルで管理することができます。
【ゲーム】のページのデザインファイルを例に実際に見ていきましょう。
game.pngを開きます。
ページウィンドウを見ると、01～08の8つのページに分かれています。
これらは、それぞれが独立したページのデザインです。
このファイル内だと、ページ03【game_top_normal】が【ゲーム】のトップページです。
そして、このページの中の「恋愛」ボタンをタップして遷移した先のページのデザインが、ページ07【game_category_list_renai】に入っています。
このようにページ機能を使うことで、関係する複数のページを1ファイルにまとめることができます。
ファイル内の各ページはステートを活用することで、更に細かい場合分けが可能です。
ページ04【game_top_app】を見てみましょう。
ステートウィンドウを見ると、このページには【default】と【popup】の2つのステートが設けられていることがわかります。
ここでは【default】で通常時、【popup】でポップアップ広告表示時の状態を見ることができます。
このように、ステート機能を使うことで、より細かい場合分けを管理することができます。
※注意点
ページとステートを多用するとファイルが複雑化します。
混乱を防ぐために、「ページは遷移」「ステートは条件分岐」など、ルールを設けて使うことをおすすめします。
最後に、Amebaのデザインチームで実際に使っているステート機能の応用例をご紹介します。
それでは数ヶ月前のgame.pngを開いてみましょう。
今の【ゲーム】のページと全然違いますね…。
Amebaは日々改修の連続で、UIもどんどん変化しています。
この頃は特に怒涛の改修ラッシュで忙しかった…。
さて、このページはステートで【01_ranking】と【02_vs】に分かれています。
この2つを見比べてみると、上段の一部コンテンツだけ
別々のものが入っていることがわかります。
この2つを同時に公開し、ユーザーの反応が良かった方を採用する、
の繰り返しでUIの改善を進めていきます。
ステートを利用することで、A/Bテスト用のデザインを効率良く整理することができます。
スマートフォン版Amebaでは、これからもツールのポテンシャルを活かして、スピード感のあるUI改善を進めていきたいと思います。
最後までお読みいただきありがとうございました。
現在、スマートフォン版Amebaのデザインを担当しています。
今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。
スマートフォン版Amebaとは
スマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。
Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。
それぞれに一覧や特集ページが用意されている上に、掲示板などプラットフォームサイト独自のコンテンツも持っているため、全体として非常に大規模なウェブサイトになっており、そのページ数は優に200を超えます。
この膨大な数のページのデザインを作成していく際に、1ページ1ファイルで管理していくのは効率が悪い、というかほとんど不可能に近いです。
そこで、Amebaのデザインチームでは、Fireworksを使ってサイトデザインを効率良く作成・管理しています。
Fireworksの長所
Amebaで使用しているのはAdobe Fireworks CS5.1です。Webデザインの現場ではPhotoshopを使っている人も多いと思いますが、AmebaではFireworksを採用しています。
Fireworksは、大規模サイトのデザイン制作に非常に向いているからです。
Fireworksを使うメリットは大きく2点あります。
1点目は、リッチシンボルの活用によるデザインパーツの一元化が可能であること。
そして2点目が、ページ機能とステート機能によって複数のページを1ファイルで管理できることです。
この2点のメリットについて、実際のデザインファイルを例に説明していきたいと思います。
デザインパーツを一元化する
Amebaは膨大なページ数を有するサイトですが、全体を通してデザインのテイストは統一されていなければなりません。そこで自然と、同一・類似デザインのパーツを何度も使うことになります。
この時に便利なのがシンボルです。
よく使うデザインパーツをシンボル化しておけば同一パーツの管理・デザイン変更が楽になります。
例えばAmebaで頻繁に使っているこのボタン。
このボタンも、背景をシンボル化しています。
この画面内のボタンの背景と枠線の色を変更してみます。
1つのシンボルをいじるだけで、
そのファイル内のすべてのボタンに変更が反映されます。
このシンボルに応用性を持たせたものがリッチシンボルです。
リッチシンボルとは、簡単に言うと、色やテキストなどの設定をいじれるようにしたシンボルのことです。
デザインパーツをリッチシンボルにしておくと、複数の類似パーツを単一シンボルで管理することができるようになります。
再びさっきのボタンを例に見てみましょう。
Amebaでは同一デザインのボタンにカラーバリエーションがあり、用途に応じて使い分けています。
デザインファイル内ではこれを1つのリッチシンボルにまとめて管理しています。
選択ツールでボタンのシンボルを選択すると、シンボルプロパティウィンドウに変更できるプロパティ（設定）が表示されます。
今回の場合は、プロパティ「type」を変更することで、ボタンの色を変えることができます。
このように、普通だったらカラーバリエーションの数だけシンボルを作らなければならないところを、リッチシンボル化することによって、たったひとつのシンボルで管理することができます。
複数ページを1ファイルで管理する
複数のページや条件分岐を1ファイルにまとめることができる機能がページとステートです。【ゲーム】のページのデザインファイルを例に実際に見ていきましょう。
game.pngを開きます。
ページウィンドウを見ると、01～08の8つのページに分かれています。
これらは、それぞれが独立したページのデザインです。
このファイル内だと、ページ03【game_top_normal】が【ゲーム】のトップページです。
そして、このページの中の「恋愛」ボタンをタップして遷移した先のページのデザインが、ページ07【game_category_list_renai】に入っています。
このようにページ機能を使うことで、関係する複数のページを1ファイルにまとめることができます。
ファイル内の各ページはステートを活用することで、更に細かい場合分けが可能です。
ページ04【game_top_app】を見てみましょう。
ステートウィンドウを見ると、このページには【default】と【popup】の2つのステートが設けられていることがわかります。
ここでは【default】で通常時、【popup】でポップアップ広告表示時の状態を見ることができます。
このように、ステート機能を使うことで、より細かい場合分けを管理することができます。
※注意点
ページとステートを多用するとファイルが複雑化します。
混乱を防ぐために、「ページは遷移」「ステートは条件分岐」など、ルールを設けて使うことをおすすめします。
ページ、ステート機能の応用例
ページ、ステートは、場面に応じて工夫することで更に便利に使うことができます。最後に、Amebaのデザインチームで実際に使っているステート機能の応用例をご紹介します。
■ A/Bテスト
A/Bテストとは、1つのページを、デザインや内容が微妙に異なる「Aパターン」と「Bパターン」に分け、どちらのUIがよりユーザーに使いやすいかをテストする手法です。それでは数ヶ月前のgame.pngを開いてみましょう。
今の【ゲーム】のページと全然違いますね…。
Amebaは日々改修の連続で、UIもどんどん変化しています。
この頃は特に怒涛の改修ラッシュで忙しかった…。
さて、このページはステートで【01_ranking】と【02_vs】に分かれています。
この2つを見比べてみると、上段の一部コンテンツだけ
別々のものが入っていることがわかります。
この2つを同時に公開し、ユーザーの反応が良かった方を採用する、
の繰り返しでUIの改善を進めていきます。
ステートを利用することで、A/Bテスト用のデザインを効率良く整理することができます。
最後に
このように、大規模なウェブサイトのデザイン制作においてFireworksはすごいパフォーマンスを発揮します。スマートフォン版Amebaでは、これからもツールのポテンシャルを活かして、スピード感のあるUI改善を進めていきたいと思います。
最後までお読みいただきありがとうございました。