週刊Webテク通信

2014年5月第1週号1位は、無限スクロールの正しい使い方、気になるネタは、SNSで反応を得やすい文字数:Twitterは100文字、Facebookは40文字

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

1. How to use the infinite scrolling trend, the right way | Webdesigner Depothttp://www.webdesignerdepot.com/2014/04/how-to-use-the-infinite-scrolling-trend-the-right-way/

無限スクロールの正しい使い方について解説しています。

  1. JavaScript非対応の環境も考慮する
  2. 次のコンテンツをロードしていることをビジュアルで示す
  3. ブラウザの戻るボタンが機能するようにする
  4. ナビゲーションが表示され続けるようにする
  5. 遅延ロードされるコンテンツを先読みする
  6. リンクは別ウインドウで開くようにする
  7. フッターは邪魔になることがある

1の解説では、通常のページネーションを用意しておき、JavaScriptが使える環境では無限スクロールになるようにすることが提案されていました。

図1 無限スクロールの正しい使い方
図1 無限スクロールの正しい使い方

2. Useful Tips to Create Better User Navigation | TheNeoDesign.comhttp://theneodesign.com/create-better-user-navigation-tips/

良いナビゲーションを作るためのヒントを紹介した記事です。

  1. ユーザーの視点を持ち続ける
  2. シンプルなナビゲーション
  3. 明快で目立つナビゲーション
  4. リンクを整理する
  5. 一貫性を保つ
  6. どのページからでもナビゲートできるようにする
  7. ページネーションは重要
  8. クリックする回数を最小にする
  9. 検索機能を入れる
  10. 使いやすさが重要

7では、ページネーションでページ番号を入れることは、現在ユーザーのいる場所を示す上で重要なので、⁠次」⁠前」だけのナビゲーションだけではダメだといった解説がありました。

図2 良いナビゲーションを作るためのヒント
図2 良いナビゲーションを作るためのヒント

3. Changing The Face Of Web Design: A Case Study Of 25 Yearshttp://www.hongkiat.com/blog/changing-faces-of-web-design-25-years/

Apple、GAP、ハイネケンのWebサイトを1997年のものから振り返り、現在のものはどういった点で良くなっているのかを解説しています。

それを受けて、現在のトレンドをまとめていました。

装飾しすぎずシンプルにというのは当然ながら、現在のWebデザインでは「unique=他にない」要素も重要というのが以下の項目で説明されていました。

  • 他とは違ったフォントを使う
  • そのサイトのために用意した写真を使う(ストックフォトなどではなく)
図3 Webデザインの変遷と現在のトレンド
図3 Webデザインの変遷と現在のトレンド

4. Top 10 Web Design Trends to Watch in 2014 | TeslaThemeshttp://teslathemes.com/blog/top-10-web-design-trends-to-watch-in-2014/

Webデザインのトレンドについてまとめた記事です。

10番目に取り上げられたSVGアニメーションだけが目新しい内容でした。

SVGアニメーションのためのJavaScriptライブラリも充実してきたとして、代表としてSnap.svgにリンクしていました。

図4 2014年のWebデザインのトレンド
図4 2014年のWebデザインのトレンド

5. Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Trickshttp://css-tricks.com/icon-fonts-vs-svg/

インラインSVGとアイコンフォントとを比較した記事です。

ブラウザサポートの点を除けば、インラインSVGの方がほとんど全ての点で優れていると結論づけています。IE9以上とAndroid3以上なら問題ないようです。

図5 インラインSVGとアイコンフォントとの比較
図5 インラインSVGとアイコンフォントとの比較

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

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

Perfect Icons - A social icon creation tool.http://perfecticons.com/

アイコンフォントを利用した、各種ソーシャルメディアアイコンを作れるWebサービスです。TwitterやFacebookなどの自分のページへリンクするためのアイコンを簡単に用意することができます。

主要なソーシャルメディアサービスのアイコンが揃っており、それぞれのサービスのおなじみの色が最初から付くようになっています。

アイコンのサイズ、角丸の割合、間隔、色が調整できます。また、ホバー時に「明るくなる/暗くなる/上に移動/拡大」といった効果も加えられます。

アイコンフォントはダウンロードして自分のサーバーに入れるようになっており、CSSとHTMLはここからコピーして使います。

図6 各種ソーシャルメディアアイコンを作れるサービス
図6 各種ソーシャルメディアアイコンを作れるサービス

おすすめ記事

記事・ニュース一覧