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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サンスターから、スマートフォンと連携するスマート歯ブラシが発表されました。専用のアタッチメントをつけることで、普通の歯ブラシがスマホとBluetoothで連携するデバイスになるというわけです。

小さい子供に楽しく歯磨きをしてもらおうというアイデアは面白いと思います。アプリ次第で色々できそうですし、長い目で育てていってほしい商品です。

JINSのメガネ型デバイス「JINS MEME」もそうですが、センサーを付けてスマホと連携させると面白そうなモノはまだたくさんあるでしょう。そして、どれだけ面白かったり便利だったりするかはアプリ次第ということになりますね。