週刊Webテク通信

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

ネットで見かけた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ページの表示チェックツール

おすすめ記事

記事・ニュース一覧