grdの作者が考える、いまフロントエンドエンジニアに求められる「速度という機能」 Webパフォーマンスの改善に、並々ならぬ情熱を傾けるエンジニアの泉水翔吾（@1000ch）さん。氏の手がけるOSSはこの情熱を体現するかのように、パフォーマンス改善にフォーカスしたものが多数あります。なぜWebパフォーマンスにこだわるのか、そして現在のフロントエンドエンジニアに求められる技術を聞きました。 「サイトの表示に3秒以上かかると、訪問者の53%がそのサイトから離脱する」 Googleが公開した上記のドキュメントは、Webの「使いやすさ」とは、スピードと不可分なものであることを示しています。 「パフォーマンスはサービスが持つべき“機能”の一部」と語るのは、『超速! Webページ速度改善ガイド』の著者の一人である泉水翔吾（せんすい・しょうご／ @1000ch ）さん。彼は、前職の株式会社サイバーエージェ

Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1

Ben Gremillion氏は、UXPinのコンテンツデザイナーです。以前はウェブデザイナー、およびその後にバックエンドディベロッパーを務めていました。彼は新聞デザインからキャリアをスタートさせ、デジタルの未来を見据えて即座にHTML/CSSを学びました。 実を言うと、ステークホルダーやその他の関係者があまり深く考えずに「整理・整頓する」ことを求めるのに、私は飽き飽きしています。整理されているということは、ただ単に物が少ないということではありません。整頓するということは、全てをなくすわけではありません。これらの言葉は、ページ上で重要でない要素を取り除くということを意味しているのです。 もし複雑な入力フォームがあったならば、ユーザーは一目見ただけですぐに去ってしまうでしょう。これを防ぐための手っ取り早い方法は、散らかっている要素を取り除くことと、グリッドを追加することです。今日は、ユーザー

こんにちは！ Web心理マーケターの鈴木 公（@KouShinri）です！ Googleアナリティクスは便利ですよね！ 検索エンジンやSNS、広告からの流入数もわかるし、目標達成度や行動フローも分析できる！　だから、サイトの状況や価値を知るためにも重宝したい分析ツールですよね。あなたもきっと使っていることでしょう！ でも、Googleアナリティクスは複雑すぎる。どこをどう見ればいいのかもわからない。使い慣れていない時期なら、なおさら「？？？」がいっぱいになりますよね！ そんなGoogleアナリティクスを使い慣れていない方や、初心者の方のためにも……。Googleアナリティクスでは、レポートの「テンプレート」を取り入れ、簡単に分析結果を見れるようにする方法があるのです。 それが今回メインの「ソリューションギャラリー」！ この「ソリューションギャラリー」とは、他の人が見やすいように設定した独自

EFOとは「entry form optimization」の略で、その名の通り、「エントリーフォームの最適化」を指します。これを、専門知識がなくても手軽に実施できるのが「EFOツール」です。 みなさまが管理しているエントリーフォームは、離脱対策ができていますでしょうか？ フォームでの離脱率は平均8～9割と言われており、この数字からして、フォームで多くの顧客を逃してしまっているということが分かると思います。そのため、対策を何もしていない場合、フォームの改善（EFO）は急務と言えます。 今回は素早く、しかもHTMLなどが分からなくても、自動でフォーム最適化（改善）を行ってくれる、EFOツールを紹介いたします。 すでにEFOツールの利用をご検討されている方も、ぜひご参考ください。 1.EFOツールは「フォームを使いやすくし、ユーザの離脱を防ぐ」施策を簡単に実施できるものネットショップで商品を買

2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Googleの数々の発表から、現在検索順位の決定に使われているアルゴリズムには数百の要素があることが伺えます。 その要素についてGoogleは毎日のように改良を加えており、その中にはパンダアップデートやペンギンアップデートのような大規模なものから、名前のない小さなものまで様々なアルゴリズムが存在します。 今回は独自の調査やGoogle社員の発言から、Googleがアルゴリズムとして検索順位の決定に利用していると考えられる項目を導き出し、発表した記事を翻訳してご紹介します。Google公式のものではなく、あくまで1個人（会社）の調査と考察よるものですが、各要因の信憑性まで書かれており、SEOを実践する上で非常に参考になる内容になっています。 ※なるべく原文の表現を曲げないように翻訳しているため、日本語として読みづらい点等ございますが、ご容赦頂ければと思います。 元記事:Google Rank

先日レスポンシブサイトをコーディングしていた時に、「PC向けレイアウトでは float: left; で横並びにしたいけど、スマホ向けレイアウトでは横並びにしたくない」といったように、一度記述したCSSプロパティの値を初期値に戻したいと思うことが何度もありました。 普段コーディングする時あたりまえのように使っているプロパティでさえ初期値となると分からないものが多く、その都度リファレンスサイトで調べるという作業が発生してしまいました。 今後、少しでもコーディング時間を短縮出来るように、CSSプロパティの初期値をまとめてみました。 ※アルファベット順で記載しています。 ※ショートハンドプロパティは省略しています。 A プロパティ名 初期値 説明

デザイナー・バックエンドの方もすぐに実践出来る！フロントエンド設計(CSS設計)のコツ 小原正大 2015.09.15 198 21943845 こんにちは、2015年新卒の小原(こはら)です。フロントエンドを担当しています。 先日まで新規サービスの開発にジョインしてフロントエンドの設計・実装を行っていました。その時のことを振り返りながら、簡単に行えるフロントエンドコーディングの設計についてまとめようと思います。 柔軟性の高いフロントエンド開発の設計とは どのようなサービス開発についても、仕様がはっきり決めきれなかったり今後の機能追加・変更が生じる可能性があり、ビジネス上の発想と同様に開発にも柔軟性が求められます。特に変更の起きやすいフロントエンドはなおさらでしょう。 フロントエンド開発における柔軟性とは、インターフェースの変更に対してどれだけ効率的・継続的にアップデートに耐えられるかと言

SEO 2015年7月18日 ウェブマスターツール（Search Console）「検索アナリティクス」をフル活用し、ロングテールSEO攻略 もうあなたは、「SEO対策してるのに、結果が伴わない」とため息をつかなくてもよくなる。今日から、競争の激しいキーワード、いわゆるビッグワードで勝負するのをやめるからだ。 考えて欲しい。 あなたは、SEOのハウツーを調べるとき、「SEO」と検索するだろうか。少なくとも、「SEO」に加えて何らかのキーワードを加えて調べるはずだ。 分析ツールを提供するグローバル企業、エクスペリアンによると、1語のみで検索する人は全体の23%に過ぎず、2～5語が57%、5語以上入力する人が19%もいる。 23%の人しか検索しないビッグワード単体のSEO効果ではなく、残りの73%の人が使うロングテールのキーワードを追った方が、多くを手にできるということだ。 ビッグワードで検索

曜日別や時間別のサイト利用状況といったアクセス解析レポートは、ある種「古典的」なデータです。今回は、Googleアナリティクスを利用して、その「曜日軸」と「時間軸」の組み合わせでより立体的にユーザー像を捉えていくと同時に、PCやモバイルの「デバイスカテゴリー軸」を加えて、より詳しくユーザー像や行動を推測していく取り組みを紹介します。 古典的な「曜日別」「時間別」レポートだけではなく、両軸の組み合わせとデバイスカテゴリー軸を加えてユーザー像の理解に活用する Googleアナリティクスには、曜日別や時間別のサイト利用状況を把握できる標準レポートは、執筆時では準備されていません（注）。ただし、値は取得しており、ディメンションと呼ばれる項目は準備されているので、カスタムレポートなどで利用できます。例えば「サイト全体の曜日別や時間別の、訪問やコンバージョンの状況」をまとめたカスタムレポートは、独自に