ウェブサイトにほぼ必ずある「ページトップ」「ページの先頭へ戻る」ボタン。最近ではデザイン要素のひとつとして個性的なデザインのものをいろいろ見かけるようになりました。ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトなら遊び心のあるユニークなページトップボタンもありですが、コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いのでないでしょうか。
今回はそんなコーポレートサイトなど、ちょっと堅めのサイトでも使える堅すぎず、ラフすぎない、絶妙なテイストの「先頭へ戻る」「ページトップ」ボタンのアイデアを集めてみました。 それでは早速いってみましょう。
画面端にFIXしている系
VtoHeim
少し堅い印象の住宅系のサイト。ウィンドウ端にFIXEDでくっついてくるタイプのページトップボタン。オーソドックスなタイプですが利便性も高くレイヤーが重なることでデザイン的なアクセントにもなっています。
ひよこプリスクール
幼稚園のサイトらしくイラストをふんだんに使ったサイト。ページトップボタンはシンプルですがロゴに使われている星マークをあしらったデザイン。
holo shirts
オーダーメイドシャツブランドholo shirts（ホーローシャツ）のサイト。写真とテキストを効果的に読ませるためにナビゲーションやページトップボタンは画面端に完全FIXしています。グラフィックデザイン的な自由なレイアウト感がいいですね。
４７株式会社
オフィスプランニングを行う４７株式会社のサイトのページトップボタンはシンプルながら動きに一工夫。
valetta
鹿児島の美容院valettaのサイト。ナビゲーションと合わせてセリフ体とラインを使ったクラシカルな印象のデザインです。
株式会社エフエス
金属加工の会社、株式会社エフエスのコーポレートサイト。三角形に切り取られたように配置されたボタンはデザインのアクセントにもなっています。
フッターの一部に組み込まれてる系
goodLOOPS
gloopsが運営するオウンドメディア。 オレンジと黒を効果的に使ったサイトでページトップボタンはフッターの一部として組み込まれています。
CINRAコーポレートサイト
Webメディアやショップ、デザイン制作などを行っているCINRAのコーポレートサイトのページトップボタンはページの最下部に設置されていました。大きなボタンになっているので押しやすい。Hover時のカラーもおしゃれです。
YAXELL
キッチンナイフやキッチンウエアのYAXELLのページトップボタンも最下部に設置。ページ全体としてはあまり使われていない黒色がデザイン的なアクセントとなり全体を引き締めています。
京都大学
京都大学の留学案内のサイト。教育系サイトだけあって非常に丁寧に作りこまれています。ページトップボタンはフッターのロゴと合わせてセンタリングして配置。小さめのフォントと余白感が上品です。
Degital AD Service
カタログ制作を行う制作会社。サイト内で何箇所か使われている有機的な楕円形をページトップボタンでも使用。
CKD株式会社
産業機械の製造を行っているCKD株式会社。四角いグリッドを多用したサイトなのでページトップもきっちりフッターに収めたデザインに。グリッドデザインのサイトには画面FIX系のページトップは合わないのかもしれません。
株式会社クレハ
ロゴの斜めラインを効果的に使ったクレハのサイトはページトップボタンも斜めラインを使ったデザイン。一貫したデザインコンセプトを感じます。
アニメーションや動きを頑張っている系
吉田耳鼻咽喉科
シンプルなデザインの耳鼻咽喉科のサイト。可愛らしい猿(？)のイラストが印象的です。ページトップボタンはCSSアニメーションを使い、見た目にも可愛いデザインになっています。思わず押しちゃいます。
上田皮ふ科
皮膚科病院のサイト。先ほどの吉田耳鼻咽喉科と同じように見た目も楽しいアニメーションを使っています。この２つ以外にも病院系サイトにアニメーションを使ったパターンは多かったです。
まとめ
いかがだったでしょうか？ コーポレートサイトのページトップボタンも工夫次第で個性的でも浮きすぎないデザインにすることができます。個人的にはFixedの固定表示した時のレイヤー感がアクセントとなるので好きです。 余談ですが今回いろいろなサイトを見て気づいたのですが、最近のサイトはページトップボタンが付いていないものが多い気がしました（とくに海外サイト）。スマホやタブレット、Magic Mouseなど慣性スクロールができるデバイスが増え、縦長のサイトでもページの先頭に戻るのが容易になったのが要因でしょうか。 今後は機能というよりデザインアクセントとしての意味合いが強くなるのでは？と個人的には感じています。 ご参考いただければ幸いです。
