ページの「TOPへ戻る」ボタンのデザイン・レイアウト例をストックしているページになります。※随時更新中
TOPへ戻るボタンとは
ページの下部の方（フッター付近）に設置されているボタンです。このボタンをクリックすると、ページの上部へ戻る（スムーススクロール）ことができます。
設置されている場合は、以下の状態であることが多い。
- 固定
- 追従
- ある程度スクロールしたタイミングでふわっと表示
TOPへ戻るボタンの役割
ページが長い場合、スクロールでページ上部へ戻るのはユーザーにとってストレスとなるため、1クリックでページの先頭に戻れる機能はとても必要な要素です。
TOPへ戻るボタン｜中央配置・文字入りver
中央にボタンを設置した（文字入り）デザインレイアウト一覧になります。
TOPへ戻るボタン｜中央配置・文字入りver１
最終のコンテンツエリア下部へ、上向きの矢印と「page top」の記載をいれたデザインレイアウトです。
TOPへ戻るボタン｜中央配置・文字入りver２
フッター上部へ、上向きの矢印と「page top」の記載をいれたデザインレイアウトです。
領域に縦幅を持たせたことで、余裕のあるデザインレイアウトになっているため、ホワイトスペース（余白）を意識したオシャレなサイトに仕上げたい場合にオススメです。
TOPへ戻るボタン｜中央配置・文字入りver３
フッター上部へ、上向きの矢印と「page top」の記載を1行に並べたデザインレイアウトです。
領域の縦幅が短いため、シンプルなデザインに仕上げたい場合にオススメです。
TOPへ戻るボタン｜中央配置ver
中央にボタンを設置したデザインレイアウト一覧になります。
TOPへ戻るボタン｜中央配置ver１
最終のコンテンツエリア下部へ、上向きの矢印を配置したシンプルなデザインレイアウトです。
TOPへ戻るボタン｜中央配置ver２
フッター上部へ、上向きの矢印を配置したシンプルなデザインレイアウトです。
矢印の背景部分は、メインカラーやポイントカラーなどを使う時もあれば、カラーバランスがとり薄い無彩色などで制作することもあります。
TOPへ戻るボタン｜中央配置ver３
フッター上部へ、上向きの「丸型＋矢印」を配置したデザインレイアウトです。
当たり障りのないデザインなので、こちらはよく使います。
TOPへ戻るボタン｜中央配置ver４
フッター上に矢印を配置したデザインレイアウトです。
シンプル＆省スペースでの配置が可能なため、全体とのデザインバランスや調和も図りやすいです。
TOPへ戻るボタン｜右側配置・文字入りver
最終のコンテンツエリア下部＆画面右側にボタンを設置したデザインレイアウト一覧になります。
TOPへ戻るボタン｜右側配置・文字入りver１
上向きの矢印と矢印のライン上にテキストを配置したスタイリッシュなデザインレイアウトです。
ホバーすると矢印が少し上の上がるモーションなども素敵です。
TOPへ戻るボタン｜右側配置・文字入りver２
上向きの矢印とテキストを配置したスタイリッシュなデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver３
よくある上向きの矢印とテキストを配置したデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver４
上向きの2重の矢印とテキストを配置したデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver５
最終のコンテンツエリア下部へ、上向きの2重の矢印とテキストを配置したデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver６
ページ上部をイメージした「ラインのある矢印」と「TOP」のテキストを配置したデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver７
上部を示している様な丸＆ラインと「ページ上部へ戻る」という分かりやすいテキストを配置したデザインレイアウトです。
TOPへ戻るボタン｜右側配置・文字入りver８
小さな三角の矢印と「ページ上部へ」というテキストを配置したデザインレイアウトです。
