週刊Webテク通信

2015年4月第2週号 1位は,WebサイトのA/Bテストを始めるためのヒント,気になるネタは,企業はエイプリルフールのジョークを作る(&発表する)べきでない

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2015年3月30日~4月1日の間に見つけた記事のベスト5です。

1. A Simple Guide To Start A/B Testing On Your Website - Rafal Tomalhttp://rafaltomal.com/blog/ab-testing-guide/

WebサイトのA/Bテストを始めるためのヒントをまとめた記事です。

A/Bテストとは何か,なぜテストを行うのかの解説からはじまり,Webサイト内のどの要素をテストすべきか,どんなツールがあるかの紹介が行われています。

A/Bテストを行う要素としては,以下の4つが挙げられていました。

  1. ヘッドライン
  2. アクションにつながる要素(ボタンなど)
  3. レイアウト
  4. 割引や特典の提示

図1 WebサイトのA/Bテストを始めるためのヒント

図1 WebサイトのA/Bテストを始めるためのヒント

2. 25 Useful HTML5 and CSS3 Tools | Resources | Graphic Design Junctionhttp://graphicdesignjunction.com/2015/04/html5-and-css3-tools/

Webデザイナーや開発者に役立つ,HTML5とCSS3関連のツールをまとめています。

フレームワークやライブラリ,ツール,テクニック,jQueryプラグインなどが紹介されていました。

図2 HTML5とCSS3関連のツールいろいろ

図2 HTML5とCSS3関連のツールいろいろ

3. Home ・ Primerhttp://primercss.io/

GitHubが提供するCSSフレームワークとガイドラインです。GitHub版のBootstrapのようなものですが,Bootstrapに比べるとコンポーネントの数は少なめです。

GitHubで見慣れたユーザーインターフェイスが実現できるので,技術者の人にはウケがいいかもしれません。

まだ「Coming soon!」と出てくる箇所がありますし,今後さらに充実していくのが楽しみです。なお,作者はBootstrapも作っている人のようです。

図3 HTML5とCSS3関連のツールいろいろ

図3 HTML5とCSS3関連のツールいろいろ

4. Grid displayer bookmarklet for Twitter Bootstrap and ZURB Foundationhttp://alefeuvre.github.io/foundation-grid-displayer/

フロントエンドフレームワークのTwitter BootstrapとZURB Foundationのレイアウトグリッドを,Webページ上に表示できるブックマークレットです。

Bootstrapのバージョン2と3,Foundationの2~5に対応しています。それらのフレームワークを使用していないページ上では,グリッドは表示されません。

ページのbodyタグにコードを入れることで,常にグリッドを表示させることも可能です。

図4 BootstrapとFoundationのグリッドを表示するブックマークレット

図4 BootstrapとFoundationのグリッドを表示するブックマークレット

5. Great Examples of Website Design Featuring Corporate Identityhttp://www.onextrapixel.com/2015/03/31/great-examples-of-website-design-featuring-corporate-identity/

コーポレート・アイデンティティ(CI)に有効なWebデザインの実例を紹介しています。

うまく会社のイメージを伝えられているビジュアルが印象的なサイトばかりです。

図5 CIのためのWebデザインのギャラリー

図5 CIのためのWebデザインのギャラリー

そのほか,最近の記事の中から,気になるニュース記事を紹介します。

先週の気になるWebサービス

TeuxDeuxhttps://teuxdeux.com/

TeuxDeuxはシンプルなToDo管理のWebサービスです。かなり昔からあるサービスのようですが,シンプルで使っていて気持ちのいいサービスです。

今日を基準に日付ごとに記入欄が並んでいて,メモ帳に書くような感覚でToDoを記入していけます。クリックすると実行済みのToDoとなって打ち消し線が表示されますし,ダブルクリックでテキスト編集状態になるなど,直感的に作業できます。ドラッグでToDoを移動させることも可能です。マークダウン形式で文字をボールドにしたり,リンクを設定できるところも便利です。

レスポンシブなレイアウトになっていますし,iPhone用アプリも用意されています。〆切と関係ないToDoの場合は,別枠で「SOMEDAY」など別のカテゴリを作って管理することも可能です。よく使うサービスのリンク集を管理するなど,ToDoリストに限らない使い方もできそうなサービスだと思います。

図6 シンプルなToDo管理サービス

図6 シンプルなToDo管理サービス

今週の気になるWebネタ

企業はエイプリルフールのジョークを作る(&発表する)べきでない | TechCrunch Japanhttp://jp.techcrunch.com/2015/04/01/20150331this-is-why-brands-should-not-make-april-fools-jokes/

今年もいろんな企業がエイプリルフール企画を行い,ネットで話題となりました。ネットの普及とともにエイプリルフール企画が定番となってきて,昨今のソーシャルメディアの盛り上がりもあって各社気合いが入っていたようです。

ソーシャルメディアによって情報の拡散力が増したんですが,元ネタを確認せずに拡散する人も増えました。記事タイトルしか見てない人も多く,エイプリルフールネタもタイトルだけ見て信じてしまうような人も多いと思います。なので,わたしも企業のエイプリルフール企画には否定的です。デマが拡散するのと同様,⁠デマでした」⁠エイプリルフールのネタでした」という追加情報は元ネタほど拡散されないのが常です。

なお,Tumblrはエイプリルフールのネタとして「Tumblr ExecutiveSuite」という新機能が搭載されていました。ヘルプ機能としてコピー機のキャラクターが「今日は何をお手伝いしましょうか?」と登場してかわいい動きをしていて面白かったのですが,投稿画面のデザインまで変更されてしまったのには違和感がありました。エイプリルフールと気付かず,本当に新機能だと思った人もいるんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入