週刊Webテク通信

2015年10月第5週号1位は、Webサイトの直帰率を下げるためのヒント、気になるネタは、サンスター、スマホ連携するスマート歯ブラシ「G・U・M PLAY」 加速度センサーで磨き方をチェック

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

1. How to Get Your Website Bounce Rate Down | JUST? Creativehttp://justcreative.com/2015/10/19/7-ways-to-get-your-website-bounce-rate-down-and-why-you-must-take-action/

Webサイトの直帰率を下げるためのヒントを紹介しています。

  1. ポップアップをなくす
  2. ランディングページを用意する
  3. ボタンなどのユーザーが操作する要素を最適なものにする
  4. 関連性の高いコンテンツを勧める
  5. 検索できるようにする
  6. 素早く操作できるようにする
  7. レスポンシブデザインにする
  8. ユーザーの求めるものを提供する
図1 Webサイトの直帰率を下げるためのヒント
図1 Webサイトの直帰率を下げるためのヒント

2. Animated Gameboy in CSShttp://www.bchanx.com/animated-gameboy-in-css-blog

CSSで描いたアニメーションするゲームボーイと、そのCSSでの記述方法の解説です。

画像かと思った部分が実は文字だったり、1文字づつ表示されるアニメーションを作るのに「::before」⁠::after」を使っていたりと、なるほどというアイデアが詰まっていて面白いです。

図2 CSSでアニメーションするゲームボーイと解説
図2 CSSでアニメーションするゲームボーイと解説

3. Circular Images with CSShttp://sixrevisions.com/css/circular-images-css/

画像を円形にトリミングする方法を解説しています。すでによく使われているテクニックですが、⁠border-radius」を50%にして円形にしています。

写真が縦長か横長かでのコードの書き方の違いなども詳しく説明してあり、いざという時のためにブックマークしておきたい内容です。

図3 画像を円形にトリミングする方法
図3 画像を円形にトリミングする方法

4. CSS Buttonshttp://cssbuttons.tumblr.com/

HTML5/CSS3とJavaScriptで作られたボタンをまとめたギャラリーサイトです。コード共有サイトのCodePenから探してきているようです。

ボタンのコードスニペットをまとめた20 Code Snippets for Interactive Buttons(という記事もありました。

図4 CSSボタンのギャラリーサイト
図4 CSSボタンのギャラリーサイト

5. A Guide to Next-Generation Design Toolshttp://spyrestudios.com/a-guide-to-next-generation-design-tools/

プロトタイプ作成とデザイン作成を次のレベルにしてくれる、次世代デザインツールを3つ紹介しています。

おなじみSketchとMacaw、AdobeのProject Cometが紹介されていました。

図5 次世代デザインツールを3つ紹介
図5 次世代デザインツールを3つ紹介

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

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

Strapping!http://bbrennan.info/strapping/

「Strapping!」はBootstrapのテーマを簡単に作れるWebサービスです。ベースとなるテーマを選び、そこからカスタマイズしていくことができます。

フォント、色、サイズなどをカスタマイズしていくのですが、それぞれの要素ごとにテキストフィールドが用意されているだけという、いたってシンプルな設定方法です。

右側にプレビューが表示されているのですが、このプレビューエリアをブラウザ幅いっぱいに広げたり、大、中、小、極小とボタンで切り替えられるのが便利です。

ちょっとわかりにくかったのですが、⁠Preview」メニューを選ぶとCSSのコードを取得できます。

図6 Bootstrapのテーマを簡単に作れるサービス
図6 Bootstrapのテーマを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧