週刊Webテク通信

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

ネットで見かけた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管理サービス

おすすめ記事

記事・ニュース一覧