This page is intended for users in Hong Kong. Go to the page for users in United States.

サービス紹介LPの「画面固定ヘッダ」について考えてみました

こんにちは!
5月からデザイナーとしてJOINした石田です。

先日ペイモビズの紹介ページ(通称LP)にヘッダを追加して「アカウント登録ボタン」を置くという改修をしました。
以前担当していただいていたデザイナーさんがデザインし、すでに公開されているページに要素を追加するにあたり、社内で議論したり自分なりに気づいたことがあったので書いてみようと思います。

まず始めに、私は「画面上部に固定されるのだから、ヘッダはあまり高さを取らない方が良いのでは」という先入観でデザイン始めました。
薄目のヘッダにすることにより、スクロール中に画面上部に固定されても確かに邪魔にはならないのですが、ペイモビズLPの全体イメージが「情報を詰め込まず余白をしっかり取る」というものだったため、少しちぐはぐな印象でした。

PMの仏像さんとも「なんか今っぽくないね」という話をして、参考までに、上部にヘッダが固定となる他社のサイトをいくつか調べてみたところ、ここ数年で人気が上昇しているサービスに共通点があるように思えたので、残しておこうと思います。

まずはサービス紹介がメインのコンテンツとなっている、いわゆる「LP」と呼ばれるページを見ていきます。

coiney(64px)

unipos(68px)

slack(70px)

BASE(74px)

iKnow(90px)


機能、料金、活用事例など、サービスを紹介するためのコンテンツが比較的多いサービスが、この「スクロールすると画面上部にヘッダが固定される形」を採用していて、ヘッダの高さは 60px から、大きいもので 90px 以上取っているサービスがありました。

私が見ていて出会った中で、一番高さを取っていたのは英語学習サービスの「iKnow」で、90px、例にはないですが、「Zeplin」で 94pxでした。
「iKnow」や「Zeplin」はロゴに特徴があるため、あまり小さくしてしまうとロゴの印象が薄れてしまうという懸念があったからかなと思いました。

次に高さを取っていたのはネットショップ作成サービスの「BASE」で74px。
こちらも正方形に近いロゴなので、しっかり高さを取っているのには「iknow」や「Zeplin」と同じ理由があるのではないかと思いました。
また「BASE」はヘッダの背景が透過しているので、スクロール中のヘッダの「画面占有感」が緩和されている印象を受けました。

ヘッダの高さの決め手に、ロゴはかなり重要な要素なのかなと少しづつ気づき始めます。

次に、あまり多くないですが、いわゆる「LP」以外のサービスサイトも見てみました。


LIPS(64px)

Google(64px)

Zeplin(60px)


こちらも60px程度の高さを取っているサービスをわりと見かけました。
ロゴやサービス名がしっかりと認識できることに加え、ある程度高さがあったほうが、検索バーも使いやすくていいなと感じました。

複数のロゴの形態のサイトと見比べてみて、ペイモビズのLPでは 70px を採用しました。
ペイモビズのロゴが比較的横長で、それほど高さを取らなくても、ロゴの存在感が出せると思ったからです。
合わせてロゴも余白は持たせつつ大き目に配置し、サービス名をしっかり覚えてもらえるようにしました。
この修正によって、LPのテイスト少し「今っぽい」感じも出せたのではないかと思います:)

今回は「スクロールすると画面上部に固定されるヘッダ」に限定して調査しましたが、上部固定に絞らずもっと調べてみても面白そうだなと思いました。

サービスのグロースフェーズでは、すでにチームから離れてしまった他のデザイナーさんが作ったページに手を入れることがよくあります。
他のデザイナーさんが作ったデザインの意図を汲みとりつつ、改修目的に見合ったデザインをしていくことが、ブランドイメージに保持に繋がっていくのかなと思いました。

最後までお読みいただきありがとうございました!

AnyPayではデザイナーインターンを募集しています!

WEB/アプリデザイナー
学生インターン歓迎!デザイナーアシスタントとして現場で経験を積みませんか?
____________________ ● AnyPay株式会社について  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ アトランティス、Gunosyを立ち上げ成功に導いてきたシリアルアントレプレナーである木村新司が2016年6月に設立。 「テクノロジーに包まれた社会を実現する」をミッションに、複数のサービスを開発・提供しています。 ◉シェアモビリティ事業 https://mobility.anypay.jp/ 日本の移動をもっと便利にするために、決済×シェアリングエコノミーというドメインで新規事業の立ち上げを行なっています。 今まで行けなかった観光地、ストレスフリーな通勤通学、いつもより少し足を伸ばしたショッピングなど、『ラストワンマイル』を支える新たな交通インフラを作ることは、地域の活性化や経済効果にも貢献ができると考えています。 また下記のような社会的課題の解決にも役立つはずです。 ・ 都市部交通渋滞 ・ 観光客向けインフラの不足 ・ 放置自転車問題 ・ 公共交通の待ち時間
AnyPay株式会社
AnyPay株式会社's job postings
10 Likes
10 Likes

Weekly ranking

Show other rankings