ロゴに込めた、
複雑な規範を、誰もが仕事やくらしで使えるようにする。Normanticsのロゴには、そのために技術を磨く私たちの考えを込めています。会社と各プロダクトのロゴをもとに、輪郭と余白、円の形、色の使い方を紹介します。
デザイン共通ルール
私たちは、AIエージェントが資料を探して読めるよう、データと検索の仕組みをつくっています。その取り組みを、ものをよく見る「レンズ」で表しました。社会のルールから一人ひとりのくらしへ、同じ考え方でデザインを展開します。
ブランドカラー
ロゴの基本色はゴールドの#d4a843です。画面は暗い無彩色を基調にし、金色は製品や重要な情報を示す箇所に絞ります。本文と操作の部品は、読みやすい明るい無彩色です。
輪郭と余白で伝える
会社のNは、一つにつながる輪郭で社名の頭文字を、中央の円の余白で読み解く視点を表します。細かな飾りを重ねず、小さな表示でも輪郭と余白を見分けられる形を保ちます。
役割を道具の形に
法レンズは天秤と拡大鏡、公的データパックは資料とレンズ、外食レンズは皿とフォークです。各製品の対象を身近な道具の形で示し、見つける視点は会社のロゴと同じ円です。
Nに、読み解く視点を。
Normantics
社名の頭文字Nを、一つの輪郭にまとめました。その中央に開けた円は、複雑な規範の中へ視点を通すレンズです。社会で共有するルールも、一人ひとりが大切にする基準も、読み解いて仕事やくらしに活かす姿勢を表します。
ひとつのNで、会社を表す
社名のNormとInformaticsを、ひとつのNにまとめました。規範を意味や文脈から読み取り、使えるデータや道具へ整える。その取り組みを、分かれずにつながる輪郭で表しています。
円形の余白に、
読み解く視点を込める 中央の円は、色を塗り足すのではなく、Nの中を抜いた余白です。ものをよく見るレンズに見立て、資料や候補の中から、必要なものを見つける視点を表します。各プロダクトにも、同じレンズの考え方を取り入れています。
小さくても、
輪郭と余白を残す 細い線や小さな点を並べず、太いNと中央の円に絞りました。円を大きくしすぎてNが途切れないよう、斜線の太さと余白の広さを調整しています。単色でも同じ形が伝わるつくりです。
SVGのソースコードを見る
SVGは、線や図形の情報で画像を表す形式です。拡大しても輪郭がぼやけにくく、ロゴなどに使われます。下のソースコードは、その形を記述したものです。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" color="#d4a843"><path fill="currentColor" fill-rule="evenodd" d="M24 96V24H40L80 66V24H96V96H80L40 54V96ZM67.5 60a7.5 7.5 0 1 0-15 0a7.5 7.5 0 1 0 15 0Z"/></svg>法レンズ
AIエージェントの調査を、
判例や条文を探し、原文を確かめる。その入口として、拡大鏡と天秤を組み合わせました。専門家にも、くらしの中で法律を調べる方にも、親しみを持って使っていただける姿を目指しています。
拡大鏡と天秤で、
調べる道具を表す 拡大鏡は、資料を探し、細部まで読むことを表します。その中に、法律を連想できる天秤を置きました。エージェントが検索と原文の取得を繰り返す仕組みを、ひと目で分かる道具の形に重ねています。
天秤の形を、
一重のレンズに収める 天秤の支柱、横棒、左右の皿を、ひとつの円の中に収めました。天秤は法律分野の資料、拡大鏡はそれを探して確かめることを示します。法レンズ自身が個別の法律上の判断をする、という意味ではありません。
要素を絞り、
道具の形を見分けやすく 外周の二重線や光の反射は描かず、レンズと天秤を一つの色で表しました。細部を減らし、縮小しても法律資料を調べる道具として見分けられるようにしています。名称と組み合わせ、法レンズの入口に使います。
SVGのソースコードを見る
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" color="#d4a843"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<circle cx="52" cy="52" r="34" stroke-width="5.5"/>
<path d="M77 77L104 104" stroke-width="6.5"/>
<path d="M52 30V69M32 38H72M32 38V50M72 38V50M24 51Q32 63 40 51M64 51Q72 63 80 51M42 69H62" stroke-width="4"/>
</g></svg>公的データパック
資料をまとめ、
行政のガイドラインや通達、Q&Aを、AIが探して読めるデータへ整える取り組みです。複数の資料と、その中を調べるレンズを組み合わせて表しました。
重なる資料で、
ひとまとまりを表す 手前の資料の上と右に、もう一枚の輪郭を重ねました。一つの文書だけでなく、分野に関わる資料をまとめて扱う「パック」を表します。
資料の中に、
調べるレンズを置く 手前の資料の内側には、持ち手のあるレンズを置きました。資料を集めるだけでなく、必要な箇所を探し、原文を読むためのデータへ整えることを表します。会社や法レンズのロゴとも、レンズの形でつながります。
小さな表示でも、
資料とレンズを残す 資料の中の文字や罫線は描かず、輪郭とレンズに絞りました。重なる資料の間と、レンズの周囲にすき間を取り、小さな目次でも形を見分けられるようにしています。
SVGのソースコードを見る
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none">
<path d="M32 18H98V92" stroke="#d4a843" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="18" y="32" width="66" height="74" rx="4" stroke="#d4a843" stroke-width="5"/>
<circle cx="49" cy="62" r="17" stroke="#d4a843" stroke-width="5"/>
<path d="M62.8 75.8L72 85" stroke="#d4a843" stroke-width="6" stroke-linecap="round"/>
</svg>わたしの外食レンズ
好みと気分から、お店を選ぶ。
食事を表す皿と、探すためのレンズを、一つの円で描きました。添えたフォークは食事の記号です。自分の好みやその日の場面から、食事の行き先を見つける製品の役割を表します。
ひとつの円を、皿とレンズに
丸い皿の形に、拡大鏡の持ち手を添えました。食事と探索を、ひとつの円に重ねています。自分に合う行き先を見つけるという意味を、会社や他のプロダクトにも共通するレンズで表します。
フォークで、
食事の文脈を添える 皿の横にフォークを置き、食事の行き先を探す道具だと伝えます。特定の料理の絵は描かず、料理の種類を限定しない形にしました。店の評価や順位を示す印としては使いません。
余白を保ち、
単色で使える形に フォークと皿の間を空け、輪郭は太めの線で描きました。円の内側には模様を足さず、小さな表示でも余白を残しています。背景や表示する大きさが変わっても、同じ形で使えるようにしています。
SVGのソースコードを見る
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" color="#d4a843"><g stroke="currentColor" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 25V43Q15 51 24 51Q33 51 33 43V25M24 25V94"/>
<circle cx="72" cy="56" r="28"/>
<path d="M92 76L109 93" stroke-width="6.5"/>
</g></svg>ロゴからサイトへ、
One Lens, One Light
ロゴの輪郭と余白、レンズ、ゴールドの考え方を、サイトにも取り入れています。たとえば、準備中の製品は中が空いた円で示し、ゴールドは製品や重要な情報を示す箇所に絞って、操作するボタンは無彩色にします。形と色に同じ役割を持たせ、ページを移っても迷いにくい見せ方を目指します。
6.5px
5.5px
4px
線の太さで、
会社のNは塗りつぶした形で描き、製品のアイコンは線で描きます。法レンズのアイコンは120px四方を基準に、持ち手6.5px、外周5.5px、天秤4pxで形を描き分けました。サイトの罫線はこれとは別に、表示の大きさと役割に合わせて太さを決めています。
確定・現在：事実・現在の取り組み
準備中・余地：これから選べるもの
実線：確かなつながり
破線：これから広がるつながり
円と線で、
塗りつぶした円は、確定したことや現在の取り組みを、中が空いた円は、準備中のものやこれから選べる余地を表します。実線は確かなつながりを、破線はこれから広がる関係を示します。トップページの製品の準備状況やロードマップにも、同じ記号を使っています。
レンズで、
この図では、中央の点を注目する対象、実線の円を焦点、破線の外周をこれから調べる範囲として表します。判例や資料の中から必要な情報を探し、その意味や文脈を確かめる。そのためにデータと検索を設計する会社の取り組みを、レンズの形に込めました。
ゴールドは、
ロゴにはゴールドを使い、サイトでは、製品や重要な情報を示す箇所にだけ金色を集めます。本文やリンク、操作するボタンは無彩色にして読みやすくし、金色の強さにも役割に応じて差を付けます。強調する箇所を絞ることで、読む順序を自然に伝えます。
用途別ロゴの
固定配色の濃色背景に金のロゴを標準とし、社名は白色で揃えています。明るい背景向けの版も用意しました。SNSや資料など、使う場所に合わせて選んでください。
ロゴと素材は、資料や記事などでどなたでも自由にお使いいただけます。形と色は変えずに、そのままお使いください。
標準と配色違いをまとめてダウンロードZIPSNSアイコン・背景付き
標準はヘッダーと揃う濃色地です。明るい背景向けの白色地と、目立たせたい場合の金地も選べます。正方形のPNGをそのままアップロードしてください。下の見本は、円形に切り抜いた表示です。
SNSアイコン・背景透過
背景付きと同じ正方形・配置・余白で、背景だけを透明にしました。好きな背景に重ねるときに使えます。市松模様は透過の見本で、画像には入りません。
標準の濃色地に重ねる透過版はゴールドです。白や明るい背景では、見分けやすい墨を基本にしてください。シンボル単体と同じ大きさ・配置で、SNS用には400px版も用意しました。掲載先の背景色に合わせて選び、アップロード後の見え方を確認してください。
横長ロゴ
Webや資料、メール署名に。シンボルと社名を横に並べた基本形です。
標準・濃色背景用・背景透過1600 × 320px
会社名入りロゴ
会社案内や名刺に。「株式会社」を添え、正式な会社名を示す形です。
標準・濃色背景用・背景透過1600 × 400px
縦組みロゴ
資料の表紙や正方形の枠に。シンボルの下に社名を添えた形です。
標準・濃色背景用・背景透過1000 × 800px
シンボル単体
社名が別に表示される場所に。円形の余白を持つ、基本のNです。
ゴールド・背景透過1024 × 1024px
SNSヘッダー
社名と「社会の規範から、くらしの選択まで。」を添えた画像です。ロゴと社名を中央に配置し、標準の濃色背景を先に、明るい背景向けの版も用意しました。どちらも1500 × 500pxです。
メタリック・装飾用
輪郭と中央の余白はそのままに、金属の光を重ねた展示用の素材です。暗い背景の大きな表示や資料の表紙に向いています。ヘッダーや小さなアイコンには、上の標準ロゴを使ってください。
すべて背景透過です。光の表現は静止画に含まれ、背景色によって見え方が変わります。暗い面が背景に埋もれないか、掲載先で確認してください。
製品ロゴのメタリック素材
製品ごとの形を保った、静かな光沢のある展示用素材です。暗い背景で大きく見せるときに使い、ナビゲーションや小さな製品アイコンには標準のフラット版を使ってください。
3製品それぞれに3種類を用意しました。SVGと1024 × 1024pxのPNGは背景透過です。暗い面と細い輪郭の見え方を掲載先で確かめ、縮小して見分けづらい場合は標準版を選んでください。
使うときの目安
- 画像をそのまま使うならPNG、拡大して使うならSVGを選んでください。SVGの文字は図形にしてあるため、フォントを用意する必要はありません。
- ロゴの縦横比と周囲の余白を保ってください。横長の社名が読めない小さな表示には、SNSアイコンが向いています。
- 標準の暗い背景には濃色背景用か白を使ってください。白や明るい背景では、視認性を保つため墨版を基本とし、金を使う場合は濃色の下地に置き、社名入りは濃色背景用を選んでください。背景付きのSNSアイコンとヘッダーを除き、PNGもSVGも背景が透過しています。
- 製品ロゴは16pxほどに縮めると、天秤などの細部が見分けづらくなります。掲載先の実際の大きさで確認し、表示を大きくするか製品名を添えてください。製品のfaviconを作る際は、標準ロゴと区別した小サイズ専用版を検討します。