株式会社monomode デザイン分析

MV_monomode.co.jp

フォント

本文

  • “Noto Sans JP”, “游ゴシック Medium”, “Yu Gothic Medium”, 游ゴシック体, YuGothic, “ヒラギノ角ゴ Pro W3”, メイリオ, sans-serif
  • color: #333
  • bodyはfont-size:1.6remだが、各セクションで細やかに設定されている
  • line-height: 2

英語タイトル

  • Roboto, “Noto Sans JP”, “游ゴシック Medium”, “Yu Gothic Medium”, 游ゴシック体, YuGothic, “ヒラギノ角ゴ Pro W3”, メイリオ, sans-seri
  • color: #fff
  • font-size:5.5rem
  • font-weight: 300
  • letter-spacing: .02em
POINT

英語タイトルは1文字ずつタグで囲まれていて、下線と共に左から流れるようなアニメーションが美しい。全体的にアニメーションの動きが統一されていてサイト全体 読み進めやすい

カラー

イメージワード:落ち着き

コンテンツ

ヘッダー

  • グロナビ + ハンバーガーメニュー + 右側に縦並びでContactとService
  • height:88px
  • font-size:15px
  • background-color: rgba(248,248,248,.7)

ホバーアニメーション

ハンバーガーメニューでもグロナビと同様の内容が含まれていて、珍しいタイプだと感じた
右列のContactとServiceはページ追随しても常に表示されていて、Serviceは右列だとページに直接遷移、ヘッダーは細かくページを選択できるように分けられている


メインビジュアル

MV_monomode.co.jp
POINT

ロゴは丸めで可愛らしいが、メインビジュアルは斜めに分割されていて、スタイリッシュ。
右側の男性と女性の画像の切り替わりアニメーションは、左側から斜めに流れて最後の方はスピードダウンして余韻が残るなめらかな動き。左側のオーロラのような背景と相性よく感じるるアニメーションがサイト全体で統一されていて美しい。
女性の服は黒/男性の服は白を着用されていて、MV以降のセクションともカラーが統一されている

The elements our team has are these
Creative Production , Marketing Agency , More…
デジタル・ITをベースにあらゆるビジネス課題を解決するチームが在籍します

1行目が、イタリック調・色も#777で、シンプルなあしらいになっている

About Us 私たちについて

News&Topics お知らせ トピックス

Service / Solution サービス紹介

RECRUIT 採用サイト(リンク)

Works サービス紹介

フッター:Contact / Recruit / 会社情報 / ナビゲーション

  • 黒・グレー・白の無彩色でシンプルにまとめられている。
    背景・・・・・・・#222222
    項目タイトル・・・#FFF / 1.7rem
    テキスト・・・・・#999999 / 1.3rem
    「テキストは白じゃないと視認性が悪い」という固定観念があったので、グレーで見やすいのは新発見だった。
  • ContactとRecruitのボックスや、他セクション のService・Worksもborder-radius:7pxで統一されている。

ファビコン

ローディング画面にも表示された可愛らしいイメージキャラクター

とても素敵なWebサイトで勉強させていただきました。ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA