デザイン分析日記41｜
Webサイトから学ぶ、デザイン分析
こんにちは！
ギャラリーサイトなどで心を動かされたデザインを分析・発信を週一の頻度で発信しております。
デザイン分析し、デザインを詳しくなることで、表現の引き出しを増やすことを目的に取り組んでおります。
もし興味がありましたら、最後までご拝読いただけますとありがたいです！
今回ご紹介するのは、mud.inc様（https://mud.co.jp/）です。
表現の意図についての仮説
mud.inc様は、企画やWeb制作、グラフィック、空間など、幅広い領域を扱うクリエイティブスタジオです。
そのため、このホームページを見る人としては、私のようなデザイナーやクリエイターだけでなく、企画やホームページ制作、ブランディング、空間づくりなどの依頼を検討している企業の担当者も想定されていると考えました。
クリエイティブスタジオのホームページは、それぞれの会社が持つ個性や思想が強く表れます。その中でもmud.inc様のサイトからは、ラフさや「いなたさ」を感じさせながらも、野暮ったくは見えない、飾らないかっこよさを感じました。
整いすぎたスタイリッシュさではなく、少し力の抜けた表現や、あえてつくり込みすぎない見せ方によって、独自の魅力が生まれているように思います。
このようなラフさや親しみのある表現をデザインに取り入れている理由の一つとして、相談のしやすさや、依頼する際の心理的なハードルを下げる意図があるのではないかと考えました。
依頼者によっては「形が構想されていない企画でなければ相談しにくい」「専門的な言葉で説明できなければならない」と感じることがあり、お問合せにしづらさを産む場合もあることや、世界観がしっかりしているクリエティブスタジオだとそもそもの予算的に合わないとして、相談を躊躇う可能性も考えられます。
しかし、mud.inc様のサイトには、堅く整えすぎない表現や、少しユーモアを感じさせるビジュアルが取り入れられることで、自由度の高い、ユームアの企画が生み出せるのではないか、相談しやすい企業なのではと考えられます。
一方で、ラフさやいなたさを強く出しすぎると、野暮ったい印象になり、クリエイティブスタジオとしての洗練や現代的なかっこよさが失われる可能性もあります。
また、サイト全体を通してのイラストは、抽象的な表現かつ、ラフぽっさが多く使われている点も特徴的でした。
この抽象性は、単に個性的な世界観をつくるためだけのものではなく、mud.inc様の仕事の姿勢そのものを表しているのではないかと考えました。
「何か面白いことをしたい」「今までとは違う見せ方をしたい」「うまく説明できないけれど、変えたい」といった、曖昧な構想から始まることも多いと思います。
mud.inc様のサイトでは、そうした言葉になりきらない感覚や、まだ輪郭の定まっていないアイデアを、イラストやデザインによって視覚化できることを、サイト自体で表現しているように感じました。つまり、このホームページは制作実績を紹介するだけではなく、「曖昧な状態からでも、一緒に形をつくっていける」というスタジオの姿勢を伝える役割も担っているのではないかと考えました。
サイトをどのように感じたのか？（私）
このサイトを見たとき、私は「自由度の高さ」「飾らないかっこよさ」「抜け感」、「いなたさ”とモダンさが共存した印象」を受けました。
なぜそのように感じたのか、サイトを構成する要素ごとに分析しました。
① 色
サイト全体は、主に以下の色で構成されています。
ベースカラー：グレー（#f2f2f2）
テキストカラー：ブラック（#000000）
フッターカラー：ダークブラウン（#734129）
全体の色数を抑え、無彩色に近い配色で統一することで、洗練された上品さと、現代的でモダンな雰囲気を演出していると感じました。
特に印象的だったのが、フッターに使用されているダークブラウンです。
フッターまでグレーやブラックなどの無彩色でまとめた場合、統一感は生まれるものの、全体的に硬く、モダンな印象に寄りすぎてしまう可能性があります。
そこで、フッターに温かみのあるダークブラウンを取り入れることで、サイトに程よいカジュアルさや抜け感を加えているのではないかと考えました。
フッターまで無彩色にまとめてしまうと全体通して、カジュアルな抜け感を演出できず、ただモダンなサイトになってしまいますが、フッター箇所に一つアクセントを持ってくることで、抜け感につながり、全体のホームページの世界観がグッと上がるなと考えました。
② フォント
日本語の本文には「Zen Kaku Gothic New」が使用されており、英語部分には「Public Sans」に近い書体が使用されていると考えました。
「Zen Kaku Gothic New」が使用されている理由
「Zen Kaku Gothic New」は、ゴシック体でありながら、角や線にわずかな丸みがあり、モダンな印象の中にも柔らかさや温かみを感じさせる書体です。また、ひらがなやカタカナが漢字に対してやや小さく設計されているため、文章全体に整然としたリズムが生まれ、読みやすく見せられる点も特徴です。そのため、情報をすっきりと伝えながら、堅苦しさを感じさせないデザインを実現できます。
サイトが持つ「モダンさ」と「親しみやすさ」、そして「抜け感」を両立させるために、このフォントが採用されているのではないかと考えました。
「Public Sans」に近い書体が使用されている理由
「Public Sans」は、癖が少なく、情報を明確に伝えやすい欧文サンセリフ体です。個性を強く主張するフォントではないため、文字そのものが目立ちすぎず、他のデザイン要素を邪魔しないのが特徴的です。コーポレートサイトでは、デザインの印象だけでなく、「どのような企業なのか」「何を提供しているのか」といった情報を、見ている人に伝える必要性があります。
そのため、英語部分にも視認性が高く、シンプルで現代的な書体を使用することで、モダンさを際立ててつつ、公共性・公平性もアピールでき、相談しやすさにも繋がっていると考えました。
③ 写真・イラスト
写真に関しては、コーポレートサイトであるため、実績のものがベースになりますが、掲載されている実績は、Webやゲーム、空間デザインなど幅広い領域にわたっており、「さまざまな分野のデザインを共創できる企業であること」を伝える意図があると考えました。
写真の構図については、余計な情報が少なく、被写体や制作物が中央付近に配置されたものが多く選ばれています。ユーザーの視線が自然と実績へ向かう構図になっているため、制作物の魅力や特徴をアピールできる構図でもあるもので、わかりやすさを担保していると考えました。
イラストに関しては、手描きらしいラフさのある表現が採用されています。
線を主軸として描かれており、形や大きさが均一ではなく、あえて不揃いな印象に仕上げられている点が特徴です。
また、具体的な人物や物をそのまま描くのではなく、抽象度の高いモチーフが多く使用されています。
これは、まだ明確な形になっていない考えやアイデアを、クライアントと一緒に整理し、デザインとして形にしていくという、企業の「共創」の姿勢を表しているのではないかと考えました。完成されたものを提示するのではなく、曖昧な状態から新しいものを生み出していく過程を、自由で抽象的な線によって表現しています。
さらに、手描きのイラストには、アイデアを形にしていくときの楽しさや、何が生まれるか分からないワクワク感を演出する役割もあると感じました。
サイト全体には、写真や文字による整然としたモダンな印象がありますが、そこにラフなイラストが加わることで、硬さがやわらぎ、人の手によってつくられているような温度感が生まれているなと考えました。
④ レイアウト・余白
※PC表示を基準に観察しています。
サイト全体を通して、タイトルと本文の文字サイズに大きな差があり、ジャンプ率の高いレイアウトになっていました。
タイトルを大きく、本文を小さく見せることで、情報の優先順位が明確になり、ページ全体に強いメリハリが生まれていている構図になっています。
同じような情報量が続くと、画面が単調に見えやすくなりますが、文字サイズや要素の配置に変化をつけることで、スクロールしていても飽きを感じさせない工夫が施されていると考えました。
また、要素が左から右へ、斜め方向に展開されるように配置されており、ユーザーの視線が自然にCTAへ移動する構図になっています。
タイトルは各セクションで最も伝えたい情報であるため、その周辺には広い余白が設けられています。余白を十分に取ることで、周囲の情報との距離が生まれ、ユーザーの視線が自然とタイトルへ集まるようになっています。
また、この余白は、単にタイトルを目立たせるだけでなく、言葉をゆっくりと受け取れる空気感もつくっています。
大きな文字によってメッセージを力強く伝えながらも、余白と柔らかい印象のフォントを組み合わせることで、強く押しつけるのではなく、優しく語りかけられているような印象を受けました。
つまり、このレイアウトは「声を大きくして伝える力強さ」と「相手に寄り添って語りかける柔らかさ」を両立していると感じました。
文字の大きさだけでなく、余白や配置によってメッセージの伝わり方まで設計されており、とても参考になるレイアウトだと考えました。
最後に
今回は、mud.inc様のホームページを分析してきました。
mud.inc様のサイトでは、崩した表現を取り入れながらも、レイアウトや余白、タイポグラフィなどの基礎部分は丁寧に設計されています。
そのため、単にラフに見せているのではなく、整える部分と崩す部分のバランスが細かく計算されているように感じました。この絶妙なバランス感が、mud.inc様らしい「飾らないかっこよさ」につながっているのではないでしょうか。
mud.inc様のホームページの雰囲気は、デザインのことや、企業の雰囲気を深く理解しているからこそ生み出せる、計算されたデザインであるため、分析すればするほど味が出てきました。
模写などを通して、見た目の雰囲気だけを再現するのではなく、「どこを整え、どこを崩すのか」「なぜこの余白や配置が必要なのか」といった設計の意図まで意識しながら、制作の参考にしていきたいと思います。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
