【Design Review Vol.1】 add more ロゴ / add more webサイト

デザインチームによる案件紹介では、制作の経緯や提案ラフなど、どういう風にデザインをつくっているのかデザイナー目線での切り口でお伝えしていきます。

現在デザイナーとしてお仕事をしている方はもちろん、これからデザインをやってみたいという方、デザイナーとやり取りをする立場の方にもぜひ読んでいただければと思います。

今回の実績紹介では、add moreのロゴと2018年にリニューアルしたadd moreのwebサイトの２つの事例をご紹介いたします。

１．ロゴデザインについて

ロゴ制作依頼の時点では、add moreは法人化前の屋号でした。
ゆくゆくは法人化するというビジョンのもと、ロゴ制作の依頼となりました。
ロゴデザインにおいてクリアしたい課題を整理し、シンプルにブランド認知につながるロゴがよいと考えました。

クリアしたい課題
　1. add moreの基本姿勢を表していること
　2. 可読性の高いロゴであること
　3. 汎用性の高いロゴであること

これらを踏まえて、ロゴタイプ・シンボルマークをデザインしていきました。

理想のサンセリフフォント

はじめに、ロゴタイプは視認性のよい太めのゴシック体というリクエストがありました。
制作当時、新しく起業する社名ロゴとなるため、タイポグラフィで魅せる世界観よりも可読性を重視。
まずは社名をしっかりと知ってもらうことを最優先としました。

その条件下で、イメージにあうタイポグラフィをいくつか提案し、しっかりとした骨太の「Helvetica Neue」のboldに決定しました。
親しみやすくスタンダードな書体として右に出るものはない有名なフォントです。
とても扱いやすく機能美に優れているため、汎用性の高さも魅力です。

４つのサークル（輪）の意味

ロゴタイプを太めのゴシック体に定めてみると、add moreの文字列のなかに4つのサークルが浮かびました。add moreに内包される4つのサークルはそれぞれに意味合いを込めています。

サークルを3段に積み重ねた、末広がりの安定感のある円錐台のベース。
これは、add moreの仕事の要となる「企画／設計」、「制作／開発」、「運用／改善」を表しています。
その上に浮かぶサークルは、add moreのキャッチコピー「ひとつ上の提案、いたします」を象徴しています。
弊社の経営理念と行動理念が明文化されたのは法人化後ですが、それ以前から変わらずadd moreの名の通り期待値以上の高みを目指す理念を持っていました。

add more 経営理念
「add moreを通して、お客様、従業員、社会、および関わる全ての方に幸せを上積みする」

add more 行動理念
「期待には常にプラスをして応え、自身の領域よりも高みに挑戦し続ける」

また、シルエットがゆるやかな三角形になるので、add moreの頭文字の「A」を想起させます。

コーポレートカラーではなく、推奨カラーにした理由

弊社のCI資料では、ロゴは3パターン（コーポレートブランド、シンボルマーク、コーポレートブランドロゴ）ご用意しています。

推奨フォントは「Helvetica Neue」「A-OTF ゴシックMB101」です。
名刺や封筒などのオフィシャルな印刷物は推奨フォントで展開していきますが、たとえば世界観を作り込んだ制作を行う時などは、テーマに沿ったフォントを選択できる余地を残したいと考えています。
基本のルールとしての推奨フォントという位置付けです。

カラーについてもネイビー、グレー、ホワイト、ブラックを推奨カラーとして掲げていますが、コーポレートカラーというわけではありません。
こちらも同様に、制作シーンに合わせて柔軟に対応できるようにと考えました。
「変化をプラスに捉えること」を規定カラーにしないことで表現しています。

コーポレートカラーとしてひとつのカラーを掲げることは、CIとしてはとても強いです。
ですが、それよりも柔軟性や多様性を打ち出すことが、add moreの理念に沿っていると考えました。

それを象徴する実例として、弊社の名刺のカラーは各個人でそれぞれ違います。
入社後に各自好きなカラーを選んでいただいています。（名刺のご紹介もまたの機会に！）
たくさんのカラーを持つ会社、それがadd moreだというイメージにできたらいいなと思います。

2．add moreのwebサイトについて

制作の目的・コンセプト

制作当時の2018年秋頃、add moreは第４期を迎え、新しいメンバーも加わり掲載する実績の量も増えてきたことをきっかけに、リニューアルをすることとなりました。

制作の目的として

　・add moreの社風や、メンバーの雰囲気を伝えること
　・実績を見やすくすること

の2つがありました。

制作チームで制作コンセプトの打ち合わせをした結果、add moreの開けた風通しの良い社風や楽しみながら仕事をしているメンバーの雰囲気をサイトを通じて伝えたいという結論になりました。

ラフの制作とブラッシュアップ

まずはトップページのデザインラフを2案作成し、社内プレゼンをしました。
普段の実務でもクライアントが方向性を絞りやすいように、ラフを提出する際は複数提案するようにしています。
制作する際は、まずレイアウトを決めてから、細部のデザイン、色やフォントと順番に作業を進めていきました。
はじめに提出したラフの2案がこちらです。

A案
グレーをテーマカラーに使用しました。
add moreの明るく風通しが良い雰囲気を打ち出せるよう、ライトグレーを使用しました。
ラインは細めにしたりビビッドな色は使わないようにしたことで、全体に清潔感や程よい緊張感を持たせ、ユーザーに会社としての信頼や安心を感じてもらえるよう意識した案です。

B案
ネイビーをテーマカラーに使用しました。
ネイビーを使用しスタイリッシュな雰囲気を打ち出しつつも、パララックスを想定した動きのあるレイアウトで、楽しみながら仕事をしているadd moreの社風を伝えられるよう意識した案です。

社内プレゼンの結果、B案はコンテンツの始まりがメインビジュアルの下部からはじまっていることでページが長く冗長的に見えてしまうという懸念があり、A案で進めていくことが決まりました。
方向性が決まってからは、さらにカラーバリエーションも作成しながらブラッシュアップしていきました。
2週間に1回社内プレゼンがあり、それに合わせて2、3ページずつ作成していきました。

デザインの統一感を出すために

実績ページは絞り込み検索の機能を追加し、より快適に閲覧できるようにしました。
それぞれの実績のサムネイルには、カテゴリーで分類されることが直感的に伝わるようアイコンを用いています。
アイコンは全てIllustratorで作成し、綺麗にレンダリングさせるためsvgで書き出しをしています。
サイトの中で、見出しをベタ塗りの背景にすることで目立たせていたので、塗りの部分が多いアイコンでは埋もれてしまうように見えました。
ラインで構成されたアイコンにすることで、サイト全体にも馴染みが良く、ポイントで目立つようになったと思います。

リニューアルの目的としてあった「add moreの社風やメンバーの雰囲気を伝えること」をサイト全体を通して表現できるよう、フォント選定にもこだわりを持って取り組みました。

主なフォントとして、各デバイスに最適化し、レンダリングも綺麗なデバイスフォントを使用したかったため「游ゴシック体」を選びました。
サイト全体の雰囲気にあったフォントを選び、よりadd moreらしさを打ち出したいという思いから英数字のみGoogle Fontの「Amiko」を使用しています。
丸っぽい太めのゴシック体で、クセがなく読みやすいフォントです。
add moreのロゴタイプともマッチしていると思います。

また、テキストを選択（反転）させたときの背景色と文字色や、Google Mapのカラーをカスタマイズしてサイト全体との統一感を出しています。

今回は、OGP画像もリニューアルをお知らせするバージョンと通常バージョンの2案作成しました。
リニューアルから2ヵ月間ほどは、お知らせバージョンのOGP画像を設定していました。
Facebookなどに投稿する際に効果があったと思います。

こういった細かな点まで丁寧に目を向けて制作に取り組むことができると、サイトの全体の統一感がより生まれると思っています。

リニューアルされたadd moreのwebサイト、是非ご覧いただければ幸いです！