多くのスタートアップのプロダクトは企画からリリースまでハイスピードで開発が行われるため、その短期間に最低限のリソースで思想やコンセプトを反映させることが重要となります。

今回のMESONブログは、約1ヶ月の開発期間を経て3月にリリースした自社サービス「heymesh」のロゴデザインについて、スタートアップにおけるデザインの一例として制作の裏側を少しばかりですがお伝えできればと思います。

また、今回のロゴデザインでは大きな流れとして下記のようなステップで進めています。

ロゴタイプの制作 -「heymesh」ベータ版公開まで

  1. サービス価値の整理
  2. リサーチ
  3. イメージの分類分け→方向性の決定
  4. フォント選定

シンボルマークの制作 -「heymesh」ベータ版公開以降、本リリースまで

  1. シンボルのコンセプトメイキング
  2. リサーチ
  3. アイデアスケッチ
  4. ラフ作成
  5. ブラッシュアップ

本文の中でコンセプトメイキングに役に立つフレームワークも紹介しているので、是非読んでみていただけると幸いです!

1.経緯について

picture pc 37cdc488c2f364996f46c17d79f046bd

私は現在、MESONというスタートアップで開発中の「heymesh」という3Dモデルを検索するサービスにて、3Dに関する監修をしつつデザイナーとしてビジュアルに関わる業務をメインでお手伝いさせていただいてます。

今年の2月にMESONに入ってからUIの調整などはしていたのですが、突然「ロゴのデザインもやってください」と、いきなり大仕事を任されることに。

ロゴは過去に何度かは作ったことがあったのですが、これまでAR領域で研究開発をしていたMESONの初の自社サービスである「heymesh」の、一番最初の印象を決める大事な顔。

大変重要な任務なので、まずはメンバーと密にディスカッションしながらコンセプトメイキングをしていくことになりました。

2.heymeshのコンセプト

picture pc 9e9e184aab2bb041f5c43087cdb402be

まず最初にそもそもheymeshがどんな価値を提供しているサービスなのかを整理すると、

・良質な3Dモデルが見つかる

・3Dアーティストに出会える

・新しい創造に繋がる

この3つが大きな価値となります。

その前提にあるのは、VR/ARなどのコンテンツを創るのに不可欠な3Dモデルの調達を助けるというこのサービス自体の目的があります。

そして、これら3つの価値をどうロゴで表現するのか。

これらの価値を提供する「場」としてのheymeshはどのようなキャラクターなのか?

3.ロゴタイプの制作

-実はベータの時点ではシンボルマークはなかった

コンセプトが固まった段階から約1ヶ月程度の超スピードでリリースした「heymesh」

この開発のスピード感に合わせてロゴを用意しなければならなかったため、じっくり案を練る余裕はありません。しかし中長期的な運用も踏まえたロゴでなければならないという難題。

このミッションを達成するために、まずベータの実装時にはより重要度の高いロゴタイプのみをシンボルマークに先駆けて制作することにしました。

また、今回のミッションではプロダクト自体のフェーズや現状のリソースを考慮し、素晴らしいデザイナーの皆さまが作成した既成フォントのお力を借りることが最適と判断しました。

-方向性の認識合わせ

まず、方向性を整理するにあたって、「heymesh」の名称の由来にも遡ります。

「heymesh」の「hey」は気軽に話しかけるように簡単に検索ができるようなサービスであることを表し、「mesh」は3Dモデルのポリゴンメッシュから取られています。

その名前に込められた意味と

・良質な3Dモデルが見つかる ・3Dアーティストに出会える ・新しい創造に繋がる

この3つの価値を元にし、下記のようにブランドとして目指したい方向性を4つに分類しメンバーと認識をすり合わせました。 picture pc 53329a173cfa3c0352b63713192e50db

  1. Casualな方向性
  2. Streetな方向性
  3. Elegantな方向性
  4. Industrialな方向性

picture pc 18e8b673327d4fa2d6995ca15197fee1

4.フォント選定

先ほどの4つの軸に分類したボードを参考にheymeshのイメージに合いそうなフォントを選定していきます。

数多の素晴らしいフォントを並べて微妙な差を比較し、先ほどのステップで分類された情報から導き出されたキャラクター像と照らし合わせます。 picture pc cb856b5f5b49fe2e36f8d66374fbc378

結果、下記の5つに絞り比較検討することにしました。 picture pc a4969c7f11bbc9765902bffcf8b06d51

事前のヒアリングでCasualとStreetの中間っぽいイメージが近いと言われていましたが、実際にheymeshのロゴに置き換えた際に他の方向性がどう見えるのかも含めてこの段階でメンバーに確認してもらい認識を統一、採用するフォントを決定します。

結果選ばれたのは「ややCasualよりでStreetとの中間」に置いた 「DIN Next Pro - Bold Italic」こちらがheymeshの現在のロゴタイプとなりました。 picture pc 4be2efe8c39778f2c28f4f146be734a6

「DIN Next」シリーズはドイツの工業用規格フォント「DIN」をベースにLinotype社が制作したフォントで、デザイナーは小林 章氏。

同フォントで頭文字を大文字にする案もあったのですが、HやMの直線的な印象の斜体が「ヘイメッシュ」という言葉の響きと合わせると強過ぎる印象だったこと、eやsとのバランスを考慮したことでボツとなりました。

また、大文字だけの場合もスポーティな印象が強くなりすぎると判断し、小文字だけのDIN Next Pro - Bold Italicによる「heymesh」を採用しました。 picture pc 12a716f1641df4db2bbf4c75732c6c53

5.シンボルの制作

picture pc 5e0f404a26e4d84a8258704d2751a694

-Design Inception Worksheet

heymeshはベータ公開からわずか2週間ほどで本リリースとなり、当初必要としていたシンボルマークも早急に用意する必要がありました。

シンボルマークの制作ではフォントの力を借りることができないため、どんなモチーフで、どんな形状で描くのかのイメージを具体化していく作業を行いました。

この工程ではロゴタイプの制作時にまとめた表に加えて、Design Inception Worksheetというフレームワークを採用、ビジュアル化の足がかりとなるイメージを言語化していきます。 picture pc ad702f821a550d119162fd7060a3a669

このシートはロゴデザインだけではなく、UIなど様々なデザインでも活用することができます。

こちらは下記のように中心から外側にかけて情報を記入していきます。 チームメンバー、受託の場合はクライアントからのヒアリングを元に進めましょう。

今回は予め制作したロゴタイプが既にあるため「ややCasualよりでStreetとの中間」の方向性が前提にある状態として進めていきます。

関係者の時間を確保することが可能であればワークショップで一気に内容を詰められるとよりスムーズです。

  1. WHY? -  このプロダクトは何をするものかを簡潔に説明
  2. MOOD -  プロダクトの気分や雰囲気を表す言葉
  3. VISUAL LANGUAGE -  ビジュアルのイメージに繋がる言葉    Space → 空間、環境のイメージ    Colour → 色味のイメージ    Shape → 形状のイメージ    Movement → 動きのイメージ

picture pc 79b7ebe1dc14228cc074028a6f7d138c

(実のところ、このnote執筆時点では分かりやすくするためプロセスを整理して書いていますが、この時点では雑然とした状態の部分も多く、だいぶストリートカルチャー寄りのイメージになっていました)

参考サイト:blog.prototypr.io

6.シンボルの要素

上記ワークシートでいったん整理した結果をメンバーと共有し、シンボルのキーとなる3つの要素を抜き出しました。

・オープンなコミュニティ

・反抗心

・3D

ただこれだけでは抽象的すぎるので、下記のように分解していきます。

・文化:オープンなコミュニティ  → フレンドリー → 鮮やか、黄色、余裕のある間

・思想:反抗心  →  小規模チームの支援, インディーズ  → 赤、黒、角がある、ロゴの赤さ、スピード感

・機能:3Dの検索サービスであること  →現代的、未来感 → キューブ、ポリゴン、プリミティブな形状

「オープンなコミュニティ」はheymeshにどんなユーザーを集めたいか?という文化的な要素、「反抗心」はheymeshがどういった役割を担っていきたいかという思想的な要素、「3D」は3Dの検索サービスであるという機能を説明する要素として、それぞれを具体的なビジュアルイメージに繋がるように言語化しました。

これをベースに実作業といきたいところですが、その前に引き出しを増やすためのリサーチを再度行います。

7.インスピレーションリスト

-PinterestやBehanceでリサーチ picture pc 6356473018793ec02cb004e2a074be6d

PinterestやBehanceなどのサイトでビジュアルの参考になりそうな画像をひたすらリサーチ。Pinterestにインスピレーションリストを作成しロゴマークの形状のとっかかりを探っていきます。(新しい機能のサブボードをフル活用しました。)

8.アイデアスケッチ

そして整理した情報、インスピレーションリストを元にスケッチを描いていきます。 picture pc d32661c5130763fd3d7c16496209ec90 picture pc 541bd02e1678e4726ecb236416282518

スケッチがある程度まとまった時点でメンバー達に共有、ディスカッションを行いました。

10.ロゴに込められた隠れコンセプト

具体的に形にしたデザインを見ながらディスカッションする中で、日本古来の立体的に何かを表現する手法の「折り紙」とheymeshのmeshの由来である「ポリゴンメッシュ」をかけ合わせてシンボルにするアイデアが生まれました。

"テクノロジーで世界を変えて日本をもう一度尊敬される国にする" MESON自体のミッションをサービスのロゴにも込めたい、という創業メンバー達の意向もあり、折り紙をモチーフとしたパターンもデザインすることに。 picture pc a8217157c8c9d0462f01886976fb0191

スケッチをベースにSketch上でデザインを詰めていきます。 色がない状態でもコンセプトがなるべく伝わる方が良いので、最初はモノクロで描き始めています。 picture pc 09b390f2ae3b37f000c9f2a7ed9c586f

11.「折り紙」+「キューブ」+「M」+「ハイタッチ」

そしていくつかの案の中から、最終的に決まったのが現在実装されているこちらのデザイン。 picture pc 2edc900fb46e84b5a0581489b74a3f42

キューブのシルエットをイメージさせる六角形ベースのシンプルな形状。頂点同士をつなぐエッジにポリゴンメッシュ、heymeshの「mesh」の頭文字である「M」が隠されています。

カラーリングは黄系色でフレンドリーさを、赤系色でインディーズ感やアグレッシブさを表現しています。

また、heymeshの「hey」という言葉と連動するようにハイタッチしてるようにも見えることから、最終的に上記の案が採用されました。

-ロゴのコンセプトビジュアル picture pc f349635215a290bd4d5432929c4f11d6

こちらはシンボルの組み合わせのイメージを図式化したものです。

Origami = 日本発 Cube = 3次元,AR/VR M = mesh(heymeshのmeshで3Dモデルの意味) ハイタッチ = 出会い/発見(heymeshのhey) 以上が「heymesh」のロゴができるまでのストーリーとなります。いかがだったでしょうか?