【NEW 】転職や給料アップに向けて、Webマーケティング関連の資格について調べてみた [ → 記事を読む ]

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

ページTOPへ戻るボタン2

昨日ストックした「ページのTOPへ戻る」ボタンのデザイン・レイアウトの続きになります。ボタン1つともっても本当に色々な種類があるため、ページを分けてナレッジにしていきます。
※随時更新中

TOPへ戻るボタン|右側配置ver

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

TOPへ戻るボタン|右側配置ver1

上向きの矢印を配置したシンプルなデザインレイアウトです。

TOPへ戻るボタン|右側配置ver1

TOPへ戻るボタン|右側配置ver2

目立つ丸形に上向きの矢印を配置したベーシックなデザインレイアウトです。
当たり障りのないデザインなので、私はこちらを使う場合が多いです。

TOPへ戻るボタン|右側配置ver2

TOPへ戻るボタン|右側配置ver3

丸型に薄めのシャドウをつけ、中央に上向きの矢印を配置したデザインレイアウトです。
やや、矢印に工夫あり。このような矢印も巷で多くあるデザインの1つです。

TOPへ戻るボタン|右側配置ver3

TOPへ戻るボタン|右側配置ver4

丸型にシャドウをつけ、中央に上向きの矢印を配置したデザインレイアウトです。
上記のver3よりもシャドウ強めです。
丸型のカラー(黒)は、ビビットなカラーやポイントカラーなどを使うと、結構カワイイデザインに仕上がります。メインカラーでも可。

TOPへ戻るボタン|右側配置ver4

TOPへ戻るボタン|右側配置ver5

丸枠の中央に上向きの矢印を配置した、当たり障りのないオーソドックスなデザインレイアウトです。

TOPへ戻るボタン|右側配置ver5

TOPへ戻るボタン|右側配置ver6

画面右下に三角を配置し、上向きの矢印を配置したスタイリッシュなデザインレイアウトです。
どの位置にも設置可能ではありますが、画面の最下部右側(フッター)に入りしているのがベストだと思います。

TOPへ戻るボタン|右側配置ver6

TOPへ戻るボタン|右側配置ver7

画面右下に三角を配置し、上向きの矢印を配置したデザインレイアウトです。
画面右下に固定でもよいですし、追従させるのもアリなデザインです。

TOPへ戻るボタン|右側配置ver7

TOPへ戻るボタン|右側配置ver8

コピーライトの位置の右端に配置したデザインレイアウトです。
省スペースに配置できるため、全体のデザインイメージの邪魔をしないデザインです。

TOPへ戻るボタン|右側配置ver8

コメントを残す

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

CAPTCHA