とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

スクロールでついてくるスティッキーヘッダー(追従ヘッダー)の使い方がグッド!固定ヘッダに見出し/記事タイトルを入れているサイト

スクロールでついてくるスティッキーヘッダー(追従ヘッダー)の使い方がグッド!固定ヘッダに見出し/記事タイトルを入れているサイト

スクロールすると

画面上部についてくる

スティッキーヘッダー。

ナビゲーションを追従させる使い方が

多い印象のUIです。

もうだいぶ世の中に浸透しているUIで、

市民権を獲得したと思います。

 

今回はスティッキーヘッダーの

使い方がうまいなというか、

こんな使い方してるんだ、という

サイトを見かけたのでご紹介。

 

結論から言ってしまうと、

スティッキーヘッダーに

記事タイトルや見出しを入れています。

そんな使い方もあったのか、と

ハッさせられました。

 

では実際のサイトを見てみましょう。

2つのサイトをご紹介します。

 

ひとつめは「ログミーBiz」

logmi.jp

 

こちらのサイトでは記事の見出しをひろって

スティッキーヘッダーに表示しており、

どの節をみているのか、2/5など現在位置が

わかる仕組みになっています。

 

今現在読んでいる記事中の、章や文節が

表示されるのは斬新ですよね。

わかりやすくていいなと思いました。

記事内の見出しがスティッキーヘッダーに表示されている

記事内の見出しがスティッキーヘッダーに表示されている

 

では次。

ふたつめのサイトは

WordPress テーマ販売・サポートサイト「サポトピア」です。

support.animagate.com

 

こちらも記事の見出しを

固定して表示させています。

こちらのサイトも記事の見出しを固定して表示

こちらのサイトも記事の見出しを固定して表示

 

と、ここまで書いて

もしかして僕が知らなかっただけで、

結構メジャーな使い方なんだなと

思いました笑

 

有名なサルワカさんでも

採用されているUIだったんですね。

気づかなかったw

saruwakakun.com

 

ということで、

見出しを上部に固定するUIは

そこそこ採用されているようで。

今回は見出しを上部に追従しているUIの例を

見てきましたが、ほかにもいろいろ

使い方はありそうですね。

 

ちょうど見ている記事内容にあわせて

商品のリンクを出すとか。

ログインや課金を促したり、

訴求によさそうです。