![見出し画像](https://assets.st-note.com/production/uploads/images/105589926/rectangle_large_type_2_186a784b4b6035e048a7a1704baed42e.png?width=1200)
noteの「#このデザインが好き」
12月22日からnoteを使い始めてるんですが、使っている中で、いいなと思うUIや参考にしたい設計がたくさんあったので、備忘も兼ねてまとめていきたいと思います。
noteで最強UI見つけた
— りょーた | つながる勉強会 × Frontend × Design (@RyoTa___0222) January 6, 2023
今度記事にする🔥
今回紹介したいと思ったのは、スマホのブラウザで見た記事閲覧ページです👇
![](https://assets.st-note.com/production/uploads/images/95201170/picture_pc_f87cf7077691818662e9400b2861e4e3.gif)
僕がどこに感動したか分かりましたか???笑
👇👇👇👇
そう、ヘッダーです!!
よく見てみると、下スクロール時と上スクロール時で別のUIが表示されるようになっているんですよね👀
![](https://assets.st-note.com/img/1673192855155-gViKT6czIy.png)
下方向へのスクロール時は、記事の執筆者の情報とフォローしていない場合はフォローボタンが表示されます。
上方向へのスクロール時は、通常のヘッダー情報が表示されます。
スクロールして、ページ上部から離れた際にヘッダー部分の表示を切り替えるUIはよく見ていましたが、スクロールの向きで変えるのは珍しいなぁと思い興味を持ちました。
なぜ、noteがこのUI設計をしたか
私の仮説を紹介したいと思いますが、ユーザーの行動に合わせて最適な情報を表示するように設計した結果、こうなったのだと考えます。
下スクロール時のUI
今回取り上げたのは記事閲覧ページなので、ユーザーの目的は「記事を読むこと」です。
通常、記事を読むときは、上から下に読んでいきます。(つまり、下方向へのスクロール)そして、記事を読んでいる最中にユーザーが知りたい情報として考えられるのは、「誰がこの記事を書いたんだろう」です。そのため、下方向へのスクロール中は執筆者の情報をヘッダー部分に出すように設計したんじゃないかなーと考えました。
上スクロール時のUI
逆に、ユーザーが記事を読み終わる、もしくは途中で読むのをやめたいと思ったら、「今いるページから離脱すること」が目的になります。
そのため、この場合(「記事を読んでいない」=「上方向へのスクロール時」と仮定)は、ユーザーに様々な選択肢を提供可能なグローバルヘッダーを表示しているのだと思います。
どのように実装するか
デザイナー兼フロントエンドエンジニアなので、どのように実装するのか試してみました(サンプルソースはReactです)
どうやらstackbiltzのiframe表示が対応していないようなので、飛んでみていただけますと幸いです🙌
ひとこと。
「こういう設計ができるようになる!!」
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?