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

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

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

ファーストビューでの離脱を理論上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で実装したグラデーションを組み合わせたサンプルです。 ※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスやサイズ指定などは必要に応じて追記・変更してください。... 続きを読む

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

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

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

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

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

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

カレンダーアプリの再発明、Fantastical 2 for iPad | Lifehacking.jp

2014/04/07 110 users iPad Lifehacking.jp カレンダーアプリ

カレンダーアプリは最も利用する頻度が高いものの一つですので、人気のものはひと通り使うようにしています。 ここ最近は Calendars 5 を利用していますが、デスクトップでのすばやい入力には Fantasticalを使っていますので、iPhone 版に続いて、iPad 版の最新アプリが登場したときいてさっそく試してみました。 カレンダーアプリはファーストビュー、つまり起動して最初の見え方で使える... 続きを読む

ブログで反応率が一番高いのは記事直下！みんなのデザインを見てみよう

2014/04/06 195 users 記事直下 反応率 デザイン みんな ブログ

ブログで最も反応率の高い場所が記事直下部分です。ブログの目的によりここにどんなデザインで何を配置するか変わってきます。PV数アップ、広告クリック、シェア促進などコールトゥアクション（CTA）サンプルを集めてみました。ブログに訪れてくれる方が最初に見る部分（ファーストビュー）は反応率が高いため、効果を測定しながら最適化する必要があります。広告を置いたりおすすめ記事を置いたり、ブログによって特徴が違い... 続きを読む

Twitterへ投稿されるURLのリンク先が選べるようになります - はてなブックマーク開発ブログ

2013/06/19 410 users 位置 ブックマーク レイアウト変更 はてなブックマーク URL

2013-06-19 Twitterへ投稿されるURLのリンク先が選べるようになります いつもはてなブックマークをご利用いただき、ありがとうございます。はてなブックマークは、2013年3月21日にブックマークのコメント一覧ページをリニューアルしました。また、5月15日には、コメント一覧ページにおいてコメントがファーストビューに表示されるよう、コメントの位置を上へ上げるレイアウト変更を行いました。こ... 続きを読む

新しいトップページの一覧性を高めました - はてなブックマーク日記 - 機能変更、お知らせなど

2013/02/06 145 users はてなブックマーク日記 機能変更 新しいトップページ 一覧性

いつもはてなブックマークをご利用いただき、ありがとうございます。 今週の改善点を、お知らせいたします。 情報密度と一覧性を高めました リニューアル直後より、ユーザーの皆様から多くのご意見を頂戴しておりました、ファーストビューの情報密度と一覧性を修正しました。トップページの人気エントリーにもタイル・デザインを採用し、コンテンツを見渡しやすくしました。タイルの高さも圧縮しました。サイドバーをなくしたこ... 続きを読む

今すぐサイトの広告収入を２倍にする方法 - ぼくはまちちゃん！(Hatena)

2012/12/10 391 users ボク Hatena まちちゃん 広告収入 ２倍

こんにちはこんにちは！！ 今日はちょっとだけ実用的なお話です！ はい！ タイトルの通り、『今すぐサイトの広告収入を２倍にする方法』。 なんだか、うさん臭いですね＞＜ でも、やり方はシンプルで簡単です。 やり方： スマートフォンでアクセスされた時に、 一番上 (ファーストビュー) に 300x250 のレクタングル広告を貼る。 これだけ。 ちなみにこんな感じになります。 (スクロールさせようとすると... 続きを読む

ウェブサイト設計の時に役立つ７つのテクニック／【その6】目線の操作 (ユーザビリティ実践メモ)

2012/02/13 207 users ユーザビリティ実践メモ 目線 テクニック ウェブサイト設計

今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作　←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例え... 続きを読む

儲かるランディングページの作り方を公開！LP会社さんごめんなさい。 | Webコンサルティング

2011/10/26 1538 users ランディングページ Webコンサルティング 動機 見方 順番

ページの見方 このページの構成は、ランディングページの構成と同じように、上から順に記載しています。これより下は、ランディングページと同じ設計順になっているので、実際の制作時も、その順番を参考にしていただけると嬉しいです。 1．動機をつくる（キャッチコピーとビジュアル） 画面をスクロールしない範囲（ファーストビュー）で、閲覧者の心をキャッチすることはとても重要です。ここでしっかり動機付けができないと... 続きを読む

ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | Web担当者Forum

2011/06/07 833 users 安田英久 Web担当者Forum ブラウザ 変化 SEOスパム

Web担トップ « 編集記事一覧 « [コラム] Web担のなかの人――編集部ブログ « 編集長ブログ―安田英久 « ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 ««「この記事がRTされるごとに100円寄付します」はSEOスパムなのか？ 連載編集長ブログ―安田英久 ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 安田英久（Web担 編... 続きを読む