最近流行のグロースハック。 効果改善を繰り返し、サービスを成長させる手法ですが、なかでもメジャーな改善施策と言えばABテスト。 以前本ブログではABテストの最大手Optimizelyの解説記事を掲載いたしましたが、今回はGoogleアナリティクスでできるABテスト「ウェブテスト」について紹介いたします。 導入したらどんなことが起こるのか。 そもそもどうやって導入するのか。 そしてOptimizelyとの違い。あたりを説明していきたいと思います。 そもそも、ウェブテストってなに？Googleアナリティクス版ABテストと思っていただいて大丈夫です。 ウェブテストを設定すると、設定したURLへのアクセスが、一定の割合で本来のものと異なるページ（URL）に振り分けられます。 本来のページと異なるページを表示し、どちらのページがより良い成果を出せるか、という比較・テストを実施することができるようにな

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ

最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー

「普段プラグインを使っているけど、自分でスライドショーを組んでみたい！」という人へ！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自体は、キーワード選定をするためだけのツールではないんだけど、その中にある「検索アナリティ

HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

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

2015-05-02 gulpで幸せにマークアップする 最近コーディングがっらぃので幸せになるためgulpを使ってます。ので設定とかを自分へのメモ代わりに残す。ググって適当にやってるからより良い方法あったら教えてほしいです。 gulpとは 一言で言えばフロントエンド開発で使えるタスクランナー。画像圧縮とかsassのコンパイルとかしてくれる。昔はこういうことするときはGruntだったり、GUIツールのCodekitとかが主流だったみたいだけど、最近はみんなこれつかってるぽい。以下を参考にしました。（ただちょっと古い）2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編）lab.sonicmoov.com 導入方法 事前にすること gulpはnode.jsでできてるのでnodeいれて、 sudo npm install gulp -gでグローバル環境にgulpをイン

display: tableの活用 第1回 フレキシブルな段組みレイアウト 2014年4月にWindows XPのサポートが終了し、業務で対応すべきブラウザがIE8もしくは、IE9以上に変化してきます。この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。 はじめに 2014年4月9日にWindows XPのライフサイクルが終了し、普段の仕事でサポートをしなくてはいけないとされるブラウザは多くの場合、IE8以上、あるいはIE9以上へと前進したことでしょう。これにより、レイアウトの手法は大きく変わることになります。 本稿では、display: tableの挙動を解説し、あなたのCSSレイアウトテクニックを向上させることを目指します。 IE8はCSS2.1をフルサポートしています。CSS2.1の仕様内には、displayの値にtableがありますが、IE7までは利用することがで

次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整

価値あるCSSの設計と運用のために 第1回 まず、どうやっています？ 10人のエンジニアがいたら、10通りの進め方があるとも言えるCSSの設計。どのような設計や運用がベターか知りたい人もいるのではないでしょうか。その一端を、座談会形式で話してもらいました。 はじめに このシリーズでは、CSSを設計／運用していくというテーマで、どんなことに注意しているかを話してもらいます。 第1回目となる今回は、設計に入るときに確認したいことです。対応ブラウザやコーディングルールなどの技術面のほかに、デザインカンプや仕様書に「まだ」出ていない情報をどこまで汲み取るのかという「気遣い」「空気を読む」などの話題も出ています。 参加者は、ピクセルグリッドのエンジニア5名です。 高津戸 壮（@Takazudo） 小山田 晃浩（@yomotsu） 山田 敬美（@tacamy） 坂巻 翔大郎（@GeckoTang） 中

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