週刊Webテク通信

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

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

ネットで見かけた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を作成するサービス

    今週の気になるWebネタ

    Apache Web サーバーのシェアが50%を切る ― シェアを奪ったのは Microsoft IIS - インターネットコムhttp://japan.internet.com/webtech/20130813/3.html

    Apache HTTP Serverのシェアが,2009年12月以来初めて50%を切ったということが,ニュース記事になっていました。Microsoft Internet Information Server(IIS)がシェアを伸ばしているようなのですが,現状Apacheが47%,IISが23%と,まだまだApacheのシェアがダントツのようです。

    Webサーバーといえば,ApacheかIISしか思い浮かばないのですが,この記事によるとオープンソースのnginxというものが最近注目されているようでした。このnginx,なんと「エンジンエックス」と呼ぶそうです。名前がかっこいいです。

    Webのテクノロジーはどんどん新しいモノが出てきますが,サーバーは安定運用が何よりも重要なので,実績のある「枯れた」技術が重要なのでしょう。そんな中,2006年くらいから徐々にシェアを上げていき,現在3位に付けているnginxには期待したいですね。WordPress.comでも使われているそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入