スマートフォンでもキレイに見える！タイポグラフィーで作るロゴデザイン
こんにちは。mediba制作部の大村です。
2016年1月6日に弊社でパパママ向けキュレーションサイトcamily-β版-をオープンいたしました。
camily [キャミリー]｜働くママとパパの仕事と育児をもっと自由に
そこで制作したサービスロゴを用いて、基礎的な要点を交えロゴタイプの作り方を紹介します。
1. ベースとなるフォントを探す
サービスイメージと合うフォントを探す
フォントを洗い出したら同じくらいのサイズにして並べ、どれが読みやすいか、狙いと雰囲気が合っているか確認してみましょう。フォントを探すとき留意したい点はサービスイメージと合うということ。予めサービスの特徴や理念を洗い出し、それを元に考え始めます。
- サービス名
camily[キャミリー] - ターゲットユーザー（作成当時）
未就学（0〜5歳）の子供を持つ仕事をしているママとパパ - 特徴
月齢や年齢に応じて記事を出し分け - 理念（サービスの意図）
仕事をしているからこそ出てくる育児の悩みを軽減してもらいたい
※camilyとはcarrier[キャリア]とfamily[ファミリー]を繋げた造語になっており、これらが繋がってバランスが取れていてるイメージ（※課題1）とrelief[安心]という意味も込めたい（※課題2）ので優しいイメージを表現したいという課題も。
- ポイント
- 大文字小文字の組み合わせなどでイメージが変わるので、その点も加味して（または活かして）イメージを作成していきましょう。 （今回は先に全て小文字でサービス名をFIXしていたので、小文字のみでバランスが良くなるように注意しています。）
2. ロゴの表示サイズを確認
きちんとロゴを見せるために表示サイズを最初に決定する
実際デザインにはめてみると「読めない！」「見えない！」「見辛い！」ということが多々有ります。
サービスの対象機種やブラウザを確認し、最小サイズの機種でもきちんと見えるように、また、他のパーツも収まるようにロゴの表示可能領域を予め確認しましょう。
（主流と言われている最小サイズ《iPhone 4、4s 3.5インチ（320×480px、Device pixel ratio 2）》を最小とし、
最大シェアの画面サイズは《Galaxy Nexus 5 4.7インチ（360×567px、Device pixel ratio 3）》これをメインに意識します。
Device pixel ratio 3は非常に大きな画像が必要になるため、Webの場合は表示速度が落ちユーザー体験に悪影響を及ぼす可能性があります。
カンプ作成の際には作業効率も考慮しDevice pixel ratio 2（幅720px）に留め制作を進めます。
それを実機で確認できる環境を作り、確認しながらデザイン作成します。
- ポイント
- ロゴを先行で作らなくてはいけない場合は大体のサイズを想定して、後々調整の必要があることをスケジューリングしましょう。
3. 400%にて作成開始
整数値で作成すると滲みの少ない表示になる
端末によってDevice pixel ratioが違うのでピクセルパーフェクトの実現は難しいのですが、極端に太すぎたり細すぎたりしないように実際自分が作りたいイメージを逆算して作成します。
整数値の表示になるよう心がけることでかっちりとした印象に仕上がります。実際配置する位置が1px以下でずれている場合多少滲みますが、それを考慮しないにしても意識しない場合と比べると滲みは少なくなります。
400%で作成すると表示サイズは1/4になるので線幅24pxの場合表示サイズは6pxとなります。
400%にした理由
- デザイン時に拡大縮小する際に偶数の方が扱いやすい
- 自分の環境(iMac 27インチ)で角丸の度数などの細部をみたいところまで拡大できる
- ポイント
- 最終的にSVGデータ（ベクター形式のデータ）で配置すればかなり綺麗に表示されます。 これからもっと解像度の高い端末が発売されることも見越した施策です。 （ただし、IE8以下、Android2.3以下は対応してないので、対象機種を確認の上実施することをお勧めします。）
4. 文字を知る
読みやすい文字を作るための知識
デザインする際にどんな風に装飾をするか迷うと思います。古来から伝わる文字には様々な意味や特徴があり、フォントのどこがどのように特徴を表現しているのかを分析しながら作成することで、読みやすい文字表現を作成することが出来ます。
参考になる文字ルール
《セリフ (serif) 》
タイポグラフィにおいて文字のストロークの端にある小さな飾りを意味する。セリフを持つ書体をローマン体と呼ぶ。
《サンセリフ》
セリフのない書体の総称。
《永字八法》
漢字の「永」の字には、書に必要な技法8種が全て含まれているという事を表した言葉。
側（ソク、点）、勒（ロク、横画）、努（ド、縦画）、趯（テキ、はね）、策（サク、右上がりの横画）、掠（リャク、左はらい）、啄（タク、短い左はらい）、磔（タク、右はらい）の八法。
5. 印象に残るロゴを目指す
イメージに合わせてモチーフをプラス
「キャリアとファミリーが繋がっている感じ（※課題1）のアイキャッチが欲しい」というオーダーが入りました。
今回は関係者内で協議の結果「バランスが取れてハッピーになる」というイメージで「やじろべえ」のモチーフを起用することに。
物理的に不自然にならないよう左の丸が大きくなっています。
- ポイント
- モチーフもできるだけ正円を使うなどし、文字部分とのバランスをとりましょう。
6. 配布用データを作成
いつでもどこでも綺麗に表示してもらうために
ロゴは媒体に配ったり、どこかに掲出してもらう機会もあり一人歩きしがちです。
そんな時、カラーなどを明記したドキュメントとガイドラインがあれば是か否かハッキリし、扱う人も迷わずに済むでしょう。
ロゴが見えなくなったり読めなくなったりしそうなケースは洗い出し、禁則の欄に追加していきましょう。許容を決めておくことも大事です。
まとめ
今回はWebサイトのサービスロゴ（しかもスマートフォンファースト）ということでタイポグラフィーを採用しました。
Webの場合ファーストビューで何が得られるかが重要です。
ファーストビューに説明的な記載があることでユーザーがサービスにたどり着くまでに時間がかかってしまいます。
時間がかかってしまうと離脱につながります。
離脱させないために、説明がなくてもファーストビューで「読める・分かる」を軸に制作することが必要なのです。
特にロゴはファーストビューの大部分を占めますので、制作の際は下記の、目的を明確にし、それらが達成できるように心がけることが大切だと私は考えます。
- メディア(媒体)
例えば雑誌には雑誌にしか表現できない印刷技術、TVには動きも表現に加わるなど、説明の余地などが媒体によって違います。 - ターゲット
デザイン要素を大きく左右します。 - コンセプト
全体のデザインとマッチさせ、より強固な印象付けを図ります。
※camilyにおいては、丸みを帯びた優しい印象のロゴタイプに加えUIは柔らかい緑で統一し安心感を表現しています。（※課題2）
以上、「スマートフォンでもキレイに見える！タイポグラフィーから作るロゴデザイン」でした。
