定期的に更新中!

TOPへ戻るボタン|デザイン・レイアウト例|前編

ページ上部へ戻るボタン1

ページの「TOPへ戻る」ボタンのデザイン・レイアウト例をストックしているページになります。※随時更新中

TOPへ戻るボタンとは

ページの下部の方(フッター付近)に設置されているボタンです。このボタンをクリックすると、ページの上部へ戻る(スムーススクロール)ことができます。

設置されている場合は、以下の状態であることが多い。

  • 固定
  • 追従
  • ある程度スクロールしたタイミングでふわっと表示

TOPへ戻るボタンの役割

ページが長い場合、スクロールでページ上部へ戻るのはユーザーにとってストレスとなるため、1クリックでページの先頭に戻れる機能はとても必要な要素です。

TOPへ戻るボタン|中央配置・文字入りver

中央にボタンを設置した(文字入り)デザインレイアウト一覧になります。

TOPへ戻るボタン|中央配置・文字入りver1

最終のコンテンツエリア下部へ、上向きの矢印と「page top」の記載をいれたデザインレイアウトです。

TOPへ戻るボタン|中央配置・文字入りver1

TOPへ戻るボタン|中央配置・文字入りver2

フッター上部へ、上向きの矢印と「page top」の記載をいれたデザインレイアウトです。
領域に縦幅を持たせたことで、余裕のあるデザインレイアウトになっているため、ホワイトスペース(余白)を意識したオシャレなサイトに仕上げたい場合にオススメです。

TOPへ戻るボタン|中央配置・文字入りver2

TOPへ戻るボタン|中央配置・文字入りver3

フッター上部へ、上向きの矢印と「page top」の記載を1行に並べたデザインレイアウトです。
領域の縦幅が短いため、シンプルなデザインに仕上げたい場合にオススメです。

TOPへ戻るボタン|中央配置・文字入りver3

TOPへ戻るボタン|中央配置ver

中央にボタンを設置したデザインレイアウト一覧になります。

TOPへ戻るボタン|中央配置ver1

最終のコンテンツエリア下部へ、上向きの矢印を配置したシンプルなデザインレイアウトです。

TOPへ戻るボタン|中央配置ver1

TOPへ戻るボタン|中央配置ver2

フッター上部へ、上向きの矢印を配置したシンプルなデザインレイアウトです。
矢印の背景部分は、メインカラーやポイントカラーなどを使う時もあれば、カラーバランスがとり薄い無彩色などで制作することもあります。

TOPへ戻るボタン|中央配置ver2

TOPへ戻るボタン|中央配置ver3

フッター上部へ、上向きの「丸型+矢印」を配置したデザインレイアウトです。
当たり障りのないデザインなので、こちらはよく使います。

TOPへ戻るボタン|中央配置ver3

TOPへ戻るボタン|中央配置ver4

フッター上に矢印を配置したデザインレイアウトです。
シンプル&省スペースでの配置が可能なため、全体とのデザインバランスや調和も図りやすいです。

TOPへ戻るボタン|中央配置ver4

TOPへ戻るボタン|右側配置・文字入りver

最終のコンテンツエリア下部&画面右側にボタンを設置したデザインレイアウト一覧になります。

TOPへ戻るボタン|右側配置・文字入りver1

上向きの矢印と矢印のライン上にテキストを配置したスタイリッシュなデザインレイアウトです。
ホバーすると矢印が少し上の上がるモーションなども素敵です。

TOPへ戻るボタン|右側配置・文字入りver1

TOPへ戻るボタン|右側配置・文字入りver2

上向きの矢印とテキストを配置したスタイリッシュなデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver2

TOPへ戻るボタン|右側配置・文字入りver3

よくある上向きの矢印とテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver3

TOPへ戻るボタン|右側配置・文字入りver4

上向きの2重の矢印とテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver4

TOPへ戻るボタン|右側配置・文字入りver5

最終のコンテンツエリア下部へ、上向きの2重の矢印とテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver5

TOPへ戻るボタン|右側配置・文字入りver6

ページ上部をイメージした「ラインのある矢印」と「TOP」のテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver6

TOPへ戻るボタン|右側配置・文字入りver7

上部を示している様な丸&ラインと「ページ上部へ戻る」という分かりやすいテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver7

TOPへ戻るボタン|右側配置・文字入りver8

小さな三角の矢印と「ページ上部へ」というテキストを配置したデザインレイアウトです。

TOPへ戻るボタン|右側配置・文字入りver8

コメントを残す

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

CAPTCHA