SIDE NOTE — Back to Top
小さな縦組の文字と太めの短い罫線。細すぎる線にはせず、静かな存在感を保つ。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: scroll-triggered
48 items条件に一致する公開素材
SOFT SQUARE — Back to Top
穏やかなクリーム色の角丸正方形に、読みやすい濃色矢印と小さなTOP。
TYPOGRAPHIC 00 — Back to Top
「最初へ戻る」を00という数字と短い英語で示す。文字の余白とウェイトを主役にする。
INK DISC — Back to Top
56pxの濃色円に、上向きのサインをはっきり置く。ページより強く主張しないが、確実に見つかる。
ORBIT MARK — Back to Top
円周の一部を切り取ったやや太めの円弧。中心の小さなTOPが読める大きさ。
LITTLE BALLOON — Back to Top
小さな風船のアクセント。文字は風船の中に置き、絵は主役になりすぎないサイズ。
DIRECTION STRIP — Back to Top
濃淡で分割した水平のナビゲーションバー。矢印は操作の手掛かりとして自然に使う。
CORNER RETURN — Back to Top
フッター右側に配置しやすい横長の小さなプレート。余白とボーダーで自然に区切る。
EDGE RIBBON — Back to Top
ページ端に置くことを想定した、短めの濃色リボン。文字を十分な大きさで見せる。
DOUBLE LIFT — Back to Top
二段の山形サインを収めたコンパクトな角丸ボタン。形は明快、演出は短く。
RETURN TYPE — Back to Top
極端に細くせず、読みやすい大きさの「BACK TO TOP」を使う横長タイプ。
FOLDED CARD — Back to Top
紙の角をほんの少し折った、ほどよく遊び心のあるカード型。矢印は加えず文字で伝える。
先頭へ — Back to Top
自然な日本語「先頭へ」を読みやすい大きさで組む。句読点のような小さな矢印と余白だけを使用。
SPLIT PILL — Back to Top
矢印と文字を左右の異なる面に分けた、約140pxの横長ピル。普段は静かで、触れると矢印だけが動く。
COLUMN GUIDE — Back to Top
太さのある縦帯と読みやすい縦組文字。細線ではなく側面のメニューとして成立する。
OPEN ARCH — Back to Top
上側がアーチになった輪郭と短い案内文字。正円より縦方向の流れが感じられる。
READING 100 — Back to Top
読む位置を小さな数値と進捗バーで示す。見た目の遊びではなく、機能から生まれたデザイン。
DIAMOND UP — Back to Top
回転した菱形の輪郭に、正立したTOP。二重四角の繰り返しではない独立した形。