ロゴができるまで「きゃら〜む」篇

こんにちは、デザイナーの小池です。
目覚ましアプリ「きゃらーむ」のロゴ制作を担当しました。
今回はこのサービスのロゴがどのような工程を経て、完成に至ったのかを紹介したいと思います。

きゃらーむ(Tポイントが貯まる目覚ましアラーム)

まず手を動かす前に  

この案件はロゴの前にUI部分が先行していた案件でした。
しかも担当は他のデザイナーだったため、トンマナ確認のため現状のUIチェックが必要になりました。   mk_ver2_image1.jpg

きゃら〜むの簡単な概要として

  • 目覚ましアプリ
  • ミニゲームをクリアしないとアラームを止められない
  • ミニゲームクリアごとTポイントが貯まる
  • ゲーム中にはキャラクターがたくさんが出てくる

上記の要素から得たイメージ

 - かわいい
 - やさしい
 - 丸い
 - やわらかい
 - 親しみ
 - pop
 - 彩度を抑えた色
 - キャラクター   

このキーワードを基に方向性を定めます。
キャラクターがたくさん出てくるため、マークよりもロゴタイプの方が効果的だと判断し、目覚ましのモチーフを絡めたロゴタイプを制作することに決めました。
mk_ver2_image13.jpg

ここから実際に手を動かしていきます。

書体の選定

まず、方向性に合う書体を選定します。
1つに絞ることなく、雰囲気が近い書体を集めました。
mk_ver2_image2.jpg

モチーフ作成  

目覚まし時計を連想させるモチーフを考えます。
きゃらーむ"の字体にうまく馴染むような"月"、"時計"、"針"など"の形を作りました。 mk_ver2_image3.jpg

ラフ案作成

とりあえず、クオリティを無視して形にしてみます。
少し無理矢理感があってもOKです。
mk_ver2_image4.jpg

このラフ案を作成するにあたり、2つポイントにしていることがあります。

1つは、作り込まないで考える余地を残しておくこと。

 ・ ラフデザインなのでなるべく柔軟に形を変更できるようにする
 ・ ツメが甘い方が不満な箇所(修正する箇所)が出しやすい

など、ブラッシュアップしやすい状態にしておきます。

2つめは、ラフデザインのまま少し時間を置く 。
制作直後は客観的な判断が難しく、ブラッシュアップの精度が落ちるためです。

ブラッシュアップ

時間を置き、少し落ち着いた目線で見てみると、いろいろと不満な箇所が出てきます。
この不満な箇所を箇条書きしてみます。

  1. デザインの甘さ (サイズ感、スペースなど)
  2. 目覚まし時計感が弱い
  3. インパクトがない

そしてこの問題に対して不満な要素を潰していきます。

  1. デザインの甘さ (サイズ感、スペースなど) には
    全体的に文字の太さや高さを揃え、統一感を出す
  2. 目覚まし時計感の弱さには
    アラームを強調し、ベルのモチーフをシャープに
  3. インパクトのなさには
    全体的に太めに縁の枠をとり、インパクトを

この問題点を反映したロゴがこちらです。   mk_ver2_image6.jpg こちらをベースに派生してみます。
mk_ver2_image7.jpg

ロゴ制作と同時に行った品質チェック

ざっと形が揃ったら簡単な品質チェックをします。
他社のロゴや雰囲気の近いサイトに埋め込んでみて全体を確認するやり方をしました。 客観的な目線でクオリティの良し悪しを判断するのに効果的です。

例) mk_ver2_image8.jpg

なぜ品質確認するのか  

作りたてのロゴに「なんかプロっぽくない」「野暮ったい」といった違和感を抱いてしまうことがあります。
その原因を明確にするため、他社のロゴやクリエイティブと比較し、 細部の作り込みや色、バランスなど、気になった箇所を詰めていくことは、   最終的な納品物のクオリティを上げるために非常に重要です。
また、制作中はどんどん頭が固くなるので、リフレッシュの意味でも大事にしている工程です。

クライアントチェック

完成した9案を一旦クライアントに共有し、イメージに近い案を選んでいただきました。 mk_ver2_image9.jpg

3案選んていただいたのと同時に フィードバックをいただきました。

  1. 丸みがほしい  
  2. 文字として認識できるように
  3. UI同様メインカラーである青のバリエーション確認 

の3点の指摘をいただきました。

こちらも1つずつ解決していきます。
mk_ver2_image10.jpg

文字には角丸処理を施し、朝焼けを連想させる青グラデーション、針など直接的な表現を抑え、文字として認識できるような修正を施しました。

クライアントチェック(2回目)

ここから3パターン9バリエーション作成しました。 mk_ver2_image11.jpg

最終的に選んでいただいたロゴタイプがこちらです。
mk_ver2_image12.jpg

ベルが強調され目覚ましアプリとわかりやすいロゴになったかと思います。
キャラクターとの相性も良さそうで、いい意味で溶け込む自然な感じになった印象です。
ポイントとして、下のフチ部分を揃え、全体的にインパクトが増したことが後押しになったのではないかと思っています。

まとめ

デザイナーによっていろいろなやり方があると思いますが、   自分の場合、一旦時間を置いてなるべく客観的に考えることを大事にしています。 毎回毎回この記事のように制作工程を文字に起こしてまとめていくと、デザインの説得力が増したり、プレゼンの助けになると感じました。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ