見出し画像

【良デザインサイト分析 #23】株式会社LIG

けい

分析するサイト

株式会社LIG(リグ)｜システム開発・Web制作・マーケティング支援

今回もMUUUU.TVで紹介されていたおすすめトレース課題の2課題目である株式会社LIGさんのHPをトレースしながら気がついたことをまとめていきます。

ぱっと見の印象

ページ全体をとおして「Technology」「Design」「Content Marketing」「Strategy&Consulting」「Digital Education」という五つの事業があることが強く伝わります。説明したい内容を絞り、最低限のテキストを強いビジュアルとして見せていることによる影響だと思います。

デザインテイストも大きな文字とパキッとした色使いが海外っぽいと思いました。力強さや勢いを印象を感じる一方で、随所に細い線や細かく調整されたデザインによって大味になりすぎない絶妙なバランス感を演出している印象です。

フォント

欧文：Acumin Pro
和文：Noto Sans

テキストサイズ

（画面幅1440pxの場合）
「DX withGlobal Team」：250px
「Build Team Together」：144px
「Technology」「Design」「Content Marketing」「Strategy&Consulting」「Digital Education」：144px
「We provide a global…」：72px
「Blog」「Career」：285px
「Contact Us」：192px

htmlタグのフォントサイズの設定を見ると1.66667vwとなっており、画面幅が1440pxの時、ほぼ24pxとなるので1440pxの画面幅を基準としてデザインを制作しているのだろうなと思いました。みていただくとわかる通り、フォントサイズが全体的に大きくあしらわれており、それらのテキストは画面幅によってフォントサイズが可変となっています。

本文テキストの欧文フォントについて

また、「私たちはグローバルな開発体制でDXを支援します。」の「DX」部分などが和文テキストの途中であってもフォントをわざわざAcumin proに変更されています。

これらはMVに限らずページ下部の欧文書体は全て「Acumin Pro」に変更されておりただならぬこだわりを感じます。

矢印ボタンの位置について

事業紹介セクションの「Technology」「Design」「Content Marketing」「Strategy&Consulting」「Digital Education」のそれぞれの矢印ボタンはグローバルナビゲーションから少し右に飛び出るように配置されており、右揃えに見えるように視差調整がされています。

しかし、TOPの再生ボタンやContact Usの矢印ボタンは同じ表現のボタンであるにもかかわらず右に飛び出るように配置はされておらず数値的に右揃えになっています。

これらの理由はおそらくですがスクロールでグローバルナビゲーションと重なることが考慮されているからだと思います。事業紹介セクション（視差調整がされている方）ではスクロールすると画面全体が切り替わる仕様となっているため、グローバルナビゲーションとボタンが重なることはありません。その一方でTOPの再生ボタンやContact Usの矢印ボタンはスクロールによってボタンがグローバルナビゲーションと重なる瞬間があるため、揃っているように見せるための視差調整が逆効果になってしまうことを防いでいるのだと思いました。非常に細かい。

  • グローバルナビゲーションの後ろに黒いグラデーションが引いてあり、視認性が保たれている

  • 事業紹介の下のコントローラーにドロップシャドウが引いてありステータスがX:0、Y:-7、ぼかし:15、透明度30%となっている。

矢印ボタンのデザインについて

矢印ボタンや三角形のボタンが外側の線だけ鈍角になるように角取りがされているデザインになっています。

下記の記事で紹介されているEverettというフォントの処理と良く似ています。Everettはスイス出身のデザイナーに作られているそうで、これらの角を水平に切り取ったような表現はスイススタイルのデザインで最近よくみられる印象があります。公式のブログによると2022年にサイトがリニューアルされたそうで、近年のスイススタイルのデザインの流行をいち早く取り入れていたのだなと感心してしまいました。

Everettについて説明されている記事
SHIFTBRAINのデザイナーが選ぶ #偏愛フォント 7選 Vol.2｜SHIFTBRAIN
株式会社LIGさんのブログ
CI（コーポレート・アイデンティティ）とWebサイトを刷新しました

  • フッターがソリューションのみにアイコンがついており、目立たせたいことが伝わってくる。

  • 位置的にOfficeもアイコン+別配置なので目立つ。 →海外オフィスがあり、グローバルな事業を展開していることを強調するため？

ロゴについて

こちらのロゴは2022年にリニューアルしたものでBees&Honeyさんというデザインファームが担当されたそうです。
LIGのロゴをリニューアルしました（6回目） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

今回の分析とは関係ありませんが、Bees&Honeyさんのnoteの下記の記事がブランディングにおける考え方がわかりやすく示されており非常に勉強になりました。
「消費されるデザイン」から「資産となるデザイン」へブランドシフトするために

公式HPのプロジェクト紹介ページにもLIGさんのブランディグ案件が掲載されていました。多くを語ってはいないものの、LIGさんの他の企業とは違う本質的な人格を捉え、長期的な目線で会社の資産となるCIを作り上げていることが伺えます。
LIG ブランディング | B&H

下記はそんなロゴをトレースして気がついたことです。

  • Gの形状からAcumin Proをベースにして作られていると推測。

  • S、G、O、DなどはAcumin Proが楕円形状なのに対し、LIGのロゴは長方形を角丸にした形状になっている。（アールの間に直線の部分がある）

  • 全体的に縦長でカウンターが太く和文でいう「フトコロ」が狭く作られている。

  • Iの縦線はLやFEの縦線よりも細く調節されている。

  • Eから一番下の横線を取った形がそのままFの形。

  • Oは上下が丸いので若干大きめに作られているがDは上下線がはっきりしているので高さをO以外のアルファベットと揃えてられている。

その他思ったこと

  • フッターのソリューションに色とアイコンがついており、ページの中の情報とリンクしている&強く伝えたいコンテンツであることがわかる。

  • フッターのOfficeの配置が他の項目とは離れた位置に配置されており目立つ&海外オフィスがありグローバルな事業を展開する企業であることが伝わる。

  • グローバルナビゲーションの後ろに黒いグラデーションが引いてあり、視認性が保たれている。

  • 事業紹介のセクションの「01,02,03,04,05」のボタンにドロップシャドウがついており、操作できるボタンであることが伝わる。

  • フッター下に「The 18th season is starting!」と記載されているので毎年更新している？

この記事が気に入ったらサポートをしてみませんか？