週刊Webテク通信

2013年8月第3週号1位は、Webサイトから人が離れる10の理由、気になるネタは、Apache Web サーバーのシェアが50%を切る

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

1. Top 10 Reasons People Leave Your Website | Infographicshttp://enfuzed.com/top-10-reasons-people-leave-your-website/

Webサイトから人が離れる10の理由を、インフォグラフィックスで解説しています。

  1. 読み込みが遅い
  2. 広告が多すぎる
  3. ポップアップやモーダルウィンドウを開く
  4. ビデオやサウンドを自動再生する
  5. デザインやユーザビリティがお粗末
  6. 広告ページへのリダイレクト
  7. コンテンツやレイアウトがお粗末
  8. 情報が古い
  9. モバイル端末を考慮していない
  10. 連絡先や運営元に関する情報がない
図1 Webサイトから人が離れる10の理由
図1 Webサイトから人が離れる10の理由

2. Add Depth to Flat UI with Flat Shadow.jshttp://www.onextrapixel.com/2013/08/09/add-depth-to-flat-ui-with-flat-shadow-js/

Flat ShadowというjQueryプラグインを利用して、テキストやアイコンフォントにフラットな影を適用するチュートリアル記事です。

フラットデザインと相性のいい、⁠ロングシャドー」を簡単に作ることができます。影の方向や色、フェードアウトのON/OFFの設定が可能です。

図2 ロングシャドーを作るjQueryプラグインの使い方
図2 ロングシャドーを作るjQueryプラグインの使い方

3. 40 CSS3 Animated Button Tutorials And Experiments | Free and Useful Online Resources for Designers and Developershttp://www.smashingapps.com/2013/08/12/40-css3-animated-button-tutorials-and-experiments.html

CSS3を使った、アニメーションするボタンを40種類紹介しています。

ロールオーバー時に色が変わり、クリックでボタンがへこむ程度の効果が多いようです。

中には、ロールオーバー時に追加のテキストが表示されたり、アイコンがアニメーションするような凝った効果のものもありました。

図3 CSS3によるアニメーションボタンいろいろ
図3 CSS3によるアニメーションボタンいろいろ

4. 15 Responsive Navigation jQuery Pluginshttp://speckyboy.com/2013/08/01/15-responsive-navigation-jquery-plugins/

レスポンシブなナビゲーションを実現するjQueryプラグインを多数紹介しています。スマートフォンサイズでの表示のときに、開閉するメニューなどを作れます。

サイドメニューが横からスライドして現れるものや、垂直メニューが上から現れるものなど、よく使われるパターンがある程度網羅されています。

図4 レスポンシブなナビゲーションのためのjQueryプラグイン
図4 レスポンシブなナビゲーションのためのjQueryプラグイン

5. Dominating Bold Type in Website Design: New Examples - Designmodohttp://designmodo.com/bold-type-website-design/

太い書体が使われたWebデザインのギャラリーです。文字中心にシンプルに作られたものが多いようでした。

細いフォントの方が最近のトレンドですが、太めの文字が目立つようにレイアウトされているのもやっぱりいいですね。

図5 太い書体が使われたWebデザインのギャラリー
図5 太い書体が使われたWebデザインのギャラリー

そのほか、最近の記事の中から、気になるツールを3つ紹介します。

  • FeedPress
    FeedBurnerの代わりになりそうなRSSフィード管理ツールです。以前はURI.LVという名前でした。
  • 6秒間の動画を友人限定で共有する「ともらっち⁠⁠--ソーシャルランチ生みの親が新サービス - CNET Japan
    友達間で動画を見せ合うスマートフォン向けサービスです。
  • 手軽でおすすめなスクリーンキャストを撮れる無料アプリ『QuickCast⁠⁠ : ライフハッカー[日本版]
    パソコンの操作を録画するMac用無料アプリの紹介です。
  • 先週の気になるWebサービス

    Design Your Own Responsive Page Layout - Responsive Web CSShttp://www.responsivewebcss.com/

    レスポンシブなレイアウトのベースとなるCSSを作成するWebサービスです。

    コンテンツ領域、メニュー領域などのセクションを作成し、横幅をパーセントで設定します。横幅をターゲットサイズ毎に設定することで、レスポンシブなレイアウトを作れるようになっています。

    ちょっと分かりにくいのですが、⁠+」ボタンを押して作られるのは、そのセクションの子セクションです。同じ階層のセクション同士でないと、横並びにはなりません。

    レイアウトが完成したら、⁠EXPORT」ボタンで書き出します。生成されるのは、HTMLファイルとCSSファイルです。複数ページ用のHTMLとCSSを、一気に作れるところが便利そうです。

    図6 レスポンシブデザイン用のCSSを作成するサービス
    図6 レスポンシブデザイン用のCSSを作成するサービス

おすすめ記事

記事・ニュース一覧