SHIMANEKO DESIGN | The Ultimate Guide to Shop Cards

Design Scene:
あるクライアントがカフェであなたの名刺を受け取ります。会話は弾みましたが、後日、財布から名刺を取り出したとき、クライアントは思います。
「あれ？これ、何屋さんだっけ？連絡先が読みづらいな…まあいいか」

この**「まあいいか（機会損失）」**を防ぐのが、デザインの役割です。特に駆け出しのチームにとって、ショップカードは**「最強の営業マン」**でなければなりません。

Current Design Review

ご提示いただいたCanvaのデザイン案（15パターン）を、編集部が徹底的に分析しました。素晴らしい点と、改善ポイントを整理します。

MIM Logo

Good Point

ロゴのポテンシャル

「MIM」の形状を猫耳に見立てたロゴは秀逸です。視認性が高く、一度見たら忘れません。このロゴは小さくしても潰れにくいので、名刺に最適です。

Photo BG

To Improve

写真上の文字視認性

猫の写真の上に直接文字を置いている案（No.9など）は、背景の色と文字色が同化して読みづらいです。文字の下に半透明の白帯を入れるか、写真を暗く加工しましょう。

Margin Layout

Danger Zone

余白の魔術

いくつかの案で、文字が端に寄りすぎています。印刷時の断裁ズレで文字が切れるリスクがあります。最低でも端から5mmは文字を配置しない「セーフティゾーン」を守りましょう。

Design Logic & Psychology

1. Zの法則と情報の優先順位

人の視線は、左上から右下へ「Z」の字を描くように動きます。これを名刺に応用します。

左上 (Start): ロゴマーク、または屋号（一番目立たせたいもの）
中央 (Main): 名前、肩書き（しまねこデザインチーム）
右下 (End): 連絡先（QRコード、URL、電話番号）

現状の案では、中央揃えが多いですが、要素が増える場合はこの「Z」を意識するとスッキリします。

デザインは「声の大きさ」のコントロールだ。

全てを太字・大文字にするのは、ずっと叫んでいるのと同じです。
「しまねこデザイン」と「URL」が同じ大きさではいけません。
主役（ロゴ）は叫び、脇役（住所）はささやく。このメリハリが「プロっぽさ」を生みます。

Print Tech Specs (印刷の罠)

画面と紙は違う！

モニターは光で色を表現しますが、紙はインクです。以下の現象が必ず起きます。

色が沈む: モニターで見る鮮やかな「ネオン系オレンジ」や「鮮明な緑」は、印刷すると少し濁って暗くなります。CMYK変換で色味を確認してください。
文字が潰れる: 明朝体や細いフォントは、6pt以下になるとインクが滲んで読めなくなります。基本は7pt以上、住所などは6pt以上を死守してください。
QRコードの罠: QRコードは小さすぎるとスマホが認識しません。推奨サイズは「15mm × 15mm」以上です。

Final Checklist Before Print

入稿前に、チームで読み上げて確認してください。

余白は十分か？
上下左右、切れてはいけない文字が端から3mm以上内側にあるか。

QRコードは読み取れるか？
画面上ではなく、一度プリンターで原寸印刷してスマホで読み取れるかテストしたか。

「何ができるか」明確か？
「Design Team」等の記載があり、ただの猫カフェと間違われないようになっているか。

フォントサイズは適切か？
住所やURLが小さすぎて、虫眼鏡が必要になっていないか（高齢のクライアントも想定）。

Web Site Template for Reference

最後に、しまねこデザインのポートフォリオサイトを作る際に使える、シンプルでかわいい配色のCSS変数をプレゼントします。

/* Shimaneko Brand Colors */
:root {
  /* メイン：温かみのあるオレンジ（ロゴのイメージ） */
  --shimaneko-orange: #FF8F5E;
  
  /* サブ：清潔感のある白 */
  --shimaneko-white: #FAFAFA;
  
  /* アクセント：落ち着いたグレー（文字用） */
  --shimaneko-text: #4A4A4A;
  
  /* サブアクセント：自然なグリーン（若草色） */
  --shimaneko-green: #A3D2CA;
}

body {
  font-family: 'Zen Maru Gothic', sans-serif; /* 丸ゴシックで親しみやすく */
  color: var(--shimaneko-text);
  background-color: var(--shimaneko-white);
}

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 柔らかい影 */
  border: 1px solid #eee;
}