A/Bテストが無料で捗る！「Google オプティマイズ」の設定と使い方
異なるウェブページをテストするA/Bテストです。リダイレクトテストでは、URLやパスを指定し、リンク先をテストすることができます。 上記の例では、www.example.com、new.example.comどちらに配信したほうが優れているかテストします。 ■テストパターンの例 構成やデザインが異なるLPを比較する為のテスト 多変量テスト（MVT） 多変量テストは複数の要素を変更した場合に、どの組み合わせが最良か判断するテストです。 上記の例では、見出しをH1・H2の2パターン、画像をA・B・Cの3パターン、合計6パターンでどの組み合わせパターンが優勢かをテストできます。何回もA/Bテストする必要がなく、より短時間で多くの要素をテストすることが可能です。ただし、パターンが多くなると、各パターンに対して割り当てられるトラフィックが少なくなるため、結果を得るまでに時間がかかる可能性もありますの
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
SEOが通用しない!? 意外と知らない韓国のWebマーケティング事情
サービスや商品をグローバルに展開するには、現地の調査は欠かせません。Webに限っては、流入確保のために検索エンジンの調査が必要です。Googleのシェアが低く、NAVERが圧倒的な強さを見せる韓国の事情をまとめてお伝えします。 「NAVER」というポータルサイトをご存知ですか？ 多数の方は「NAVERまとめのこと？ NAVERのポータルサイトってあるの？」ってなったと思います。既にご存知の方もいらっしゃると思いますが、NAVERは韓国を代表するYahoo!、Googleのような検索エンジンです。 最近は「NAVERまとめ」で知られているNAVERですが、実は2000年代の前半には日本にも「NAVER」というポータルサイトがありました。日本では2005年には検索エンジンとしてのサービスを一旦終了、2010年に検索事業の再開をしたものの、残念ながら2013年に検索サービスは再度終了し、現在は「
スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利
スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「ScrollReveal」を紹介します。 シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてありますが…） animate.cssのようなCSSアニメーショ
Web制作をぐっと効率化する「スタイルガイド」の作り方とは？
サイト全体の統一感やクオリティの底上げへと繋がるスタイルガイド。まだ作ったことがない方に、スタイルガイドのメリットと考え方、サンプルを紹介します。 デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしまったり。かく言う私もそんな経験のあるデザイナーの一人でした。 ほとんどのサイトがデザイナー1人で作られているわけではありません。サイト規模、プロジェクト規模により、チーム体制も変わりますが、エンジニアやデザイナーが複数人でサイトを作り上げることも多いのではないでしょうか。フリーランスのデザイナーであれば外部リソースとのやりとりなどが必要になる場合もあります。 今回はサイト制作時に役立つだけでなく、
当たり前すぎてデザイナーが見落としがちな、サイトを使いやすくする3つのTips
ついつい見た目を優先してしまった結果、ユーザビリティがおろそかになってしまった経験はありませんか？ 常に頭の片隅に入れておきたい、Webサイトを使いやすくする3つのTipsを紹介します。 アドビによると、コンテンツを15分間閲覧したときに、ユーザーの3分の2は地味なものよりも視覚的に魅力的なものに目を奪われているそうです。ユーザーは同時に、5秒以内にサイトが表示されることも望んでいます。デザイナーはサイトやアプリの速度と満足度を同時に追求しなければなりません。 私たちデザイナーにとって、外観のデザインの重要さを見落とすことはないでしょう。美しいデザインが大好きです。しかし、限られた作業時間のなかで見た目を大切にするあまり、使い勝手を犠牲にしがちです。アプリやWebサイトの使い勝手を最適にするためには、訪問者の目的を深く理解する必要があります。 分かりやすいUIか？ 「障害」はどれくらいある
時代遅れのデザインでもAmazonから学びたい、UX設計4つの手法
Amazonのすごさは圧倒的な品揃えとスピードだけではありません。ECサイトのUXデザインを考える上で参考にしたい、基本的な手法を紹介します。 Amazonのビジュアルデザインが劣悪で時代遅れだと、多くのデザイナーやUXエキスパートが同意するでしょう。それなのにAmazonからUXを学ぶ記事に違和感を抱く人もいるかもしれませんが、まずは読んでください。 Amazonのビジュアルデザインに改善の余地はたくさんありますが（特にユーザーの目が肥えてきたので）、UXに関してはAmazonから学べることがあります。実際AmazonのUXシステムは効果的で、2016年のアメリカにおけるオンラインショッピング成長の53%をAmazonが占めているとの研究もあります。 アメリカほど巨大で多様な国において、1社でショッピング売上成長の53%をも占めるAmazonの手法を紹介します。 1. 高精度なおすすめ紹
Webデザイナーがぶつかる「デザインの壁」を打ち破る！海外サイト10選
Webデザインの仕事を長く続けていくと、どんなに新トレンドを取り入れてるつもりでもマンネリ化してしまうもの。新しいアイデアを得られるサイトを10個紹介します。 デザインの種類を問わず、発想のヒントをくれるサイトがあります。最適なフォントの組み合わせならTypewolf、サイトリニューアルのアイデアなら最新のWebby Award受賞作品をチェックしてはいかがでしょう。 しかし、頼りすぎるのは危険です。多くのデザイナーが同じアイデアに影響を受けたら、既存作品の焼き直しがあふれます。いままでにない独創的なアイデアは生まれません。 デザインの発想をもたらす新しい情報源を増やしましょう。ここで紹介する10個のWebサイトは想像もしなかった形のアイデアをくれるはずです。 1．99% Invisible 99% Invisible（目に見えない）は、Roman Marsがホストを務めるラジオ番組とブロ
イラっとしない超ミニマルなフォームバリデーションを素のJSで実装しよう
フォーム送信前のバリデーション（検証）は欠かせませんが、あまりリッチな機能ではかえって使いにくくなることもあります。なるべくブラウザーの機能を使って、シンプルなバリデーション機能を実装する方法を解説します。 HTML5ではブラウザーベースのフォームバリデーションを実装するために、新しい属性がいくつか導入されました。たとえばpattern属性はtextarea要素やinputに対して有効な入力値を正規表現で定義し、required属性はフィールドが必須かどうか指定します。新しい属性が実装されていないレガシーなブラウザーでは、ポリフィルを実装するためのベースとして値を利用できます。これらの属性は、フォームの即時バリデーションを実現するなど、面白い機能強化に使えます。 バリデーションを厳しくしすぎると、ユーザーの自然なブラウジング動作を遮り、邪魔になってしまいます。たとえば、あるフィールドが不正
Flexboxでサクッと作る！いまどきのメガメニューのマークアップ
Webサイトを効率よくレイアウトできるFlexbox。メガメニューの実装を例に、具体的な活用方法を紹介します。 ご存じの方もいるとおり、Flexboxはブラウザーサポートが増えて、はずみがついています。Flexboxなら、使いたくないCSSやJavaScriptハックを扱わずに、複雑なユーザーインターフェイスを作れます。 Flexboxはリニアレイアウトモデルを採用しており、スペースの計算をせずにコンテンツを上下左右にレイアウトできます。Flexレイアウトはコンテナ内の要素にレスポンシブに反応するので、メディアクエリの使用を減らせます。 この記事では、リニアレイアウトモデルを使い、メガナビゲーションメニューを作ります。メニューを作る中で、Flexboxでユーザーインターフェイスコンポーネントを簡単に作成し、拡張できることを体験してください。 Flexboxの特徴を詳しく解説するのではなく、
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門
floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ
こんなにあった！UIデザイナー向けアニメーションライブラリー最新ベスト9
Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも？ Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。 これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。 この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。 「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ
なぜコンバージョンは伸び悩むのか？ LPOやA/BテストでCROする最強の方法
デジタルマーケティングでは「最適化」がたびたび話題になります。検索エンジン、ソーシャルメディアのトラフィック、PPC広告、コンテンツマーケティングなどにWebサイトやページを最適化してアピールする方法はいろいろあります。最適化は一般的に、より多くの人をコンバージョンプロセスに誘導する、つまりファネルの入口をいっぱいにすることに焦点を当てています。 しかし、ファネルの出口でほとんどの人が離脱してしまっていたらどうしますか？ そこで必要になるのが、コンバージョン率最適化（conversion rate optimization：CRO）です。 コンバージョン率最適化とは？ コンバージョンファネルを最適化する秘策を紹介する前に、コンバージョン率最適化と、おさえておくべき用語を解説します。 コンバージョン率最適化とは、正式には解析とユーザーのフィードバックを構造的、体系的に利用して、Webサイトの
長すぎるスマホサイトをスマートにリデザインする6つのコツ
スマホ対応していないWebサイトはもはや少なくなりましたが、あなたのサイトはよいUXを提供できていますか？ 「長すぎるページ」を解決するデザインのコツを紹介します。 進化の早いデジタルの世界におけるデザイナーの役割は、ユーザーに無駄な時間を使わせないようなシンプルなインターフェイスを提供することです。デザインをシンプルにした分だけ、よい多くのコンバージョンを期待できます。とはいえ、市場の大半をモバイルデバイスが占めている現在では、シンプルなインターフェイスを提供するのは簡単ではありません。 なによりモバイルデバイス経由のオンラインショッピングが増えている中で、モバイルユーザーにとって使い勝手が良いWebサイトを構築することが欠かせません。そこで問題になるのがロングスクロールのWebサイトです。 ロングスクロールページの問題 モバイルユーザーはロングスクロールWebサイトへのアクセスを敬遠し
もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた
Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証など、どんどん進化しています。これは便利です！ Webサイトのテストはますます複雑になっています。ほんの数種類のブラウザーで機能の互換性を確認していた時代は遠い昔の話。ピカピカの傑作サイトも、OS、画面解像度、マシン性能が異なる幅広いデバイス（モバイル、タブレット、デスクトップ）での動作確認が求められます。極端な話、開発そのものと同じくらい時間がかかってしまうことさえあります。 Webサイトのテストはタッチスクリーンと高解像度画面の登場でさらに複雑になりました。通常のPCにマウスとキーボードをつないで開発していたら、せっかくのWebサイトがどう動くか確認するのは困難です。たとえば、マウスポインタを乗せたときの動作などは必ずしも機能せず、
なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか
コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
Mediumに学ぶ！SVGシンボルとCSSでロゴやグラフィックを効率よく使い回すノウハウ
SVGの一部をCSSで操作してもっと効率よく使い回ししたい…そんなときは、ちょっとした発想の転換が必要です。ヒントはMediumのロゴにありました。 2016年、SVGは、ファイルサイズ、スケーラビリティ、CSSのおかげで、Webページで広く使われるようになりました。 場合によってはアイコンフォントのほうが好まれることもありますが（「Build Your Own SVG Icons」参照）、アイコンシステムとして使われることもあります（「The Great Icon Debate: Fonts Vs SVG」参照）。 それだけではありません。SVGはロゴやグラフィック要素にも使えます（少なくとも、過度に複雑なものでなければ）。また、もともと柔軟性に富んでいるので、レスポンシブなWebサイトを作るには完璧な味方になってくれます（Sara Soueidan「Making SVGs Respon
そのやり方で大丈夫？ 被リンクを安全に増やす外部SEOの4ステップ
外部SEO（オフページSEO）の基本は被リンクを増やすこと。でもただリンクを増やせばいいわけではありません。質のいいリンクを得るための基本的手法を4ステップで。 オンページSEOのチェックポイント（『「良質なコンテンツ作り」 と合わせて取り組む！いま必要な内部SEO総まとめ』参照）をすべて確認できたら、次はオフページSEOのチェックに進みます。しかしどこから着手すれば良いでしょうか？ 被リンクは言うまでもなく重要ですが、オフページSEOで注意すべきなのはそれだけではありません。オフページSEO対策には気が遠くなるような作業が必要で、一見よくできたSEOでさえ問題が見つかります。そのため、オフページSEO対策を小さな作業単位に分割することでリンクジュースの獲得、Webサイトに対する信用や信頼の構築に着手しやすくします。 リンクの審査 被リンクがページの検索順位を上げる上でもっとも重要な検索順
ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？ ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
