本記事は「TOPへ戻るボタン｜デザイン・レイアウト例｜前編」の続きです。前編では中央配置タイプを紹介しましたが、今回は右側配置に特化した事例をまとめています。
丸型・シャドウ付き・文字入り・固定表示など、スマホ対応やUX改善に役立つ実例を画像付きで紹介しています。
※随時更新中
この記事でわかること
- 右側配置タイプの「TOPへ戻る」ボタンのデザインパターン
- スマホ対応や追従表示など、操作性を高める工夫
- 丸型・シャドウ付き・省スペース型などの使い分けポイント
TOPへ戻るボタン｜右側配置ver
最終のコンテンツエリア下部や、フッター付近の画面右側へボタンを設置したデザインレイアウト一覧です。
TOPへ戻るボタン｜右側配置ver.1
上向きの矢印を配置したシンプルなデザインレイアウトです。
TOPへ戻るボタン｜右側配置ver.2
目立つ丸形に上向きの矢印を配置したベーシックなデザインレイアウトです。
当たり障りのないデザインなので、私はこちらを使う場合が多いです。
TOPへ戻るボタン｜右側配置ver.3
丸型に薄めのシャドウをつけ、中央に上向きの矢印を配置したデザインレイアウトです。
やや、矢印に工夫あり。このような矢印も巷で多くあるデザインの1つです。
TOPへ戻るボタン｜右側配置ver.4
丸型にシャドウをつけ、中央に上向きの矢印を配置したデザインレイアウトです。
上記のver.3よりもシャドウ強めです。
丸型のカラー（黒）は、ビビットなカラーやポイントカラーなどを使うと、結構カワイイデザインに仕上がります。メインカラーでも可。
TOPへ戻るボタン｜右側配置ver.5
丸枠の中央に上向きの矢印を配置した、当たり障りのないオーソドックスなデザインレイアウトです。
TOPへ戻るボタン｜右側配置ver.6
画面右下に三角を配置し、上向きの矢印を配置したスタイリッシュなデザインレイアウトです。
どの位置にも設置可能ではありますが、画面の最下部右側（フッター）に入りしているのがベストだと思います。
TOPへ戻るボタン｜右側配置ver.7
画面右下に三角を配置し、上向きの矢印を配置したデザインレイアウトです。
画面右下に固定でもよいですし、追従させるのもアリなデザインです。
TOPへ戻るボタン｜右側配置ver.8
コピーライトの位置の右端に配置したデザインレイアウトです。
省スペースに配置できるため、全体のデザインイメージの邪魔をしないデザインです。
TOPへ戻るボタンのデザイン＆構成でよくある質問（FAQ）
TOPへ戻るボタンはどのタイミングで表示させるべきですか？
一般的には、ある程度スクロールしたタイミングで表示させると、ユーザーの操作性が向上します。
突然表示されるとユーザーが気づきにくく、違和感を与える可能性があるため、ふわっと表示される演出などが効果的です。
右側配置のTOPへ戻るボタンはスマホでも使えますか？
はい、スマホでも使用できます。
ただし、サイトの雰囲気やユーザー層によって適切な配置やデザインは異なります。文字入りは視認性が高く、アイコンのみはデザイン性を重視したい場合に適しています。
サイトの種類や目的、トンマナ（トーン＆マナー）に合わせて設置しましょう。
TOPへ戻るボタン・後編｜右側配置デザイン例とスマホ対応術 のまとめ
右側配置の「TOPへ戻る」ボタンは、画面の視認性や操作性を高める配置として、多くのサイトで採用されています。
丸型やシャドウ付きなどの工夫により、デザイン性と機能性を両立できます。中央配置との違いや、スマホ対応のポイントを踏まえて、最適なレイアウトを選ぶようにしましょう！
