SSSSLIDE
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
WD101: 画面ではなく部品から始めてみよう
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの Windows中心設計は5年前の話 すべてのデバイスやソフトウェアで同じように Web サイトをデザインするのは不可能といっても過言ではありませんし、むしろ違いを受け入れ、利用者の環境やニーズを尊重するのが Web デザインの本来あるべき姿です。柔軟性・拡張性をもつ Web ですが、Web デザインはページの概念を強く意識したビジュアルデザインが最優先された時期がありました。 パソコンが Web アクセスの中心だった頃は、利
[CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
少しの配慮で大きな効果を生む！フォームが使いやすくなる9つのTIPS
マークアップ・エンジニアの鳥居です。 フォーム関係のコーディングを行う際、たとえお客さまの要件にない場合でも、できるだけ効果の上がるものになるよう、ちょっとした機能をプラスオンすることを心がけています。 今回はそういった、私がいつも使用している JavaScript や CSS をまとめてみました。 どれも基本的な事かもしれませんが、簡単にできる事も多いですので、ぜひ一度試してみてください。 <label>と<input>を関連付ける 【HTML】 <select>で<optgroup>を使う 【HTML】 <input>にフォーカスした時、背景や枠線の色を変更 【CSS / JS】 Chromeでフォーカスした時にでる黄色の枠を消す 【CSS】 エンターを押してもsubmitせずに、次の入力エリアに移動するjqKey.js 【JS】 日本語を自動変換するvalueconvertor.js
良いフォームの条件と、入力フォーム最適化（EFO）に関する 4つの基本＋2つの本質 | 初代編集長ブログ―安田英久
今日は、「良いフォームとはどんなものか」を考え、コンバージョン率をアップさせる入力フォーム最適化（EFO）の基本を紹介します。問い合わせフォームや申し込みフォームなどを改善するヒントにしてください。 良いフォームとはどんなものかEFOを考える前に、まず「良いフォーム」というのは、どういうものかを考えてみましょう。企業側から見ると、良いフォームとは次のようなものではないでしょうか。 申し込み数（フォーム入力完了数）が多いターゲットに合った顧客層の申し込み数が多いターゲットでない顧客層の申し込み数が少ない問い合わせ（「どうすればいいんですか？」などのサポート的なもの）が少ないまぁ、フォームの話題なので上記の「数が多い」というのは「率が高い」ということなのですが（訪問者数を増やせば、数は増やせるので）、ここは、わかりやすさのために「数が多い」としています。 入力フォーム最適化（EFO）の4つの基
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント｜MarTechLab（マーテックラボ）
LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス
ファーストビューを制するものはEFOを制す！スクロールを減らして直帰を防ぐ最新テクニック３選 | エフトラEFOブログ
以前の記事「フォーム最適化３ステップその１:直帰を減らすために有効な７つのTips」でもお伝えしましたが、EFOにおいて、直帰を減らすことは基本的なアプローチのひとつです。 その内容をふまえたうえで、もう少し踏み込んだ直帰を防ぐためのテクニックについて考えていきたいと思います。 前回のおさらい：直帰を防ぐためには？ 以前の記事と重なりますが、直帰を防ぐためにはファーストビューで表示する内容がカギです。 「ぱっと見」の情報で、ユーザーの心理的障壁、特に「面倒だな…」と思わせないことか重要です。 そのためのTipsの１つとして、スクロールしなくても必要項目を入力できる項目配置についてお伝えしました。 ユーザーの多くは驚くほどスクロールを嫌がります。 「次の画面に進む」ボタンが、スクロールしなくても見えるような分量になっているかいないかで、ユーザーの心理的障壁は大きく異なってきます。 今回
＜アンケート調査結果Vol.1離脱編＞ユーザーがフォームから逃げる理由ベスト５ほか | エフトラEFOブログ
ユーザーはなぜ、フォームの入力を途中でやめてしまうのでしょうか？ EFO（入力フォーム最適化）を考えるにあたり、まずは相手であるユーザーを知ることは非常に大切です。 リアルなユーザーーの声を得るために当社では、全国のインターネットユーザーに対し、入力フォームに関するアンケート調査を行いました。（※2013年調査 有効回答数449人） 以前発表したスライドの中でも少し触れておりますが、 本ブログでは、数回に渡ってそのアンケート結果を詳しくご紹介したいと思います。 まず第１回の今回は、離脱編と題し、フォームから離脱するユーザーの心理に迫りたいと思います。 目次 69%がフォーム途中離脱の経験アリ！ フォーム離脱、その後の行動は？ 途中離脱、その原因は？ベスト５発表 ユーザー心理からの教訓 69%がフォーム途中離脱の経験アリ！ 「ウェブフォームの入力を途中でやめてしまった経験がありますか？」
www.papatto-p.com is Expired or Suspended.
「 www.papatto-p.com 」のページは、ドメインが無効な状態です。 ウェブサイト管理者の方はこちらから変更・更新を行ってください。 「 www.papatto-p.com 」is Expired or Suspended. The WHOIS is here.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ガイドライン - LINE Creators Market
スマホサイトのコンバージョン率を上げる7つの秘訣（実証済み） など10+4記事 | 海外&国内SEO情報ウォッチ