週刊Webテク通信

2014年1月第2週号 1位は,Webサイトの直帰率を減らす方法,気になるネタは,ビズ・ストーン氏,画像利用のクラウドソーシング検索サービス「Jelly」を発表

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

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

1. Reducing Your Website's Bounce Ratehttp://www.designyourway.net/blog/resources/reducing-your-websites-bounce-rate/

Webサイトの直帰率を減らす方法について解説しています。

  • よい設計と訪問者への最適化
  • 迷惑なページ要素(いら立たせる広告,ポップアップなど)を使用しない
  • 良いタイポグラフィを使う
  • ページの読み込み時間を短くする
  • レスポンシブかつ使いやすいサイトにする
  • 独自の404ページを持つ
  • 関連するコンテンツを表示する

図1 Webサイトの直帰率を減らす方法

図1 Webサイトの直帰率を減らす方法

2. Hover.css - A collection of CSS3 powered hover effectshttp://ianlunn.github.io/Hover/

マウスオーバーでボタンにいろいろな効果を与えるコードを配布しています。

CSS3を利用した拡大/縮小/回転など,ちょっとした効果を簡単に加えることができて便利そうです。

図2 マウスオーバーでボタンにいろいろな効果を与えるコード集

図2 マウスオーバーでボタンにいろいろな効果を与えるコード集

3. The Best Tools of 2013 for Designers and Developershttp://thedesignblitz.com/the-best-tools-of-2013-for-designers-and-developers/

Webデザインに役立つツールを大量に紹介した記事です。

2013年1年分のまとめということで78個ものツールが掲載されていました。

図3 Webデザインに役立つツールの2013年まとめ

図3 Webデザインに役立つツールの2013年まとめ

4. A Showcase of 20 Super Minimalist Portfolio Websites | OmahPSDhttp://omahpsd.com/2014/01/minimalist-portfolio-websites/

ミニマルなポートフォリオサイトのギャラリーです。

ミニマルなデザインはレスポンシブにしやすいという利点もあると思いますが,実際ほとんどのサイトがレスポンシブ対応となっていました。

図4 ミニマルなポートフォリオサイトのギャラリー

図4 ミニマルなポートフォリオサイトのギャラリー

5. 10 Great Bootstrap Design Tools For Web Designers and Developers 2014 | DesignDrizzlehttp://designdrizzle.com/10-great-bootstrap-design-tools-for-web-designers-and-developers-2014/

Bootstrapのためのデザインツールを多数紹介しています。Bootstrapを利用したサイトを作る場合に,オンラインでレイアウトなどを作成できるサービスです。

Githubに買収された「Easel」も2番手に紹介されていました。

図5 Bootstrapのためのデザインツールいろいろ

図5 Bootstrapのためのデザインツールいろいろ

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

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

Useful Tools For Testing Your Site On Mobile Devices | Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2014/01/09/useful-tools-for-testing-your-site-on-mobile-devices.html

今回は,モバイルデバイスでのWebページの表示チェックツールが多数紹介された記事を取り上げます。

レスポンシブWebデザインのサイトを作った場合,複数デバイスでのチェックが面倒ですが,これらのツールを使えば第一段階での表示チェックに便利なはずです。

単にウインドウサイズを変更しているだけのものと,レンダリング自体をエミュレートしているものとがあるので注意が必要ですね。

結局は実機でのテストが一番確実なんですが,最初の段階でのチェックには,こういったツールを利用すると効率的だと思います。

図6 モバイルデバイスでのWebページの表示チェックツール

図6 モバイルデバイスでのWebページの表示チェックツール

今週の気になるWebネタ

ビズ・ストーン氏,画像利用のクラウドソーシング検索サービス「Jelly」を発表 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1401/08/news043.html

Twitterの共同創業者の一人ビズ・ストーンが,スマートフォンで撮影した画像が何かを友達に教えてもらうというサービス「Jelly」を開始しました。iOSとAndroid用のアプリが提供されています。撮影した画像に質問のテキストを付けて投稿すると,TwitterかFacebookで繋がっている人から答えがもらえるかも,というものです。

画像はその場で撮影するだけでなくカメラロールから選べますし,Google画像検索で探した画像を使うことも可能です。画像に指で書き込みもできます。とにかく操作法がシンプルでよくデザインされているので,使っていて気持ちがいいアプリですね。使われ方もユーザー次第なところもあるので,思いもよらない使い方がされることもありそうな予感がします。

nanapiの「アンサー」やLINEの「LINE Q」など,スマートフォンに特化した国産のQ&Aサービスもありますし,これからの注目分野になっていくのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入