SEQSENSE「コーポレートサイト」から学ぶデザイン術
こんにちは。
webデザインナーを目指し勉強中のryskと申します。
前回に続き、第二弾です。
では早速始めていきたいと思います。
今回は、SEQSENSEさんのコーポレートサイトのLPです。
このサイトの目的は、
「コピーとライティングをベースに、提供価値とサービスの理解を促進」
「ターゲットが的確なネクストアクションの促進」
です。
この2点の視点からサイトのデザインについて考えてみたいと思います。
【構成・配色】
このLPでは白と黒を基調としたシンプルな配色です。
サイトを開くと、画面いっぱいに広がるロボットの写真とコピーがユーザーに近未来的・力強いイメージを与えています。
これがサイトの目的である「提供価値とサービスの理解」にもつながっているのではないでしょうか。
レイアウトはシングルカラムを使用、文字量も少なめフォントも太く、大きめに設定されているのでストレスフリーに感じます。
【フォント】
太めのゴシック体（a-otf-midashi-go-mb31-pr6n）、サンセリフ体を使用。
コピーや会社のフィロソフィー、見出しなどには大きめの太文字にすることで、力強さを感じさせます。
このサイトは全体を通して通常のサイトよりも太い文字が使用されている印象です。
なので、太文字特有の圧迫感や文字のつぶれはを解消するため、文字間隔や行間を広めに設定されています。
ちなみに参考までにですが、コピー/見出しなどの大きめの字は、サイズが4rem、行間が1.5。
文章などの小さめの文字は、サイズが2rem、行間が2に設定されていました。
また、白の背景に黒の太文字を使用することで文字が浮かび上がっているような錯覚を覚えました。
文字は左揃で統一され、できた右側の余白に写真などを使用することで効果的なレイアウトになっています。
他にも余白のまま使うことで、スッキリとし、ユーザーに安心感や信頼感を与える効果もあるように感じました。
【画像・写真】
このサイトを開いた第一印象が、「綺麗」＆「近未来」でした。
なぜなら、開いた瞬間にスターウォーズのR2-D2のようなロボットの写真が広がるからです。
そして、この写真がとにかく綺麗。
さらに暗め＆ブルー系のトーンでサイトの画像が統一されており、そうすることで「高級感」や「近未来感」を演出しているように感じました。
LPで使われている画像は全て大きめのサイズに設定されており、視覚からの情報が強かったように思います。
これは、ロボットという見た目的にインパクトの強い商材を扱っている会社の強みを活かしたデザインになっているのではないでしょうか。
また、切り抜き画像を使用することで、さらにその存在が強調されています。
余談ですが、中盤に出てくる警備員とロボットが向き合っている写真、これは人間とロボットが対等な立場で共存していく、というようなメッセージを感じ、ターミネーターのような世界になるのも遠い話ではないのではと少し怖くなりました。
【装飾】
装飾に関して感じたことは、とてもシンプル。
装飾はというと、背景の数本の縦線とボタンのみでした。
しかし、このLPでは写真による視覚情報が強いので、装飾に関しては引き算的な考えでバランスを取っているのではないでしょうか。
ただ、このシンプルな装飾にも細かいデザインが施されています。
まずボタンです。
ボタンはシンプルに黒の四角ボタンなのですが、下に影をつけることでユーザーをクリックへと誘導しています。
次に背景に入った縦線ですが、その線に文字列の頭を揃えることで全体に統一感を出しています。
さらに、この縦線が、ロボットの鉄板のつなぎ目を連想させ、このLPの近代的な世界観を助長しています。
【効果】
このLPは動きの効果もとてもシンプルでした。
ヘッダーがスクロールに合わせて追従してくる動き、ボタンのホバー効果くらいしか見当たりません。
しかし、この余計なものを削ぎ落とした感じが、より効率的かつシンプルな形となっているロボットとリンクしなくもないと言えます。
まとめ
一言でまとめると、このLPはカッコよかったです。
男のロマンであるロボットが全面に出されており、なおかつ無駄が削ぎ落とされたシンプルなデザイン。
近未来的なイメージをユーザーに持たせる際は、今回得た知識がかなり有効な気がしました。
また、立たせるべき存在がある際の余白の使い方もとても参考になりました。
