Webサイトを運用・改善するためにサイトの分析をしようと、Googleアナリティクスと毎日にらめっこをしている方も多いのではないでしょうか。 しかし、アクセス解析ツールを導入してただ漫然と眺めているだけでは、Webサイトの成果を上げるための分析はできません。しっかりと成果につながるサイト分析を行うためには、分析するための「視点」が必要です。 本記事では、Webコンサルティングを行っていた私のサイト分析方法をご紹介しようと思います。私の会社では、徹底的に成果にこだわるコンサルティングを行い、100社程のお手伝いをしてきました。その100社全てで確実に成果を出してきた分析手法を説明します。 筆者の分析方法による実績（一例） •中古本販売ECサイト　CVR120% •コンタクトレンズECサイト　売り上げ130% •看護師専用転職サイト　CVR4.4倍 •大手プロバイダサイト　CVR2倍 本記事で

Adobe Illustrator CC は、毎年6月に CC 2014 → CC 2015 のようにメジャーアップデートされますが、2016年6月は CC 2016 ではなく「CC 2015.3」というマイナーアップデートでした。 しかし、Web制作者にとっては嬉しい機能も追加されたため紹介します。 アセットの書き出し Photoshop には随分前から付いていましたが、ようやく Illustrator にも付きました。 アセットの書き出し方法はいくつかあり、 書き出したいオブジェクトやグループを「アセットの書き出し」パネルにドラッグする 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［収拾 (書き出し用)］メニューを選択する 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［選択範囲を書き出し…］メニューを選択する 書き出したいオブ

何となくで決めていたりしないでしょうか。 出た案のどれにするかの悩みを解決するために使われているのが、「ABテスト」という手法です。 ある会社では、「ABテスト」をすることでコンバージョン率が8.3倍なった例もあるそうです。 ※参考：【実録】36回のABテストでCV率8.3倍を実現するまでの全記録 | LPO研究所 今回は、GoogleアナリティクスでABテストを行う方法を中心に、なぜABテストが必要なのかとともに解説します。 ABテストは、スプリットランテストとも呼ばれ、新聞や雑誌などでも使われる効果測定の手法の1つです。 紙媒体などでは「スプリットランテスト」のほうが一般的で、Web媒体などでは「ABテスト」が一般的かもしれません。 具体的には、広告や表現の一部を変化させ、同じ期間で出し分けを行い、それぞれの反応率などを測定する方法です。 A案とB案、どちらがユーザーからの反応がいいの

Google アナリティクスは、Googleが提供している無料で高機能なアクセス解析ツールです。しかし、高機能な故に使い方も複雑で、なかなかうまく使いこなせていない人も多いのではないでしょうか。 この記事では、そんなGoogle アナリティクスの使い方がイマイチピンと来ていない方に、普段無料でGoogle アナリティクスの使い方に関する勉強会を開催しているWebコンサルタントが丁寧にご説明します。 ● Google アナリティクスを使う上で知っておかなければならない用語は何？ ● どういう時にGoogle アナリティクスを使えばいいの？ ● どのページのどの数字を見ればいいの？ など疑問をお持ちの方はぜひ参考にしてみてください。 ※本記事は株式会社WACUL提供によるスポンサード・コンテンツです。 Googleアナリティクスで把握できること／できないことGoogleアナリティクスを活用する

「普段プラグインを使っているけど、自分でスライドショーを組んでみたい！」という人へ！jQueryの勉強になりました〜。 1、jQueryを読み込む <script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 2、htmlを記述。画像を読み込みます。 <div id="stage"> <img src="img1.jpg" id="img1"> <img src="img2.jpg" id="img2"> <img src="img3.jpg" id="img3"> </div> 3、cssを記述。 absoluteを指定して画像を重ね、一枚目のみ表示します。 <!-- css --> <style type="text/css"> /*

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ

どうも、ブログマーケッターJUNICHIです。 やっぱりブログって色んな事書かないと飽きて続きませんね。 SEOの記事ばっかりだと頭使うから疲れます。 でも頑張れる限りは、キーワードの話をします。 今回は、多くの人が無視している、超素晴らしいキーワード選定ツールの紹介です。 それは、GoogleのSearch Consoleです。 もともと、Googleウェブマスターツールって呼ばれていたツールです。 Search Consoleを導入して、2～3カ月以上WEBサイトを運営している人ならば、このツールを上手に使う事で、掘り出し物のキーワードが見つかるので、是非この使い方を覚えてみて下さい。 Search Consoleの『検索アナリティクス』・『検索クエリ』は超優秀なツール Seach Console自体は、キーワード選定をするためだけのツールではないんだけど、その中にある「検索アナリティ

こんにちは。Googleアナリティクスラブのカグア！です。 Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか？ なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位でA/Bテストする方法が書いてありましたので、ご紹介します。 実際試しましたけど、実装もすごい簡単でしたよ。 追記：2017年2月8日　GTM実装しているのならば、Googleオプティマイズとの組み合わせが、もはや最強かもしれません。 ＞＞Googleオプティマイズを使えたのでざっくり解説！時代はGGOP 関連記事 ＞＞A／Bテストの失敗事例、テストすること自体が有効という思い込み GoogleアナリティクスのA/Bテストとは 正式にはウェブテストという名称です。Googleアナリティクスのレポート内の行動＞ウェブテスト にあります。 ランデ

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その１―とりあえず動かすところまで gulp入門その２―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru

フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？　イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで

inline layoutを使いこなす 第1回 画像の余白 1 vertical-align: topの指定で、画像の余白はなぜ消えるのでしょう？ 要素がどのようにレイアウトされていくのかinline layoutの仕様を理解すると、なぜそうなるのかがきちんと説明できるようになります。 はじめに 本シリーズでは、なんとなく使っているけれど、実はあまりよく知らないという人も多いであろうinline layoutについて解説します。 このシリーズで言うinline layoutとは、簡単に言うと、行やdisplayプロパティがinlineやinline-blockである要素、またそれに隣接するテキストなど、block box内に配置されるコンテンツが、どのようにレイアウトされ、ブラウザに表示されるかを示した仕様のことを指します。Web上で参照できるW3Cの仕様としては、以下に概ねまとめられてい

CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル

Delightful tools for WordPress Developers The easiest and fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API's. Join Now Login

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

子供の頃から絵を描くこと（ラクガキ）が大好きでした。 とはいえ、絵を仕事にする画家や漫画家になりたいというのはあまりなく、ただ単に絵を描くことが好きでテストの裏紙やノートや手帳に描いたりがほとんど。 それもあって「これは自分が楽しむためのラクガキなんですよ」といい続けてきました。 そんなある日、このブログで私のラクガキを見てくれた知人の「僕も絵を描けるようになりたいんです！」というリクエストに応えるために「ハッピーラクガキライフ」というラクガキ講座を開催することになりました。 今回はその講座の中でも一番キャッチーで多くの人に喜んでいただいている「絵が苦手な人でも一瞬で100の表情が描けるようになるテクニック」をご紹介したいと思います。 人間の表情を構成する要素 人間には人の顔にとても敏感に反応する本能が備わっています。この現象のことを「シミュラクラ現象」といいます。 ▼点3つが顔に見えるこ