朝晩の風が少しずつ涼しくなって、夏の終わりが近いことに気づかされる今日この頃です。
今月も、私（大道）が個人的に気になったサイトを紹介していきます。
つくる側の視点で気になったウェブサイトを、つくる側の目線で少しずつ言葉にしていくこの企画。 第七回目です。今回も対談形式でサイトを取り上げていきます。
今回ご紹介するのはこちら。
生・チー【生チーズ食感 in サクサクパイ】｜株式会社湖池屋】
https://nama-chee.koikeya.co.jp/
「生・チー」という名前が、もう半分デザインしている
まほ： まず名前ですよね。「生・チー」。中黒が入っているのが気になって、思わずクリックしました。
ひなこ： 「生チーズ食感 in サクサクパイ」という説明が別にあって、商品名のほうは思い切り省略されているんですよね。フルで説明する名前と、呼びやすい名前を、最初から分けている感じがします。
まほ： 略称のほうを正式名称にしちゃった、みたいな。
ひなこ： そうなんです。友達がすでにそう呼んでいるような名前を、企業側から先に出している。中黒が入っていることで、口に出すときに「なま・チー」と一拍おける。声に出したときのリズムまで含めて設計されているように見えました。
まほ： サイトのロゴも、その名前をそのまま大きく置いていますよね。
ひなこ： ファーストビューでやっていることが、実はすごく少ないんですよ。商品名と、パッケージと、断面のシズル写真。それだけ。名前が強いから、周りで説明しなくても成立している。
まほ： 名前が強いと、デザインは引けるんですね。
ひなこ： 逆に言うと、名前が弱いとデザインで補わないといけなくなる。ネーミングの段階で、デザインの半分はもう決まっているのかもしれないなと思いました。
ロゴの「ー」は、チにくっついている
ひなこ： サイトのロゴを見ると中黒がないんですよ。しかも最初、「生チ」の2文字に見えたんです。
まほ： あ、わかります。私も一瞬そう思いました。
ひなこ： よく見ると、「チ」の横に長い横棒が伸びていて、それが伸ばし棒なんですよね。独立した1文字として置かずに、チの一部みたいに繋げてある。
まほ： 言われないと、伸ばし棒だと気づかないですね。
ひなこ： そこがうまいなと思いました。「生・チー」ってカタカナと記号が続くので、そのまま組むと横に間延びしてしまうんですよ。でも伸ばし棒をチにくっつけてしまえば、字数が減ったように見える。
まほ： 情報は削っていないのに、短く見える。
ひなこ： はい。しかも縦に2段で組んであるので、正方形に近いかたちにまとまっている。ロゴって、収まりのいい形にできるかどうかで、置ける場所の数が変わってくるんですよね。
まほ： 「生」の下に、丸で囲った「なま」も付いていますよね。
ひなこ： ルビですね。「生」って、なま・せい・き、と読みが多い字なので、これがないと「せいチー」と読まれる可能性がある。しかも、この商品でいちばん言いたいのは「生チーズ食感」の”なま”のほうなので、そこは絶対に外せない。
まほ： 削れるところは削って、削れないところだけ足す、みたいな。
ひなこ： ロゴって、文字数が少ないほど強くなるんですけど、少なくすると今度は読めなくなるんですよね。伸ばし棒はくっつけて減らして、読みはルビで足す。増減の判断が、一文字ずつされている感じがします。
まほ： 書体も、角がなくてやわらかいですね。
ひなこ： 太くて丸い手書き風なので、チーズのとろっとした感じと、パイのふくらみの両方に見える。商品の特徴が、書体そのものに入っているんだと思います。
まほ： 商品名のほうは、ちゃんと「生・チー」で中黒が入るんですよね。
ひなこ： ページのタイトルや、下のPRODUCTSでは「生・チー」に戻ります。正式な表記と、ロゴとしての表記を分けて持っているんだと思います。
まほ： 同じ名前でも、置く場所で形が違うんだ。
ひなこ： ネーミングって決めて終わりに見えて、どこでどう表記するかまで含めてデザインなんだなと思いました。
「うれチ～Point」を、ちゃんとデザインに乗せている
まほ： 商品特徴のところ、「うれチ～Point 1・2・3」って書いてあるんですよね。あれ、口に出すとちょっと恥ずかしい（笑）。
ひなこ： 「うれしい」と「チー」をかけた、完全なダジャレですよね。でも、あの見出しだけ画像で組まれていて、文字のあしらいもきちんとつくり込まれているんです。
まほ： テキストで軽く置くんじゃなくて、ちゃんと絵にしてある。
ひなこ： そこが大事だと思っていて。ダジャレって、扱いが雑だと「とりあえず言ってみただけ」に見えるんですよ。でもこのサイトは、フォントも装飾も本気でつくっている。だから照れずに読める。
まほ： 本気でやると、ふざけていても信用できるんですね。
ひなこ： はい。しかも、その3つのポイントが手描き風の線でつながれているんです。「なめらかフィリング」「パイ生地」「個包装」を、線でひと続きに見せている。
まほ： 商品の説明なのに、図解っぽく見えない理由はそれか。
ひなこ： スペックを箇条書きで並べると急に真面目な顔になってしまうところを、線一本で「たのしい話の続き」にしている。あの線、実務でもすぐ真似したいなと思いました。
まほ： 線のかたちも、それぞれ違うんですよね。とろけたソースみたいな線と、パイっぽい線と。
ひなこ： そうなんです。3本とも別々に描き起こしてある。装飾ではなく、その項目の内容を表す線になっている。ここは、地味だけどかなり手間のかかっているところだと思います。
商品を2つしか置かない潔さ
まほ： PRODUCTSのところ、メルティーチーズとトリュフチーズの2つだけなんですよね。
ひなこ： 少ないですよね。しかも、それぞれの説明が1行ずつしかない。「濃厚なコクと後引く余韻」「芳醇なトリュフとカマンベールの絶妙なハーモニー」くらいで、原材料もカロリーも書いていない。
まほ： 詳しいことは、リンク先の商品情報ページに行ってね、という。
ひなこ： ブランドサイトと商品情報ページの役割を、きれいに分けているんだと思います。ここでは「食べたい」と思ってもらうところまでやって、確認したい人だけ本体サイトへ渡す。
まほ： 全部このページで説明しなくていいんだ、というのは、けっこう勇気がいる判断ですよね。
ひなこ： そうなんですよ。クライアントワークだと「この情報も入れてください」が積み重なって、気づいたら全部入りになりがちで。このサイトは、出口を「商品情報」と「オンラインショップ」の2本に絞りきっている。迷わせない構成だなと思いました。
まほ： 出口が少ないと、逆に押しやすいですね。
ひなこ： 導線を増やすことが親切とはかぎらない、というのは、頭ではわかっていてもなかなか実行できないところなので、見習いたいです。
「甘くない」という引き算が、最後にコピーになる
まほ： ページのいちばん下に「ありそうでなかった、甘くないご褒美パイ！」というコピーが出てきますよね。
ひなこ： これ、商品の一番の特徴を「ない」で言っているんですよね。チーズがおいしい、でも、新食感でもなく、「甘くない」。
まほ： たしかに、パイのお菓子って言われたら、チョコとかカスタードを思い浮かべます。
ひなこ： そこなんだと思います。パイ菓子は甘いものが多いなかで、甘くないパイとしてのポジションを取りにいっている商品なんですよね。だから「甘くない」が、そのまま一番の売り文句になる。
まほ： でも、それを最初に言わないのが面白いですね。
ひなこ： ここが上手いなと思ったところで。最初に「甘くないパイです」と言われても、ピンとこないと思うんですよ。さんざんシズルを見せられて、チーズの話をされたあとに言われるから、「たしかに、こういうの無かったな」と腑に落ちる。
まほ： 順番で納得させているんですね。
ひなこ： 説明を先に置くか、後に置くかで、同じ一文の効き方が変わる。これは前回の対談でも似た話が出ましたけど、情報の重さを順番で調整するという意味では共通していますね。
最後にキャラクターが出てくる順番
まほ： そのコピーと一緒に、キャラクターも出てきますよね。
ひなこ： 最初にキャラを立てるのではなくて、シズルと商品を見せきったあとに、いちばん最後に出てくるんです。だから、キャラクターが説明役ではなく、感想役になっている。
まほ： 食べたあとの気持ちを代弁してくれてるんだ。
ひなこ： そう見えました。キャラクターって、置く位置でずいぶん役割が変わるんですよね。上に置けばガイド、途中に置けばツッコミ役、最後に置けば「わかる〜」の担当になる。
まほ： キャラを置く位置って、あんまり意識したことがなかったです。
ひなこ： 私も、キャラクターを入れるかどうか、かわいいかどうか、みたいな話ばかりしてしまいがちでした。でも、どこに置くかで、ユーザーとの距離まで決まってしまうんだなと。
まほ： 最後にいてくれると、押しつけがましくないですね。
ひなこ： はい。最後の最後に「うれしい」を代わりに言ってくれる存在がいると、読み終わりの気分がよくなる。そういう役割の置き方もあるんだなと思いました。
Gear8でも
今回取り上げた「生・チー」のブランドサイトは、ページ数も情報量も決して多くありません。それでも印象に残るのは、「これを何と呼ぶか」が最初にしっかり決まっているからだと思います。
声に出したくなる短い名前があるから、ファーストビューで説明しなくていい。 名前のトーンが決まっているから、「うれチ～Point」というダジャレを本気でつくり込める。 言いたいことがはっきりしているから、商品情報もカロリーも、思い切って外に出せる。
デザインの引き算は、センスの話に見えて、実は判断基準がはっきりしているかどうかの話なのだと、改めて感じました。何を足すかより、何を足さないかを決められること。その基準になっているのが、この場合は名前と言葉でした。
デザインのご相談をいただくとき、「もっと目を引くようにしたい」「今っぽくしたい」というご要望をいただくことがあります。もちろんそれも大事なのですが、見た目の強さが、名前や言葉の強さから生まれているケースも多いように思います。
伝えたいことがたくさんあるけれど、どれを主役にすればいいかわからない。 商品には自信があるけれど、うまく言い表せない気がする。
そんなときは、まず「これを何と呼ぶか」「どの順番で言うか」から一緒に考えるのが近道かもしれません。
gear8では、サイトのデザインだけでなく、商品やサービスの呼び方、伝え方の順番から一緒に整理していくお手伝いをしています。
もし今回の対談を読んで、自社の伝え方について少しでも引っかかるものがあれば、いつでも気軽に相談してください。
