タグ

webとスクロールに関するbaba_jdlのブックマーク (3)

  • Above the foldとは

    この記事では、サイトのデザイン、レイアウトについて考えてみます。 「Above the fold(アバブ・ザ・フォールド)」という言葉を聞いたことがありますか? Above the foldとは、スクロールしないで見ることができる画面の領域です。 上の図はGoogleの検索結果です。 太い赤線の上の領域がスクロールしなくても見える範囲、太い赤線の下の領域がスクロールしないと見ることができない範囲だとすると、上側の領域が「Above the fold」になります。 このAbove the foldの何が重要かというと、大切なコンテンツ、つまり訪問者に見てほしい・読んでほしいコンテンツはAbove the foldの中に収めるべきなのです。 訪問者は、訪れたページが自分にとって必要か不必要かを「3秒で決める」なんていうのはよく言われることです。 (誰が計ったんでしょう?(笑)) 訪問者を逃さず

    Above the foldとは
  • スクロールは制御するな - Weblog - Hail2u.net

    WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい

    スクロールは制御するな - Weblog - Hail2u.net
  • コンテンツを自動的に読み込んで無限スクロールさせる方法【jQuery連載13】 | HTML5でサイトをつくろう

    フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで続きを見るなどもあるが、ここでは特定の枚数を読み込んでスクロールした際に次の読み込みたい内容を自動的に読み込む形を作成してみます。 こうすることによってクリックすることなくサイト全体の写真を見ることなども可能となります。 ウェブページを下にスクロールし続けていくと、ページを遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれ、Twitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手ウェブサービスで導入されている。 今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装してみよう。 今回

    コンテンツを自動的に読み込んで無限スクロールさせる方法【jQuery連載13】 | HTML5でサイトをつくろう
  • 1