デザイン分析日記40｜静けさと潜在的な「2」
Webサイトから学ぶ、デザイン分析
こんにちは！
ギャラリーサイトなどで心を動かされたデザインを分析・発信を週一の頻度で発信しております。
デザイン分析し、デザインを詳しくなることで、表現の引き出しを増やすことを目的に取り組んでおります。
もし興味がありましたら、最後までご拝読いただけますとありがたいです！
今回ご紹介するのは、めおと様（https://meoto.jp/）です。
表現の意図についての仮説
今回の「めおと様」のホームページは、子どもがまだいない新婚夫婦を主なターゲットとして、商品設計やブランディングが行われているサービスであるとみて伺えました。
その中でも、都会的で丁寧な暮らしに憧れを持ちながら、都市部やその近郊に住んでいる、生活にある程度ゆとりのある中所得者層を対象にしていると考えられます。無印良品のような、シンプルで自然体のライフスタイルを好む方が親和性高そうと思いました。
そのため、デザインには上品さを持たせつつ、余白を広く取り入れ、肩の力が抜けた風通しのよい雰囲気を演出していると考えました。
また、特別感を強く打ち出すのではなく、日常生活の中に自然となじむ見せ方や、使用風景を見せることで、ユーザーが自分たちの暮らしに置き換えて想像しやすくなるよう設計されていると考えました。
追加で、撮影場所に古民家を使用している点からも、現代的な日本の家庭というより、どこか昭和を感じさせる世界観を意図しているように見受けられました。「サザエさん」の家のような、昔ながらの日本の暮らしを想起させる空間を用いることで、商品の背景にある日本らしさや、家族で食卓を囲む温かな情景を表現していると同時に海外ユーザーへの訴求となっていると考えました。
海外のユーザーに対しては、日本独自の文化や暮らしを感じられ、円安の状況下で、海外への購入者を増やす狙いがあると考えました。（英語ページが用意されていました。）
サイトをどのように感じたのか？（私）
このサイトを見たとき、「上質感・落ち着き・丁寧な暮らし・洗練さ・モダンさ」を感じました。
どの要素で感じたのか各角度から詳細に分析してみました。
① 色
サイト全体は、主に以下の色で構成されていました。
ベースカラー：グレー（#f0eeed）
テキストカラー：ブラック（#080808）・ホワイト（#ffffff）
フッターカラー：ダークブラウン（#443d3e）
全体として色数を抑え、無彩色に近い色で統一することで、洗練された上品な印象と、現代的でモダンな雰囲気を演出していると感じました。一方で、完全な無彩色だけで構成するのではなく、ベースカラーにはわずかに赤みを含んだグレーを使用し、フッターにはダークブラウンを取り入れています。
そのため、無機質で冷たい印象になりすぎず、落ち着きの中にも人の暮らしを感じさせる、柔らかな温かみが加えられています。色数を抑えながらも、微妙な色味の違いによって、洗練と親しみやすさのバランスを取っている点が特徴的だと考えました。
② フォント
日本語の本文には「Shippori Mincho」が使用され、ボタンや一部のタイトルには「Noto Sans CJK JP」が用いられていました。
全体としては「Shippori Mincho」を主軸にしながら、視認性や操作性が求められる箇所にゴシック体を取り入れることで、世界観と使いやすさのバランスを取っているように見えます。
英語フォントについては、文字がSVG化されていたため推測になりますが、「Cormorant Garamond」に近い書体が使用されているように感じました。
「Shippori Mincho」が使用されている理由
「Shippori Mincho」は、繊細で品のある印象を持ちながら、文字の丸みや柔らかな線のつながりから、人の手や温もりも感じさせる書体です。
そのため、単に高級感を演出するだけでなく、落ち着きや親しみやすさを併せ持つ今回のブランドの世界観と、非常に相性が良いと考えました。
また、明朝体特有の余韻や静けさが、サイト全体の広い余白や、穏やかな写真表現とも調和しています。
上質でありながら、堅苦しくなりすぎない印象をつくるために選ばれていると考えております。
「Cormorant Garamond」が使用されている理由
「Cormorant Garamond」は、線の太さのコントラストが強く、細く伸びやかなラインに特徴のある書体です。そのため、一般的なゴシック体やベーシックなセリフ体と比べて、高貴さや洗練、繊細さ、タイムレスな品格を感じさせます。
今回この書体が使用されている理由は、単に高級感や上質感を加えるためだけではなく、ブランド独自の美意識を印象づけるためだと考えました。
大衆的で親しみやすい表現に寄せるのではなく、ブランドの感性に共感する人へ強く届く、少し特別で象徴的な世界観をつくる役割を担っているように感じます。
また、日本語の「Shippori Mincho」と組み合わせることで、和の落ち着きと西洋的なクラシックさが共存し、伝統的でありながら現代的な印象につながっています。
③ 写真
サイト全体では、特別なイベントではなく、二人で過ごす何気ない日常の中にある幸せを表現した写真が多く使用されていました。
キービジュアルでは、二人が一緒に写っている写真や、自然な笑顔が見られる写真が選ばれています。
「この商品を二人で使うことで、どのような時間が生まれるのか」を伝える写真設計になっていると感じました。日常にある幸せ、いいですね、、。
写真の構図については、人物や被写体を画面中央付近に配置しながら、引きの写真を使うことで、周囲に十分な余白を持たせています。
この余白によって、画面に静けさや空気感が生まれ、落ち着いた暮らしや、ゆとりのある時間が視覚的に表現されています。
一方で、商品の特徴を紹介する場面では、寄りの写真を使用し、実際の使用風景とともに、素材感や形状が伝わるように見せています。
ただし、寄りの構図であっても、周囲に余計なものを置かず、十分な余白を確保しています。
そのため、商品に視線を集めながらも、圧迫感や情報過多を感じさせない構成になっています。
商品一覧では、背景や構図、撮影距離を統一することで、整列された印象をもたらし、グッとクオリティの高い、手の込んだ印象を与えてくれます。
また、写真の色味は、明度・彩度ともにやや低く調整されているように見えました。
鮮やかさや華やかさを前面に出すのではなく、色味を抑えることで、静けさや落ち着き、日常になじむ自然な雰囲気を表現されている工夫も見受けられました。
④ レイアウト・余白
※PC表示を基準に観察しています。
サイト全体を通して余白が広く設けられており、そのゆとりが上品さや落ち着きのある印象につながっていると感じました。
特に「めおとについて」のセクションでは、一見すると写真がランダムに配置されているように見えます。しかし、実際にはコンテンツの横幅が約1080pxに制限され、その中でテキスト部分には上下約90pxの余白が設けられています。
このように、テキストは一定のルールに基づいて整然と配置しながら、写真のみをあえて不規則に配置することで、堅くなりすぎない「外し」の表現をつくっていると考えました。
また、写真の比率にも変化があり、縦長の写真、横長の写真、再び縦長の写真という順番で配置されています。異なる縦横比を組み合わせることで、単調にならず、画面全体にリズムが生まれています。
「大切にしていること」のセクションでも、テキストは約470pxの幅に収められ、周囲の余白も明確に設計されています。一方で、写真はランダムに見える配置が採用されていますが、よく見ると斜めのラインに沿うように並べられており、視線が自然に流れる構成になっています。
写真は無秩序に置かれているのではなく、一定の規律を保ちながら、意図的に崩して配置されています。
このような構成によって、サイト全体の上品さや整然とした印象を保ちつつ、シンプルになりすぎない動きや変化が加えられています。その結果、ユーザーを飽きさせず、自然に次の情報へ視線を誘導するレイアウトになっていると感じました。
また、文字間隔が広めに設定されている点も特徴的です。
文字同士の間にゆとりを持たせることで、文章に抜け感や静けさが生まれ、サイト全体の余白設計とも調和しています。この細かな文字組みの調整によって、上品さや洗練された印象がより強まり、サイト全体の完成度を高めていると考えました。
最後に
今回は、ブランドコンセプトの表現方法が特に印象的だったサイトとして分析を行いました。
サイト全体を通して、「めおと」というブランド名にちなみ、「2」という数字を意識したデザインが随所に取り入れられている点が興味深いと感じました。直接的に数字を見せるのではなく、二人で過ごす情景や写真の構成などを通して、世界観を崩さずに潜在的に「2」を表現している点が特徴的でした。
ブランドコンセプトを視覚的なモチーフへ落とし込み、サイト全体に一貫して反映させる手法は、デザイン表現を考えるうえで非常に参考になりました。
また、余白を生かしながら写真を不規則に見せるレイアウト構成も特徴的で、整然さと動きのバランスについて多くの学びがありました。今後は、模写も行いながら、さらに研究を深めていきたいと思います！
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
