デザイン分析日記21
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。週1〜2回のペースで続けていきます！（熱がこもりすぎると続かない気がするので…！）
今回ご紹介するのは、IMA株式会社様（https://ima-inc.world/）です。
①なぜ良いサイトだと感じたのか？
このサイトを見たとき、真っ先に感じたのは以下のような印象でした：
第一印象：インパクトと勢い
キャッチコピー「今をかきまぜろ」、そして会社名にも含まれる「今」と「かき混ぜる」という言葉が、サイト全体のイメージや世界観を強く形作っていると感じました。
「今」から伝わる勢いの表現
「今すぐ行動を起こそう」というメッセージが、ビジュアルやアニメーションからもダイレクトに伝わってきます。
例えば：
文字間をあえて詰めたタイポグラフィにより、緊迫感やスピード感を表現
文字の下に敷かれた赤いボックスも余白を少なくすることで、圧をかけたような「勢い」を演出
アニメーションは全体的に素早く展開され、「即時性」を強調。
色味に関しても、「赤」は情熱・熱意・エネルギーを象徴し、サイト全体に熱さが宿っているように感じました。さらに、フォントは太め（ボールド）で、ジャンプ率も高めに設計されており、視覚的にも強いインパクトがありました。
「かき混ぜる」の表現
もう一つのキーワード「かき混ぜる」は、FV（ファーストビュー）の動きに顕著に表れていました。
たとえば：
回転する円形のビジュアル
文字が回転しながら登場するアニメーション
こうした動きのある演出によって、静的な構成では得られないかき混ぜるを視覚的に表現していると感じました。
総評
全体を通して、「勢い」「インパクト」「情熱」「本気度」といったエネルギッシュな印象がしっかりと伝わってきました。単なる装飾ではなく、サイトのあらゆる要素に意味と意志が込められており、ビジュアル × タイポグラフィ × アニメーションの三位一体でブランドのメッセージを届ける設計がされていると感じました。
②このサイトはどのターゲットに向けて作られている？（仮説）
ターゲット層としては、20〜60代の男女問わず、幅広い年代層に向けて設計されていると考えられます。特に、
新規事業を立ち上げたい、または既存事業をさらに発展させたいと考えている顧客企業
共創・連携を視野に入れたパートナー企業
社会貢献性の高い領域で働きたいと考える転職希望者
といった層に強く訴求しているように思います。
上記のターゲットになぜデザインが刺さると考えるのか？
このWebサイトからは、「情熱」「本気度」「スピード感」といった、エネルギッシュな印象が一貫して伝わってきます。これらの要素は、新規事業の立ち上げや、社会変革に向けて挑戦しようとする人・企業にとって非常に魅力的で、「一緒に走ってくれそうなパートナー像」を想起させると感じました。
また、サイト全体を通して、「想い」や「熱量」がビジュアルや構成からダイレクトに伝わってきます。
特に、
大胆な色使い（赤）による情熱的な印象
タイポグラフィ設計による強いメッセージ性
素早く洗練されたアニメーションによる行動喚起
といった表現を通じて、単なる見た目のデザインではなく、ビジュアル × タイポグラフィ × アニメーションの三位一体でブランドの理念や姿勢がしっかりと設計されていると感じました。
そのため、このような「勢いのあるメッセージ」に共鳴しやすいターゲットには、自然と心に響くサイトだと考えます。
サイトで使われているフォントに関して
poppins（ポピンズ）
■ 特徴
幾何学的（ジオメトリック）な字形：
特に丸文字（OやQなど）がほぼ完全な円で構成されており、近代的かつポップな印象。複数のウェイト展開：
Thin（100）から Black（900）まで9種類があり、見出しから本文まで幅広く使えます。
■ 向いている用途
英語サイトの見出し、ロゴ、ボタン、アイキャッチなど
ポップ、ミニマル、モダンな印象を出したいとき
こぶりなゴシック（Koburina Gothic）
■ 特徴
小さめの仮想ボディ（字面）：
同じポイント数でも文字が小さく見えるため、行間に余裕を持たせたいデザインに最適。可読性が高くクセが少ない：
現代的でフラットな印象。明朝体やデザイン書体と併用しやすい。上品な印象：
ゴシック体でありながら、「無機質になりすぎない」バランスがあり、ナチュラルで繊細。
■ 向いている用途
雑誌、書籍、パンフレットなどの本文や小見出し
医療・教育・文化系の落ち着いたデザイン
和文主体のWebサイトや紙媒体で「余白を活かしたデザイン」に合う
今回使用しているフォントに関しては、フォント以外の箇所での表現の主張が強いかつ、も時間に関してもかなり狭くカーニングされていることからも、見えやすさを担保するために、選定を行なったのではないかと考えた。
気になったセクションを見ていく。
1.FV
FVのこのインパクト。ファーストビューを見た瞬間、一気にこの企業様の世界観に引き込まれる感覚がありました。
まさに、「今をかきまぜろ」というキャッチコピーがそのままビジュアルとして具現化されているような印象を受けました。
中でも注目したのが、「かきまぜろ。」のコピーの視線誘導の工夫です。文字の後ろに文言を挿入する構成になっており、ユーザーの目線が自然と次の要素へと流れるよう設計されていました。
このような構成は、単にインパクトを与えるだけでなく、ユーザーを的確に導く視線誘導のテクニックとして非常に参考になると感じました。今後、自身のデザインに応用してみたいと思える要素のひとつです。
2.セクション
事業紹介セクション：1枚目のカードデザインの「見やすさ」の理由
事業説明セクションにある写真付きカードに、非常に高い「見やすさ」を感じました。なぜそう感じたのか、以下のように要素ごとに分析してみました。
■ タイポグラフィ設計
「Next Impact Lab」（タイトル）
※画像として実装されており、高さは 約270pxサブタイトル「過去から未来へ〜」
フォントサイズ：36px／文字間：-1.8px／行間：45px本文テキスト
フォントサイズ：16px／行間：22.3776px
■ 余白設計
タイトル「Next Impact Lab」とサブタイトルの間：60px
サブタイトルと本文テキストの間：16px
横に配置されている丸ボタンとの間：72px
■ 見やすさの理由
これらの値を見ていくと、それぞれが「8の倍数」をベースに設計されていることが分かります。ルール化された設計が施されてり、視覚的に整った印象を与える要素だと考えました。
文字サイズ・余白・配置のすべてに一貫性があり、視線誘導がスムーズかつストレスが少ないため、「見やすさ」を感じたのだと分析できました。
ABOUT・SERVICEの見せ方について
2つ目の写真にある ABOUTとSERVICEの見せ方に、とても面白さを感じました。単に横並びに要素を配置するのではなく、あえて斜めにレイアウトすることで、画面全体に動きが生まれ、単調さを回避しているように思います。
特に印象的だったのは、タイトルも斜めに配置されている点です。これはただの装飾ではなく、
程よい余白を生み出す
要素同士の干渉を防ぐ
余白を持たせることで、ユーザーの目線を自然に誘導する仕様
といった、視線誘導やリズム感のある情報設計に基づいた配置だと感じました。
このように、構造とビジュアルの両面で設計意図が読み取れる構成は、非常に参考になります。
3.セクション
私は、Webサイト全体の印象を大きく左右する要素のひとつが「フッター」だと考えています。特に、デザイン全体が洗練されていればいるほど、そのクオリティを保つ上で、フッターの完成度が重要な役割を果たすと感じています。
最近では、情報量をあえて抑え、シームレスでミニマルな印象を与えるようなフッターデザインが増えてきた印象があります。
以前の学びとして、フッターにおいては「情報を詰め込む」のではなく、伝えるべき内容を選び抜き、必要な情報だけを美しく配置することが重要だということを学びました。
今回のサイトでは、その考え方がまさに体現されており、印象的なキャッチコピー「今をかきまぜろ」が主役となる構成になっていると感じました。
そのため、
キャッチコピー
シンプルなメニュー
ロゴ
という、最小限かつ洗練された情報構成で設計されており、ブランドの世界観を強く印象づける設計意図が読み取れるフッターになっていると考えました。
制作者としての学びと応用
今回IMA株式会社様のサイトを分析する中で、ビジュアル・タイポグラフィ・アニメーションの一体設計がいかに「ブランドメッセージを体現」する上で重要か、強く感じました。
以下に、制作者として特に学びが大きかった点を整理してみます。
1. ブランドの核を視覚に落とし込む構造設計
「今をかきまぜろ」というキャッチコピーが、タイポグラフィ・モーション・配色すべてに一貫して反映されていた点は非常に印象的でした。
特に、「言葉の意味」を視覚的に翻訳する力が重要だと実感。今後の制作では、言葉とビジュアルの関係性をより深く考察する姿勢を意識していきたいと思いました。
2. 余白設計と視線誘導の技術
文字の出現タイミングやアニメーションによる視線の誘導設計も秀逸で、「見せたい情報をどう届けるか」のヒントが多く得られました。
要素の並びや余白の設計にルールを持たせることの重要性を再確認しました。
3. 意図ある「斜め」や「動き」の取り入れ方
ABOUT・SERVICEのような斜めの配置は、単なる装飾ではなく、目線の導線と画面内のリズムを作る役割を果たしていました。
4. フッター設計から学ぶ“取捨選択”の美学
情報量を抑えつつ、「今をかきまぜろ」＋メニュー＋ロゴのみで構成されたミニマルなフッター。
伝えたい世界観に合わせて、情報整理の視点をもっと大切にしたいと思います。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
30回まで目標に続けていきますため、何卒よろしくお願いいたします。
