GA4でスクロール率を計測する方法｜計測設定から探索レポートでの確認方法まで解説 | Googleアナリティクス | やさしいGoogleアナリティクスブログ
スクロール率を計測することでユーザーがそのページのどこまで興味をもっていたのかを把握できます。 本記事では、GA4とGTMでの計測設定方法と探索レポートでの確認方法を解説します。 GA4のスクロール数とは スクロール数とは、ユーザーが各ページの90％までスクロールしたときに計測されるイベントです。 スクロール率とは、ユーザーがページをスクロールした割合を表す指標です。つまりは「〇％スクロールした」というのがスクロール率です。 スクロール率を計測する方法 スクロール率を計測するにはGA4の「拡張計測機能」か「Googleタグマネージャー（GTM）」のどちらかを使用します。 GA4の拡張計測機能・・・「測定機能の強化」をONにすることで簡単にイベントを計測できる。 Googleタグマネージャー(GTM)・・・拡張計測機能で計測できないイベントを計測する際に、カスタムイベントを作成し独自のイベン
デザインスキルだけじゃ足りない？デザイナーに必要な「伝わる説明力が身に付く３つの考え方」｜VECTOR
こんにちは。ずしみです🐶 バタバタと忙しない日々を過ごしていたら、あっという間に前回の更新から数ヶ月経っていました....。(Note執筆の存在を忘れていたわけではないのです....と言わせて下さい🥺笑) 今回は、意外とUIデザイナーにも必要な「伝わる説明力」について本を読んでみたので、まとめてみました。 UIデザイナーにとってデザインスキルと同じぐらい大切なスキルです。同じ駆け出しデザイナー勢の方は知っていて損はない内容になっているので是非読んでみてください。 デザイン知識についての記事はこちら↓ はじめに「デザイナーってデザインをすることが仕事じゃないの？」 タイトルを見てこう思っている人もいるのではないでしょうか？ もちろん、デザイナーの仕事はデザインをする事ではありますが、デザインスキルの他にも何故「伝わる説明力」が必要なのでしょうか？ それはズバリ「自分の作ったデザインの意図
SEO対策の第一歩！競合サイト分析の方法をコンサルタントが解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディアコンサルタントの太田です。 オウンドメディア運用のノウハウをお伝えしている私の記事ですが、今回は「競合サイト分析」について解説しています! 私もふだん、業界研究も兼ねて競合サイト分析を必ずおこなっています。この記事をご覧のみなさんも、たとえばなにかはじめてのことに挑戦するとき、事前に他社の事例を調べたりしたことがあるのではないでしょうか。それも一種の競合分析です。 というわけで今回は、プロ目線での競合サイト分析の方法を紹介します！ 分析時に意識したいことについてもお話しするので、ぜひ参考にしてみてくださいね。 そもそも競合サイト分析とは？ “競合サイト”の定義 一概に「競合」というと、いわゆる同業他社のような形で、自社と類似するサービスや商品を展開する他企業を指します。 しかしWebサイトにおいては、これが少し異なります。 Webサイトにおける競合とは「狙う顧客が近い需
もう困らない！Figmaの共同編集を気持ちよく進める方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのシバです。 今やWebサイト制作には欠かせないツール「Figma」。 スムーズな動きと直感的な操作感で、多くのデザイナーが愛用しているかと思います。 なんといっても、リアルタイムで共同編集ができるのが、魅力の一つではないでしょうか。 しかし、実際に共同編集をすると、目的のデータが探しづらかったり、最新データがわからなくなったり、触ったつもりはないけど、あれ、ずれてる……？ と、困ったことはないでしょうか。 ということで今回は、Figmaでスムーズに共同編集するためのTipsをお話ししたいと思います。 Figmaの共同編集でよくある困りごと 以前、PCデザインだけで100ページ近くある大型案件を担当したときの話です。 納期も考慮しデザイン制作は2人でほぼ同時スタートし、のちほどもう1人デザイナーが参加、計3名で進めていく形になりました。 スタート時はとくにルール等を設
任意のWebサイトを編集可能なFigma用ファイルに変換できる・「html.to.design」
html.to.designは任意のWebサイトを編集可能なFigma用ファイルに変換できるサービスです。 手順も簡単で、専用のChrome拡張をインストールし、変換したいWebサイトで実行すると、全ページか部分的かの選択が出ますので選択。すると.h2dという拡張子のファイルをDL出来るようになります。 Figmaにてhtml.to.designを使用し、.h2dファイルをインポートすればFigmaで任意のWebサイトを編集できるようになります。手軽でとても良いですね。 実際何度か試しましたが、精度としては100%ではないものの特に問題なさそうでした。無料プランは30日に12回まで、有償プランは無制限且つ一度に複数編集可能になるなどの特典があるそうです。 html.to.design
非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント
2023年6月20日 Figma, Webデザイン, 便利ツール 人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない！という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。 ↑私が10年以上利用している会計ソフト！ Figmaを使うメリット Figmaは世界的にも大人気の、無料で使えるデザインツールです。人気の理由は、主に以下のような共同作業のしやすさがあげられます： インストールする必要がない コメントの共有がしやすい バージョン管理ができる デザイナーであれば自分の持っているPCやMacにFigmaのアプリをインストールして利用したほうが使いやすいかな、
1人で引っ張ろうとするリーダーが時代遅れな訳
チームは全員のベクトルがそろっている集団 シェアリングリーダーは、「想い」をみんなと共有するリーダーです。「想い」ではイメージしづらいなら、「感情」ととらえるとわかりやすいかもしれません。 私はこれまで多くの会社で研修をしてきましたが、その間に離職率は激減しました。それは社員が「このチーム（組織）でずっと働きたい」と思えるようになったからにほかなりません。 グループとチームは違うという話があります。グループは1つの集団にはなっているけれども、「僕はこれをやりたい」「私はこっちをやりたい」と目的がバラバラの人たちの集まりです。 チームは1つの目標に向かって、みんなのベクトルがそろっている集団です。ゴールに向かって、みんなの想いが1つになっている集団。チームワークという言葉もあるように、互いに助け合って結束力を高めていくのはチームのほうです。 ただし、最初はどんなチームもグループから始まるのだ
アクセシビリティ | SmartHR Design System
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
【画像付き】GA4のコンバージョン設定手順やレポートの見方を丁寧に解説 | 株式会社アドフレックス・コミュニケーションズ
アドフレックスのウェブサイトをご覧いただきありがとうございます。 閲覧の前にプライバシーポリシーに基づいたCookieの取得の同意をお願いします。
ウェブアクセシビリティを享受する日本人は428万人以上！ 文字サイズ拡大・色変更がNGな理由 | ウェブアクセシビリティ導入ガイドブック
ウェブアクセシビリティ導入ガイドブックとはウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。 インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました。その上で、コンテンツの作り方や実装方法を工夫すると、さらに多くの人が多様な状況でウェブサイトや情報を使えるようになります。発信者側が想像していなかった手段や場所で使われるかもしれません。 本ガイドブックでは、ウェブサイトや情報システムにおけるアクセシビリティ、つまりウェブアクセシビリティについて全く知らない、触れたことがない方々が、業務としてウェブアクセシビリティの改善に取り組む
ヒューリスティック分析とは？分析の精度を高める4つのポイント
Webサイトのリニューアルを行うにあたっての事前調査の手法は数々ありますが、その中の一つで欠かせないのがヒューリスティック分析です。これは、ユーザビリティ（使いやすさ）評価の手法の一つで、ユーザビリティの専門家が既知の経験則からWebのインターフェイスを評価し、サイトの課題を抽出する際に活用されています。 原則、このヒューリスティック分析は専門家が行うものですが、ある程度のポイントさえ押さえれば、簡易的な調査を自前で行うことも可能です。これを自前で行えるようになれば、予算や時間が限られている時にWebの提案や社内稟議の書類作り、更には簡易改修点の抽出など幅広くご活用いただけます。本稿では、このヒューリスティック分析を行う際のポイントを紹介します。 ヒューリスティック分析は、分析者の経験則で行う主観的な分析方法です。 被験者を必要とせず、分析者の作業のみで完結することから、労力さえ厭わなけれ
「コピーライターとして生きていこう」と決めた日から、続けてきたことと考えてきたこと 三島邦彦氏（電通 コピーライター） | AdverTimes.（アドタイ） by 宣伝会議
たった一行の言葉で、目の前が明るくなった 2022年、東京コピーライターズクラブのTCC賞で、２つと審査委員長賞の受賞で三冠を達成したコピーライター 三島邦彦さん。大学卒業後、電通に入社し、コピーライターとしてのキャリアは今年で16年目になる。 「ずっとTCC賞に応募していたのですが、全然取れなくて…。2020年にようやく新人賞を受賞したばかりだったので、3つの賞をいただいて、あ、こんなことがあるんだという驚きとうれしさがありました」 プロフィール 長崎県長崎市生まれ。東京大学文学部英文科卒。2008年電通入社。第4CRプランニング局所属。近年の仕事は、Netflix「人間まるだし。」「再生のはじまり」「上を見ろ、星がある。下を見ろ、俺がいる。」など 受賞歴はACC総務大臣賞／グランプリ、小田桐昭賞、TCC新人賞、TCC賞、ONESHOW、CLIO賞、ADFEST、広告電通賞、朝日広告賞・
カフェのWebサイトを作る時のポイントや実例
2023年5月18日 Webデザイン, インスピレーション おしゃれだったり、かわいかったり、落ち着く雰囲気だったりと、一口にカフェといっても様々なコンセプトがありますよね。そんなカフェのWebサイトをあれこれ見て気づいた点や、カフェの雰囲気を反映させたWebサイトの実例を紹介します。 ↑私が10年以上利用している会計ソフト！ カフェのWebサイトをデザインする時のポイント さまざまなカフェのWebサイトを調査しながら感じた共通点や、制作時のポイントなどを見ていきましょう。 店内の様子を大きく見せる カフェは店内の雰囲気を重視している場合が多く、それをどうWebサイト上で表現するかが重要です。画面いっぱいに広がる大きな画像や動画で視覚的にアピールしましょう。可能であればお客さんがいる状態での写真も掲載し、どのような客層が多く利用しているのか、座ったときの客同士のスペースなども見せられるとい
なぜオンラインファシリテーションがうまくいかないのか？～オンライン進行で意識すべき5つの変化～｜河原あずさ@書籍「コミュニティづくりの教科書」 #コミュつく 共著者／コミュニティ・アクセラレーター
Potage代表 コミュニティ・アクセラレーター河原あずです。年間100件、プロデューサー兼ファシリテーターとしてリアルの場づくりを行っていましたが、2020年、新型コロナウイルスの流行以降、舞台がオンラインへと強制移行しました。 2020年、オンラインワークショップやオンラインイベントを数多くやってきましたが、3月～5月はなかなかうまくいきませんでした。配信中、視聴者がどんどん脱落したり、ワークショップ参加者が途中で帰ったこともありました。 やっぱりオンラインだと場づくりは難しいのだろうか……と思ったものの、あきらめずに録画などをみて、自身の進行を振り返ったときに、ある一つのシンプルな事実に気づきました。 なぜうまくいかなかったのか。それは、リアルな場づくりのやり方を、そのままオンラインでもコピーしていたからだ、と。 それ以降「オンラインならでは」のファシリテーション、モデレーションを目
Figma + STUDIO で新規事業のLPを作ったので、プロセスを公開します。｜スマートキャンプ デザインブログ
スマートキャンプのハグリです。 弊社では、Biscuet（リリース後BALES CLOUDに名称変更）という新サービスの事前登録を6月5日(水)に開始しました！ Biscuet（BALES CLOUD）とは？ 営業活動を効率化する、インサイドセールスの最適化を実現するツールです。詳しくはLPをご覧ください。 本記事では、新規事業のLP作成時に考えていたことやプロセスを、Biscuet（BALES CLOUD）のデザインを担当している葉栗が紹介していきます。 LP作成の目的今回は新規事業のLPであるため、サービスの紹介と同時に市場のニーズを確かめる目的がありました。そのために、工数を最小限に早く作る必要がありました。 そこで、LP作成はコーディングをせず、STUDIOで作成することにしました。 STUDIOとは コードを書かずにマウス操作でWebサイトを作成できるサービス LPの作成プロセス
成功するWeb制作ヒアリングの秘訣！重要な5つの項目とは？｜Web Notes
Web制作する時、クライアントさんとのお話はスーパー大切なんだよ♪ ヒアリングっていうのはクライアントさんの要望や目標をしっかり聞き出して最高のウェブサイトを作るための基礎を作るんだよね！ でも、どんなことを確認するのがいいのかな？ この記事ではウェブ制作のヒアリングで絶対にチェックすべきポイントをピックアップしてすごく効果的な方法を紹介するよ♪ 01.ゴールと目的クライアントのウェブサイトやプロジェクトのゴールや目的を明確に把握します。ビジネス目標やターゲットオーディエンスの理解が重要です。 例） 目的：商品のオンライン販売を促進する 目標：月間売上を10%増加させる 02.ターゲットオーディエンスクライアントのターゲットとするユーザーグループについて詳細を確認します。年齢層、興味関心、行動パターンなどを把握することでサイトの設計やコンテンツ戦略に反映させることができます。 例） 年齢層
地方企業におけるWebディレクションの心得 - お問い合わせ・ヒアリング編｜wataru
地元北海道へUターンし、Webディレクターとして奮闘中のwataruです。 前回は、「地方のWeb制作の特徴と魅力」「地方のWeb制作で陥る課題」と、地方の中小企業とご一緒にWeb制作を進めていた自身の考えについて整理しました。 今回は、地方企業におけるWebディレクションの心得について執筆します。 長編になりそうなので、何編かに分けて連載します。 前回までの記事はこちら。 Webサイト制作のお問い合わせに対し、ディレクターが取るべきアクションとは地方企業のクライアントが「Webサイトの制作を依頼したい」とお問い合わせをする裏側には必ず何らかの課題が存在していますが、 「Webサイトを制作したい」という依頼はあくまでクライアントのウォンツなので、その裏側にあるニーズを明らかにする必要があります。 Webサイト制作の受注においても、ユーザー体験向上の仕組みと一緒で、地方の中小企業特有の悩みを
モバイルデザインの重要性：コンバージョン率向上とブランド価値の向上｜Web Notes
モバイルデザインとユーザビリティに関する最新情報をお届けするよ！ ユーザビリティはユーザーの使いやすさを重視しモバイルデザインはスマートフォンやタブレットなどのモバイルデバイスに最適化したデザインを指します。 最近はやはりモバイルファーストデザインが注目されています。 これはモバイルデバイスを優先してデザインしその後にデスクトップ版を考えるアプローチです。 モバイルファーストデザインはユーザーのモバイル利用が増えている現代において重要な要素となっています。 また、アクセシビリティも重要なトピックです。 モバイルデザインでは視覚的なデザインだけでなく声の制御やジェスチャー操作などユーザーが利用しやすい方法を考慮する必要があります。 さらにパフォーマンスも大切です。 ユーザーは高速かつスムーズな動作を求めておりページの読み込み時間やアニメーションの滑らかさなどにも注目が集まっています。 最新情
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration
