スタートアップにおけるスピーディなロゴメイキング - 3D検索サービス「heymesh」の事例
多くのスタートアップのプロダクトは企画からリリースまでハイスピードで開発が行われるため、その短期間に最低限のリソースで思想やコンセプトを反映させることが重要となります。
今回のMESONブログは、約1ヶ月の開発期間を経て3月にリリースした自社サービス「heymesh」のロゴデザインについて、スタートアップにおけるデザインの一例として制作の裏側を少しばかりですがお伝えできればと思います。
また、今回のロゴデザインでは大きな流れとして下記のようなステップで進めています。
ロゴタイプの制作 -「heymesh」ベータ版公開まで
1. サービス価値の整理
2. リサーチ
3. イメージの分類分け→方向性の決定
4. フォント選定
--------------------------------------
シンボルマークの制作 -「heymesh」ベータ版公開以降、本リリースまで
5. シンボルのコンセプトメイキング
6. リサーチ
7. アイデアスケッチ
8. ラフ作成
9. ブラッシュアップ
本文の中でコンセプトメイキングに役に立つフレームワークも紹介しているので、是非読んでみていただけると幸いです！
1.経緯について
私は現在、MESONというスタートアップで開発中の「heymesh」という3Dモデルを検索するサービスにて、3Dに関する監修をしつつデザイナーとしてビジュアルに関わる業務をメインでお手伝いさせていただいてます。
今年の2月にMESONに入ってからUIの調整などはしていたのですが、突然「ロゴのデザインもやってください」と、いきなり大仕事を任されることに。
ロゴは過去に何度かは作ったことがあったのですが、これまでAR領域で研究開発をしていたMESONの初の自社サービスである「heymesh」の、一番最初の印象を決める大事な顔。
大変重要な任務なので、まずはメンバーと密にディスカッションしながらコンセプトメイキングをしていくことになりました。
2.heymeshのコンセプト
まず最初にそもそもheymeshがどんな価値を提供しているサービスなのかを整理すると、
・良質な3Dモデルが見つかる
・3Dアーティストに出会える
・新しい創造に繋がる
この3つが大きな価値となります。
その前提にあるのは、VR/ARなどのコンテンツを創るのに不可欠な3Dモデルの調達を助けるというこのサービス自体の目的があります。
そして、これら3つの価値をどうロゴで表現するのか。
これらの価値を提供する「場」としてのheymeshはどのようなキャラクターなのか？
3.ロゴタイプの制作
-実はベータの時点ではシンボルマークはなかった
コンセプトが固まった段階から約1ヶ月程度の超スピードでリリースした「heymesh」
この開発のスピード感に合わせてロゴを用意しなければならなかったため、じっくり案を練る余裕はありません。しかし中長期的な運用も踏まえたロゴでなければならないという難題。
このミッションを達成するために、まずベータの実装時にはより重要度の高いロゴタイプのみをシンボルマークに先駆けて制作することにしました。
また、今回のミッションではプロダクト自体のフェーズや現状のリソースを考慮し、素晴らしいデザイナーの皆さまが作成した既成フォントのお力を借りることが最適と判断しました。
-方向性の認識合わせ
まず、方向性を整理するにあたって、「heymesh」の名称の由来にも遡ります。
「heymesh」の「hey」は気軽に話しかけるように簡単に検索ができるようなサービスであることを表し、「mesh」は3Dモデルのポリゴンメッシュから取られています。
その名前に込められた意味と
・良質な3Dモデルが見つかる
・3Dアーティストに出会える
・新しい創造に繋がる
この3つの価値を元にし、下記のようにブランドとして目指したい方向性を4つに分類しメンバーと認識をすり合わせました。
1. Casualな方向性
2. Streetな方向性
3. Elegantな方向性
4. Industrialな方向性
こちらをもとに様々なロゴをリサーチし、集めた参考資料をボードにまとめイメージを上記4つの軸にざっくり分類します。
4.フォント選定
先ほどの4つの軸に分類したボードを参考にheymeshのイメージに合いそうなフォントを選定していきます。
数多の素晴らしいフォントを並べて微妙な差を比較し、先ほどのステップで分類された情報から導き出されたキャラクター像と照らし合わせます。
結果、下記の5つに絞り比較検討することにしました。
事前のヒアリングでCasualとStreetの中間っぽいイメージが近いと言われていましたが、実際にheymeshのロゴに置き換えた際に他の方向性がどう見えるのかも含めてこの段階でメンバーに確認してもらい認識を統一、採用するフォントを決定します。
結果選ばれたのは「ややCasualよりでStreetとの中間」に置いた
「DIN Next Pro - Bold Italic」こちらがheymeshの現在のロゴタイプとなりました。
「DIN Next」シリーズはドイツの工業用規格フォント「DIN」をベースにLinotype社が制作したフォントで、デザイナーは小林 章氏。
同フォントで頭文字を大文字にする案もあったのですが、HやMの直線的な印象の斜体が「ヘイメッシュ」という言葉の響きと合わせると強過ぎる印象だったこと、eやsとのバランスを考慮したことでボツとなりました。
また、大文字だけの場合もスポーティな印象が強くなりすぎると判断し、小文字だけのDIN Next Pro - Bold Italicによる「heymesh」を採用しました。
5.シンボルの制作
-Design Inception Worksheet
heymeshはベータ公開からわずか2週間ほどで本リリースとなり、当初必要としていたシンボルマークも早急に用意する必要がありました。
シンボルマークの制作ではフォントの力を借りることができないため、どんなモチーフで、どんな形状で描くのかのイメージを具体化していく作業を行いました。
この工程ではロゴタイプの制作時にまとめた表に加えて、Design Inception Worksheetというフレームワークを採用、ビジュアル化の足がかりとなるイメージを言語化していきます。
このシートはロゴデザインだけではなく、UIなど様々なデザインでも活用することができます。
こちらは下記のように中心から外側にかけて情報を記入していきます。
チームメンバー、受託の場合はクライアントからのヒアリングを元に進めましょう。
今回は予め制作したロゴタイプが既にあるため「ややCasualよりでStreetとの中間」の方向性が前提にある状態として進めていきます。
関係者の時間を確保することが可能であればワークショップで一気に内容を詰められるとよりスムーズです。
1. WHY? - このプロダクトは何をするものかを簡潔に説明
2. MOOD - プロダクトの気分や雰囲気を表す言葉
3. VISUAL LANGUAGE - ビジュアルのイメージに繋がる言葉
Space → 空間、環境のイメージ
Colour → 色味のイメージ
Shape → 形状のイメージ
Movement → 動きのイメージ
(実のところ、このnote執筆時点では分かりやすくするためプロセスを整理して書いていますが、この時点では雑然とした状態の部分も多く、だいぶストリートカルチャー寄りのイメージになっていました)
参考サイト：blog.prototypr.io
6.シンボルの要素
上記ワークシートでいったん整理した結果をメンバーと共有し、シンボルのキーとなる3つの要素を抜き出しました。
・オープンなコミュニティ
・反抗心
・3D
ただこれだけでは抽象的すぎるので、下記のように分解していきます。
・文化：オープンなコミュニティ
→ フレンドリー → 鮮やか、黄色、余裕のある間
・思想：反抗心
→ 小規模チームの支援, インディーズ → 赤、黒、角がある、ロゴの赤さ、スピード感
・機能：3Dの検索サービスであること
→現代的、未来感 → キューブ、ポリゴン、プリミティブな形状
「オープンなコミュニティ」はheymeshにどんなユーザーを集めたいか？という文化的な要素、「反抗心」はheymeshがどういった役割を担っていきたいかという思想的な要素、「3D」は3Dの検索サービスであるという機能を説明する要素として、それぞれを具体的なビジュアルイメージに繋がるように言語化しました。
これをベースに実作業といきたいところですが、その前に引き出しを増やすためのリサーチを再度行います。
7.インスピレーションリスト
-PinterestやBehanceでリサーチ
PinterestやBehanceなどのサイトでビジュアルの参考になりそうな画像をひたすらリサーチ。Pinterestにインスピレーションリストを作成しロゴマークの形状のとっかかりを探っていきます。（新しい機能のサブボードをフル活用しました。）
8.アイデアスケッチ
そして整理した情報、インスピレーションリストを元にスケッチを描いていきます。
スケッチがある程度まとまった時点でメンバー達に共有、ディスカッションを行いました。
10.ロゴに込められた隠れコンセプト
具体的に形にしたデザインを見ながらディスカッションする中で、日本古来の立体的に何かを表現する手法の「折り紙」とheymeshのmeshの由来である「ポリゴンメッシュ」をかけ合わせてシンボルにするアイデアが生まれました。
"テクノロジーで世界を変えて日本をもう一度尊敬される国にする"
MESON自体のミッションをサービスのロゴにも込めたい、という創業メンバー達の意向もあり、折り紙をモチーフとしたパターンもデザインすることに。
スケッチをベースにSketch上でデザインを詰めていきます。
色がない状態でもコンセプトがなるべく伝わる方が良いので、最初はモノクロで描き始めています。
11.「折り紙」＋「キューブ」＋「M」＋「ハイタッチ」
そしていくつかの案の中から、最終的に決まったのが現在実装されているこちらのデザイン。
キューブのシルエットをイメージさせる六角形ベースのシンプルな形状。頂点同士をつなぐエッジにポリゴンメッシュ、heymeshの「mesh」の頭文字である「M」が隠されています。
カラーリングは黄系色でフレンドリーさを、赤系色でインディーズ感やアグレッシブさを表現しています。
また、heymeshの「hey」という言葉と連動するようにハイタッチしてるようにも見えることから、最終的に上記の案が採用されました。
-ロゴのコンセプトビジュアル
こちらはシンボルの組み合わせのイメージを図式化したものです。
Origami = 日本発
Cube = 3次元,AR/VR
M = mesh(heymeshのmeshで3Dモデルの意味)
ハイタッチ = 出会い/発見(heymeshのhey)
以上が「heymesh」のロゴができるまでのストーリーとなります。いかがだったでしょうか？
12.おわりに
現在MESONでは「heymesh」の開発を加速させてくれるエンジニア、デザイナーの皆さまを募集しています。
バーチャルな3Dコンテンツに触れることが日常になる未来を一緒に創っていきましょう！
この記事が気に入ったらサポートをしてみませんか？