いや～こんにちは
Ameba Owndのクリエイティブディレクター/デザイナーをしておりますjesus武本です。
「誰でもかんたんにオシャレなサイトが作ることができ、共有しあえるサービス」です。
今回は従来のAmebaのクリエイティブイメージを一新したAmeba Owndのクリエイティブがどのようにして創造されたのかをダイジェストでお送りいたします。
サービスの新規開発においてのクリエイティブディレクションについてもカンタンに触れたいと思います。
サービスの目的、ターゲット（こちらもポジショニングマップを作成）を加味して狙うべきデザインのポジションを決める。
従来のアメーバのイメージ、ブランド感を一新するという目的があったため、市場から見てもとにかくスタイリッシュで、革新的という振り切ったポジションを目指そうとしていた。
上記の方向性でデザインを作成していったが、いろいろな要因があり方向性を修正。
サービス自体のターゲット層はいろいろな利用シーンを想定すると非常に幅広く存在するため、振り切りすぎるのもよくない、さらにサービス自体をAmebaの基幹サービスとして立ち上げることが決定したため、最終的にはスタイリッシュさは残しつつもしっかり今のユーザーも囲い込めるように現状のAmebaトーンにもう少しよせていくという方向にポジションを定義。
このポジションを目指してデザイントーンを作成することに決定した。
デザインに着手する前におおまかなデザインルールを策定
・ブランドカラー、配色ルール
・使用するタイプフェイス
・ムードボード
・アイコンのカタチetc
これらをチーム全員に共有することでデザインの共通認識を図った。
このコンセプト資料こそが最終的なVIの草案である。
【ブランドカラーについて】
Amebaの冠をつけるかつけないかという議論がなされていたが、結果的にAmebaの基幹サービスとして立ち上げるという結論になりそこからカラーを導いた。
今までのAmebaの系譜を受け継ぎさらに進化させる、一新させる
という思いを込めて先進的な印象をもつスタイリッシュなグリーンを選択。
ブランドカラーをOwnd greenとした。
ここは非常に大事な部分。
サービスのトーンや方向性を決めるため、時間をかけて作成する必要がある。
デザインパターンを何個も作成し、具体的なデザイントーン決め、洗練させていった。
Amebaマークとどのようにコラボレーションするかが非常に難しかった。
Amebaという絶対的なアイデンティティがある中、Owndロゴ単体でもアイデンティティのあるものに仕上げたかったのでそのバランスに苦悩した。
最終的には非常にバランスのとれたロゴとなったOwndの「O」がシンプルかつ特徴的なカタチとなり、アイデンティティとなった。
最終調整はサービスローンチのぎりぎりまで行った。
全体のトーンがぶれないようにweb,iOS,Androidでそれぞれcompornentsを作成。
はじめの段階でcompornentsを作成することによりすべてのデバイスでのデザイントーンがぶれることなく開発が進んだ。
compornents作成することにより、途中でデザイントーンの変更が発生しても柔軟に対応することが可能であった。
themeデザインについても同様に仕様策定、ガイドラインを用意し、ルールを定義してデザイン作成を行っていった。
ルールを定義することでわかりやすさや、使いやすさの向上にもつながった。
Owndgreenの訴求のみだと弱いと感じたため、 最終的にOwndを象徴するキービジュアルを上記のビジュアルに決定した。
こちらについてはコンセプト動画で訴えているメッセージの一番核となる一枚を使用。
メッセージ性、インパクト、印象に残るキービジュアルとしてサービス認知に成功。
movieのコンセプトについてはmovie編があればその機会に。
くわしくはこちら↓
【Ameba Ownd conceptmovie】
Ameba Ownd：Your Own website
新規開発におけるクリエティブディレクターの役割
ウェブやアプリの新規開発において全体のビジュアルアイデンティティは
そのサービス自体の方向性を決めてしまうので非常に大事な部分です。
クリエイティブの力でサービス自体を成功に導くためにはビジュアルアイデンティティーをコントロールし、ブランドイメージを作っていくことがとても大事だと思っています。
中でも重要なのがデザインルールや設計を定義することだと考えます。
最近の話題でbootstrapがあればデザイナーが不要などと言われていましたが、
そのオリジナルのbootstrapやcompornentsを作るのがクリエイティブディレクターやデザイナーの仕事なのではないかと思ってます。
そこには全体の世界観創出やトーン&マナーの定義であったり、配色設計だったり、インタラクションを含めた設計などすべてが内包されています。それがしっかり設計さえできていればたしかにデザイナーがいなくても品質は担保でき、クリエイティブディレクターの手を離れた後も、自動的にトーン＆マナーやビジュアルアイデンティティの一貫性を保持することができるかもしれません。
そのためウェブやアプリの新規開発に求められるクリエイティブディレクターのスキルはブランドトーンや世界観の創出に加え、bootstrapやmaterialデザインのようなルール作りや設計が重要だと今回のプロジェクトを通じて思いました。
クリエイティブは言葉だけでは語れない領域です。
ロジカルと感覚（右脳と左脳）のバランスがとても大事だと思います。
ルール定義はとても大事ですがアイデア、クリエイティブはルールやロジックを超える時があります。
最終的にはエモーショナルでユーザーの心を動かすものを作っていきたいですね。
ロジカルと感覚のはざまですね。ですね。
そんなクリエイティブを創造したいもんですね。
あと忘れてはいけないのは自分の周りに優秀なデザイナー、エンジニアがいるからすべては実現できた（できる）お話なのです。
Ameba Ownd 創造編ありがとうございました。
サービスの新規開発においてのクリエイティブディレクションについてもカンタンに触れたいと思います。
Ameba Owndのビジュアルアイデンティティ（※Amebaマーク変更前）
※「ビジュアル・アイデンティティ」とは、ロゴマークなどのデザインを、決められた使用ルールで様々な広告物や印刷物に展開し、顧客・取引先・求職者・社会に対して視覚的統一性のあるブランド訴求を行うこと。
１、デザインポジション定義
サービスの目的、ターゲット（こちらもポジショニングマップを作成）を加味して狙うべきデザインのポジションを決める。
従来のアメーバのイメージ、ブランド感を一新するという目的があったため、市場から見てもとにかくスタイリッシュで、革新的という振り切ったポジションを目指そうとしていた。
上記の方向性でデザインを作成していったが、いろいろな要因があり方向性を修正。
サービス自体のターゲット層はいろいろな利用シーンを想定すると非常に幅広く存在するため、振り切りすぎるのもよくない、さらにサービス自体をAmebaの基幹サービスとして立ち上げることが決定したため、最終的にはスタイリッシュさは残しつつもしっかり今のユーザーも囲い込めるように現状のAmebaトーンにもう少しよせていくという方向にポジションを定義。
このポジションを目指してデザイントーンを作成することに決定した。
２、デザインコンセプト資料の創造
デザインに着手する前におおまかなデザインルールを策定
・ブランドカラー、配色ルール
・使用するタイプフェイス
・ムードボード
・アイコンのカタチetc
これらをチーム全員に共有することでデザインの共通認識を図った。
このコンセプト資料こそが最終的なVIの草案である。
【ブランドカラーについて】
Amebaの冠をつけるかつけないかという議論がなされていたが、結果的にAmebaの基幹サービスとして立ち上げるという結論になりそこからカラーを導いた。
今までのAmebaの系譜を受け継ぎさらに進化させる、一新させる
という思いを込めて先進的な印象をもつスタイリッシュなグリーンを選択。
ブランドカラーをOwnd greenとした。
３、コンセプトデザインの創造
ここは非常に大事な部分。
サービスのトーンや方向性を決めるため、時間をかけて作成する必要がある。
デザインパターンを何個も作成し、具体的なデザイントーン決め、洗練させていった。
４、サービスロゴの創造
Amebaマークとどのようにコラボレーションするかが非常に難しかった。
Amebaという絶対的なアイデンティティがある中、Owndロゴ単体でもアイデンティティのあるものに仕上げたかったのでそのバランスに苦悩した。
最終的には非常にバランスのとれたロゴとなったOwndの「O」がシンプルかつ特徴的なカタチとなり、アイデンティティとなった。
最終調整はサービスローンチのぎりぎりまで行った。
５、UI compornentsの全体設計
全体のトーンがぶれないようにweb,iOS,Androidでそれぞれcompornentsを作成。
はじめの段階でcompornentsを作成することによりすべてのデバイスでのデザイントーンがぶれることなく開発が進んだ。
compornents作成することにより、途中でデザイントーンの変更が発生しても柔軟に対応することが可能であった。
themeデザインについても同様に仕様策定、ガイドラインを用意し、ルールを定義してデザイン作成を行っていった。
ルールを定義することでわかりやすさや、使いやすさの向上にもつながった。
６、ブランド感を決定づけたキービジュアルの創造
Owndgreenの訴求のみだと弱いと感じたため、 最終的にOwndを象徴するキービジュアルを上記のビジュアルに決定した。
こちらについてはコンセプト動画で訴えているメッセージの一番核となる一枚を使用。
メッセージ性、インパクト、印象に残るキービジュアルとしてサービス認知に成功。
movieのコンセプトについてはmovie編があればその機会に。
くわしくはこちら↓
【Ameba Ownd conceptmovie】
Ameba Ownd：Your Own website
新規開発におけるクリエティブディレクターの役割
ウェブやアプリの新規開発において全体のビジュアルアイデンティティは
そのサービス自体の方向性を決めてしまうので非常に大事な部分です。
クリエイティブの力でサービス自体を成功に導くためにはビジュアルアイデンティティーをコントロールし、ブランドイメージを作っていくことがとても大事だと思っています。
中でも重要なのがデザインルールや設計を定義することだと考えます。
最近の話題でbootstrapがあればデザイナーが不要などと言われていましたが、
そのオリジナルのbootstrapやcompornentsを作るのがクリエイティブディレクターやデザイナーの仕事なのではないかと思ってます。
そこには全体の世界観創出やトーン&マナーの定義であったり、配色設計だったり、インタラクションを含めた設計などすべてが内包されています。それがしっかり設計さえできていればたしかにデザイナーがいなくても品質は担保でき、クリエイティブディレクターの手を離れた後も、自動的にトーン＆マナーやビジュアルアイデンティティの一貫性を保持することができるかもしれません。
そのためウェブやアプリの新規開発に求められるクリエイティブディレクターのスキルはブランドトーンや世界観の創出に加え、bootstrapやmaterialデザインのようなルール作りや設計が重要だと今回のプロジェクトを通じて思いました。
最後に
クリエイティブは言葉だけでは語れない領域です。
ロジカルと感覚（右脳と左脳）のバランスがとても大事だと思います。
ルール定義はとても大事ですがアイデア、クリエイティブはルールやロジックを超える時があります。
最終的にはエモーショナルでユーザーの心を動かすものを作っていきたいですね。
ロジカルと感覚のはざまですね。ですね。
そんなクリエイティブを創造したいもんですね。
あと忘れてはいけないのは自分の周りに優秀なデザイナー、エンジニアがいるからすべては実現できた（できる）お話なのです。
Ameba Ownd 創造編ありがとうございました。