今回は、GA4の標準レポートに CV別に見ることができるCVR列を追加する方法を解説します。 なお、標準レポ―トの見た目を変える場合、一緒に仕事をしているチームのメンバーに混乱を与える恐れがあります。後述するように「上書き」ではなく「別名保存」の形を取ることで、元々あったレポートは温存できますので、是非その点についてご留意ください。 CV別に見ることができるCVR列を追加できる表として、 ライフサイクル > 集客 > トラフィック獲得のレポートを対象にご説明します。 レポ―トをカスタマイズ 右上の、「レポートをカスタマイズ」アイコンをクリックします。 画面右に、レポートのカスタマイズメニューが開きます。 元の画面に戻りたい時は、左上の「←戻る」をクリックします。 「レポートデータ」の「指標」をクリックします。 「指標を追加」をクリックします。 「セッションのコンバージョン率」をクリックしま

GA4のレポートメニューの多くは「概要レポート」と「詳細レポート」の組み合わせで作られています。 どちらもGoogleがあらかじめ決めたディメンションと指標の組み合わせで構成されており、何も考えなくてもサイトの傾向をある程度把握できるレポートになっています。 しかし、普段よく見る数値をまとめて表示したい場合や、必要なデータに絞り込んだレポートにすぐアクセスしたい場合もあるでしょう。 そんな時に使える機能として、自分で作ったレポートをメニューに追加できる「ライブラリ」機能を紹介します。 ライブラリ機能のユースケース概要レポートの編集と追加詳細レポートの編集と追加レポートメニューに表示する概要レポートのカードにフィルタをかけるにはレポートは誰でも作れる？誰でも見られる？ ライブラリ機能のユースケース 概要レポートを編集することでダッシュボード的な表現が可能になることはもちろんですが、ビューの代

Googleアナリティクス4プロパティ（GA4）では、2021年10月頃に指標「セッション」のカウント方法が変更されています。 これにより、2021年10月以前のセッション数がGA4レポートに表示されないため、注意が必要です。 2021年10月以前のセッション指標はGA4レポートに表示されない2021年10月以前のデータがレポートに表示されないセッション指標2021年10月以前のセッション数確認方法 1. 2021年10月以前のセッション指標はGA4レポートに表示されない 公式ヘルプの記載によると、GA4の指標「セッション」のカウント方法は以下の通り変更されていることがわかります。 2021年10月以前：イベント「session_start」のイベント数をカウント2021年10月以降：ユニーク セッションIDの数を推定

GA4でデフォルトで有効となっている拡張計測機能は、ページビューに加えて5種類のイベントを自動的に収集しています。基本的な分析項目を増やすことで分析者により多くの視点を与えてくれるのですが、思わぬところで計測漏れが発生していることもあります。 そこで今回は拡張計測機能の中の「サイト内検索イベント（view_search_results）」の注意点について解説します。 ※拡張計測機能は、管理>データストリーム>任意のウェブのデータストリームを選択し、拡張計測機能セクションの歯車マークをクリックすると開くことができます。 おさらい：サイト内検索イベントの計測はURLを参照している まずはサイト内検索イベント取得のおさらいですが、知っている方はこの部分はスキップして注意点から読んでいただければと思います サイト内検索機能を有しているウェブサイトで検索結果ページを見ると、以下のようなURLになって

画像の切り抜きや背景の除去、透過できる無料オンラインツール15選 自動で３秒！話題のFigmaプラグインと一緒に 「できるだけラクに、写真の切り抜きや、背景のみを消したい」 そんなわがままも叶えてくれる、魔法のような、無料のオンラインツールを利用してみませんか。 さらに、写真を放り込むだけで、背景の切り抜きをAIが自動で、ほんの数秒で完了というから驚きです。 今回は、実際にすべてのツールを試し、本当に使いたいと思ったツールのみをセレクト。 背景除去ツールを使うことで、被写体のみを切り抜き、透明な背景を作ることができるので、さまざまなデザインに配置できます。 ECサイトやWebサイトの、商品切り抜きにもおすすめです。 すべて無料！画像の切り抜きや背景の除去、透過できるオンラインツールまとめ Adobe Express フォトショップを提供するAdobe（アドビ）による、スキルの有無を問わず、

ページエクスペリエンスシグナルの中のコアウェブバイタルの 1 つの要素でもある「ページの表示速度」は、同じような関連性・品質のページがあったときに優劣を付ける程度の比較的弱いランキング要因です。では、Googleはどのようにしてページスピードをランキング要因に組み込んだのでしょうか？私たちがページスピードを落とさないための画像SEO 4つの施策とともに紹介します。 参考：SEO施策全体についてはこちら Googleはどのようにしてランキング要因にページスピードを組み込んでいるのか Googleはどのようにページスピードを検索ランキングの要素に組み込み、どれぐらいの「重み付け」で評価しているのでしょうか？ まず、Googleは以下の3要素でページの「メインコンテンツ表示までの速度（LCP）」や「ユーザーの反応までの時間（FID）」「レイアウトのズレ（CLS）」などを測る「コアウェブバイタル（

Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！ CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。 画像: @bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいビューポート単位「lvh」「svh」「dvh」とは ブラウザのサポート状況 はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズ

フォトショップに慣れてくれると、重要になるのが「作業の効率アップ」でしょう。 「自分のやりたいこと」を、できるだけ早くこなす、時短ワザは欠かせません。 この記事では、フォトショップを使う人なら誰でも役立つテクニック11選を、サンプル例と一緒にご紹介します。 コンテンツ目次 同じファイルを2画面で表示する方法 Photoshop以外から色を抽出する方法 コピースタンプツールの使い方（応用編） グループ機能の手軽な写真合成テクニック 輝きをアップする８つの描画モード 「白黒」調整レイヤーをつかった色の変更テクニック 気になるシワやしみを消す方法 写真の明るい部分のみ選択する方法 色調の自動補正アルゴリズムを変更する方法 切り抜きサイズを統一する方法 隠しバナナアイコンを表示する方法 フォトショップを持っていない人は、まずは7日間の無料トライアルからはじめませんか。 すべての機能を試すことができ

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最

Webサイトでは、ユーザーの疑問や不安を解消することが求められます。 例えば、初めて使うネットショップでは本当に商品が届くのか不安ですよね。企業や個人事業主のサイトでも、運営者に気軽に質問できれば、ユーザーに安心感を与えられるかもしれません。 そこで今回は、気軽にコミュニケーションを取れるチャットツールをWordPressサイトに設置する方法をご紹介いたします。Facebookメッセンジャーを使って簡単に設置可能です。 Facebookメッセンジャーをチャットツールとして使う WordPressサイトにチャットツールを設置したいなら、Facebookメッセンジャーを使うのがおすすめです。たまにサイトの下部で表示されている下記のようなチャットツールです。 簡単に概要を説明しておきます。 Facebookのビジネスページが必要 無料で使える 位置やカラー、サイズなどを細かくカスタム可 質問と回

Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack Supported by Evil Martians and Cube Check compatible browsers How to get started Use defaults if you're building a web application for the global audience. Use node 18 if you're building a Node.js application, e.g., for server-side rendering. Autoprefixer, Babel and many other to

ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい

CodeSpeedyはVisual Studio Codeで使うコードスニペットを管理できるデスクトップアプリです。WindowsとMac用が用意されています。 最初から備わっているスニペットコードマネージャはJSONで管理しにくいので簡単に同期できて管理しやすい軽量アプリを作成したのだそうです。 使い方も機能も極めてシンプルで使いやすく、標準のスニペット管理のGUIアプリ的な感覚で使えるのではないかと思います。需要が分からないため、まだOSSにはしていないそうです。 CodeSpeedy

Create seamless patterns in seconds Tylify is a web-based seamless pattern maker. Pattern elements can be both raster (PNG, JPG, etc) and vector (SVG) images. Export formats include SVG, PNG and CSS with embedded base64 SVG. All the work is done in your browser.

xTilesはホワイトボード感覚でアイデアとプロジェクトを視覚的に整理出来るクリエイター向けのノートアプリです。 メモやリンク、動画や画像などのメディアやTodo、データなどをひとまとめにしてザッと見で状況を把握できるワークスペースを作る、みたいなもの。 個人での利用は勿論、スマホアプリもあるしチームで共有も可能です。主にライターやクリエイター、ブロガー、イベントプランナーやフォトグラファーなどビジュアルで扱う情報が多い方向けのようです。無料プランもあるのでぜひお試しになってみてください。 xTiles

「これ、どうやる？」真似したくなるフォトショップ最新チュートリアル、作り方40選 参考書のように使える、便利でおしゃれな新作テクをチェック フォトショップが上達するもっとも手っ取り早い方法は、結論から言えば、気に入ったチュートリアルを真似してみることです。 というのも、つくり方だけでなく、実践的な使い方を、順を追って再現できるのが理由です。 事実、「先輩のワザを盗む」、「師匠の技術をマネする」などの言葉が、古くからあるほどです。 ここでは、思わず真似したくなるフォトショップの最新つくり方、チュートリアル42個をまとめてご紹介します。 作業がスピードアップする小技テクも覚え、幅広いデザインスタイルを習得してみましょう。 「これ、どうやる？」真似したくなるフォトショップ最新チュートリアル、作り方まとめ フォトショップを持っていない人は、まずは7日間の無料トライアルからはじめませんか。 すべての

Webサイトを一つの軸としてコンテンツマーケティングを展開しているのであれば、アクセス解析でも適切な効果測定や評価を行えるような計測をしておくべきです。Googleアナリティクスの今後のスタンダードであるGA4では、新たな指標「平均エンゲージメント時間」の登場もあり、コンテンツマーケティングとの親和性は高くなった印象です。 とはいえ、コンテンツマーケティングの評価や分析は表層的なものになりがちです。一定の工数がかかる割には明確な課題発見がむずかしいなどの声を耳にします。Webサイト全体もしくは個別の記事単位で、ページビューや検索流入のトラフィックの評価、検索エンジンでの順位といったSEOの評価などにとどまり、それ以外の具体的な打ち手につながる手掛かりを見つけられていない点に課題があります。 コンテンツマーケティングの評価や分析は表層的なものになりがち この記事では、できるだけ低負荷にWeb

Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソースコードが公開されています。 ユーティリティファーストな設計となっていますが、classではなく、ユーティリティ変数で構成されています。 @import "https://unpkg.com/open-props"; .block-wrap { display: flex; flex-wrap: wrap; flex-basis: var(--size-content-2); gap: var(--size-5) var(--size-8); align-items: flex-start; } Webサイトの設計に必要になる設定が既に定義されているので任意の要素にそれぞれの変数を当てれば

この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。 AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザイン・配色ツール 3. モックアップ・アイコンツール 4. 面白・クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール 3D Perspective Glitch Hover Effect グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト。 Bike Demo Three.js マウススクロールに合

Motionityはブラウザで動作するモーショングラフィックエディターWebアプリです。特にユーザー登録等も不要で誰でも無料で利用可能です。 複数レイヤーを使って任意のオブジェクトを時間経過に合わせて動くよう設定し、モーショングラフィックとしてダウンロードできる、というもの。 一般的なシェイプや画像、テキストの他、動画や音源の追加や、勿論ローカルファイルのアップロードもできるようになっています。ただ、動画追加はちょっと重くて動きませんでした。 肝心のモーションは各レイヤーの▶ボタンをクリックすると設定項目が表示されるので設定する感じです。個人的にちょっとUIがとっつきにくかったですが、他の方は問題ないかも。 WebベースなのでDLしなくていいですし、クロスプラットフォームで動作してくれるのは良いですね。データのインポート/エクスポートやLottieのアップロードも可能です。 Motioni