アマゾンのページ表示速度を劇的に改善した6つの実践テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ

2022/02/03 16 users アマゾン 実践テクニック IKEA ポリフィル あめたま

illustration by つきのあめだま 「ファーストビューのコンテンツを先に読み込む」「すべてSSRする」「使っていないポリフィルを削除する」など、アマゾンのページ読み込み速度を向上させるチームが用いた具体的なテクニックを6つ、紹介する。 また、同じ「ページ表示速度」関連のトピックとして、IKEAのサイトで全画像... 続きを読む

動画をWebページの背景に埋め込む時のテクニック｜notes by SHARESL

2021/08/26 16 users テクニック 背景 Webページ 動画 YouTube

Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの... 続きを読む

Lazy-loadはLCPを悪化させる!? WordPressは2つ目の画像からネイティブLazy-loadを実装するように改良予定 | 海外SEO情報ブログ

2021/08/23 10 users LCP ネイティブLazy-load img バイタル 上級

[レベル: 上級] ファーストビューに掲載されている画像を Lazy-load（遅延読み込み）すると コア ウェブ バイタル の 1 指標である LCP を低下させる恐れがあります。 そのため WordPress は、ファーストビューの画像にネイティブ Lazy-load を適用しないように改善する予定です。 ネイティブ Lazy-load は、画像の <img... 続きを読む

Instagramのリーチ数を増やすには“タグ映え”が重要。ハッシュタグの関連性を把握する | Web担当者Forum

2020/03/17 11 users Instagram Insta キャプション ご存じ リーチ数

タグ映えという言葉をご存じだろうか？ タグ映えとは、ハッシュタグ検索画面でファーストビューに表示されることを指す。タグ映えするか否かでInstagramのリーチ数に2倍以上の差が出てくる。タグ映えを狙うために最も重要となるのは、写真でもキャプションでもなく、その名の通り「ハッシュタグ」だ。 本記事では、Insta... 続きを読む

Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ

2018/05/14 44 users コムテブログ webデザイン 参考 スプリットスクリーン 余白

作成：2018/05/14 更新：2018/05/14 Webデザイン 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考： 2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集 ）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 2018年微増しているレイアウトの... 続きを読む

2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集 | コムテブログ

2017/09/10 77 users コムテブログ アイデア集 Webデザイントレンド 縦書き 分割

作成：2017/09/11 更新：2017/09/11 Webデザイン 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン（分割） シネマグラフ 縦書きのGナビ... 続きを読む

スマホを意識したブログデザインにしてみた - み

2017/04/19 16 users スマホ ブログデザイン インパクト 見た目 全体

2017 - 04 - 19 スマホを意識したブログデザインにしてみた 雑記 First Scroll ファーストビューにインパクトがあるデザインを考えていました。サイトをはじめて見に来た人が、ワンスクロールで「おっ！」となるような、スマホを意識したブログデザイン。 「人は見た目が９割」とも言われていますが、ブログデザインこそ初見の見た目が９割以上をしめるのではないでしょうか。全体をスクロールして... 続きを読む

長いスクロールページでユーザーを引きつけるための５つの方法 | UX MILK

2017/03/12 60 users UX MILK ユーザー 方法 ソフトウェアデベロッパー 5つ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーション... 続きを読む

flexboxで横並び　ヘッダー下におすすめ記事を並べるカスタマイズ - Minimal Green

2017/02/02 17 users Page Analytics ブログカスタマイズ CSS

2017 - 02 - 03 flexboxで横並び　ヘッダー下におすすめ記事を並べるカスタマイズ ブログカスタマイズ CSS ブログのヘッダー下におすすめ記事を4つ（PC）並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「 Page Analytics 」によるとそこそこク... 続きを読む

意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ | コムテブログ

2016/02/07 461 users jQuery pocket CSS エフェクト 一味

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（Segmen... 続きを読む

パソコンをトリプルディスプレイにして縦表示にしたら世界が変わった件 - 貧乏人は麦を食え。年収200万円時代を生きる方法。-bobcoffeeの麦食指南

2015/12/26 13 users 4Kモニタ はてな匿名ダイアリー 雑誌 Google 全体

2015 - 12 - 26 パソコンをトリプルディスプレイにして縦表示にしたら世界が変わった件 デジタル関係 先日買った４Kモニタにピボット機能が付いてたので 縦表示にしてみたら世界が変わりました。 はてなブックマークのトップページは雑誌のようですし 人気記事一覧もほぼファーストビューで確認できます。 はてな匿名ダイアリーの長い記事も全体が見渡せます。 Googleの表示も通常３～４位までの表示... 続きを読む

ファーストビューでの離脱を理論上97%防ぐたった一つの方法 | オモコロ

2015/12/16 113 users セクシー美女 ご存知 ウェブサイト オモコロ ブラウザ

（今スマホで画面上にセクシー美女が表示されていない場合は、これをクリックしてみてください。→ ■ セクシー美女が現れない場合は記事が全く成立しないのでPC閲覧推奨です。）       改めましてこんにちは、宮本牛乳です。     突然ですが、 ファーストビュー という言葉をご存知でしょうか。   ファーストビューとは、ブラウザでウェブサイトを開いた時に スクロールせずに見える範囲の画面 の事を指し... 続きを読む

CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 | NxWorld

2015/09/24 154 users 矢印 見栄え アニメーション ムービー アイコン

自分用に一覧化したのでシェアします。ファーストビューで大きめのイメージやムービーなどを配置しているサイトで設置されていることが多い、次のコンテンツがあることを示したりスクロールするよう促すアイコンやボタンをCSSで表現してみたサンプル全10種類です。クリックした際に次のコンテンツへスクロールされる動きなどはJavaScriptを使用していますが、矢印の見栄えやアニメーションなどに関してはCSSのみ... 続きを読む

ファーストビューの動きが面白いWebサイト20 | Webクリエイターボックス

2015/07/28 117 users Webクリエイターボックス

近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します... 続きを読む

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル | NxWorld

2015/05/10 108 users ベンダープレフィックス NxWorld CSS 追記 ブラウザ

ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。そのヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 ※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスやサイズ指定などは必要に応じて追記・変更してください。... 続きを読む

[「ZenFone 2」ファーストビュー] “格安”を脱したアフォーダブル・プレミアム - ケータイ Watch

2015/04/24 26 users 年初 ケータイ Watch ZenFone 2 SIMロック

レビュー 「ZenFone 2」ファーストビュー “格安”を脱したアフォーダブル・プレミアム （2015/4/24 17:24） 4月20日、ASUS JAPANから「ZenFone 2」が発表された。年初にグローバルで発表された最新のSIMロックフリー・スマートフォンで、日本国内では5月16日から販売が開始される（詳細はニュース記事を参照）。 「ZenFone 2」 日本市場で前モデルにあたる「... 続きを読む

事例で学ぶヒートマップ読み解き講座　第8回　スマホサイトの直帰率を下げる21の現実的な方法 | Pt mind | Pt engine ブログ

2015/03/29 54 users Pt engine Pt mind 鉄則 直帰率 事例

今回は、弊社のヒートマップ分析の経験で分かってきた、主にBtoCスマホサイトの直帰率を下げる21の鉄則をご紹介します。特にECサイト向けの鉄則を多くご紹介します。「鉄則」と言っても、「うちのサイトには当てはまらない」というものもあるかも知れませんので、是非、貴社独自のリストに進化させていってください。 1. 「ファーストビューに何かビジュアルが必要」は思い込み。 理由　限られたファーストビューのス... 続きを読む

はてなダイアリーはスマートフォン表示に不向きだから、はてなブログに移行すべき～半数以上がスマホな現代。 - 団劇スデメキルヤ伝外超

2015/03/10 15 users 団劇スデメキルヤ伝外超 増田 玖足手帖 半数以上 現代

2015-03-10 はてなダイアリーはスマートフォン表示に不向きだから、はてなブログに移行すべき～半数以上がスマホな現代。 はてな アフィリエイト 雑記 以下の記事を読み増田。 アフィリエイト貧乏に成った。何が悪なのか - 玖足手帖-アニメ&創作- ブコメしていたこと『数日内に言及エントリ書く（できたら）1.はてなブログプロに加入、記事を全部移す。2.スマホのファーストビューにGoogleアドセ... 続きを読む

記事を書くより楽しい？ブログのトップページをリニューアルしました

2015/02/20 27 users トップページ ブログ 備忘録 Stinger3 リニューアル

ブログのトップページを中心にリニューアルを行った備忘録。ファーストビューに最新記事とデイリーランキングを置き、記事一覧はカテゴリー別に表示するよう改良しました。Stinger3 から自作テーマへ変更して 1 年ちょっと。その間マイナーチェンジを繰り返して遊んでいましたが、今回はトップページを中心に大幅な変更を加えました。 Theme Test Drive を使って裏でカスタマイズ作業を行い、ベース... 続きを読む

ファーストビューに関するマニフェスト： ページの折り目が今も大事な理由 － U-Site

2015/02/16 63 users 折り目 マニフェスト U-Site 理由 ページ

要旨 ページ上部に何を表示し、何を非表示にするかは、画面サイズにかかわらず、常にユーザーエクスペリエンスに影響するものだ。ファーストビュー内に表示されているかどうかで、ユーザーの情報の取り扱い方には平均84％もの差が出る。 公開：2015年2月16日付（日本語版）、2015年2月1日付（原文）　著者：Amy Schade 原文（英語）：The Fold Manifesto: Why the Pag... 続きを読む

ブログのためにスマートフォン・ファーストビューを20サイト調査（企業サイトの記事ページ編）

2015/02/11 31 users 企業サイド 見た目 ブログ スマートフォン ブログ運用

ブログのためにスマートフォン・ファーストビューを20サイト調査！（企業サイト編） 2015/2/11 ブログ運用 人は見た目が9割なんて本もありますが、スマートフォンはファーストビューが9割。人の脳はたった0.5秒で好きか嫌いかを判断します。 スマートフォン検索でたどり着いたあなたのサイトやブログ。記事を読んでくれるかどうかはファーストビューにかかっています。0.5秒で離脱する可能性のあるスマート... 続きを読む

バズるサイトの６割はファーストビューにSNSボタンを設置していた！

2015/01/06 129 users Above the fold SNSボタン 傾向 最初 印象

訪問者が一番最初に目にするファーストビュー（Above the fold）には、どのようなものを置けば良いのでしょうか。2014年はてブTOP100のサイトからその傾向を探ってみたので、デザインの参考にどうぞ。ブログに訪れてくれた方が最初に目にする部分に何を置くか。これで読者の印象がかなり変わってきます。たとえば、広告だらけだとしたら「うわ…」とひかれてしまうかもしれません。 始めに見える部分を「... 続きを読む

ブログのファーストビューの広告ユニットが2つ以上だとクリック分散しませんか？禁煙2年134日目・今日のはてブ。 - 団劇スデメキルヤ伝外超

2014/09/19 12 users 団劇スデメキルヤ伝外超 はてブ ブクマ 広告ユニット ボケ

2014-09-20 ブログのファーストビューの広告ユニットが2つ以上だとクリック分散しませんか？禁煙2年134日目・今日のはてブ。 アフィリエイト 日記 スポンサーリンク 今日のひとこと提案シリーズが最終回から1話伸びまして、「ブクマでボケよう」とか提案しようかな？と思ったのですが、ボケという文化は人を選ぶ気がするので、ボツネタにしました。次は質問シリーズにしようと思ったのですが、あんまネタがな... 続きを読む

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス

2014/08/06 196 users Webクリエイターボックス 背景 CSS3アニメーション

フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサ... 続きを読む

ヤフーの自然検索結果がオワコンとなりつつある件

2014/07/18 97 users オワコン ヤフー 自然検索結果 オーガニックサーチ 驚愕

ヤフーで「財布 メンズ」と検索した結果。 自然検索（オーガニックサーチ）の「1位」が、検索結果ページのファーストビューに出てこないという驚愕の事態。 自然検索結果のトップ掲載が、スポンサードサーチ広告の「12位」よりも格 […] post from: Yahoo!リスティング広告 運用支援 The post ヤフーの自然検索結果がオワコンとなりつつある件 appeared first on リステ... 続きを読む