週刊Webテク通信

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

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

ネットで見かけた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のテーマを簡単に作れるサービス

今週の気になるWebネタ

サンスター,スマホ連携するスマート歯ブラシ「G・U・M PLAY」 加速度センサーで磨き方をチェック - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1510/19/news064.html

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入