週刊Webテク通信

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

Webテク, Webデザイン, Web広告, SNS, アイコン, スマートフォン

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

ネットで見かけた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　各種ソーシャルメディアアイコンを作れるサービス

今週の気になるWebネタ

SNSで反応を得やすい文字数：Twitterは100文字，Facebookは40文字 : ライフハッカー［日本版］http://www.lifehacker.jp/2014/04/140427statuslength.html

TwitterやFacebookにスケジュール投稿できるサービスであるBufferのブログによると，Twitterは100文字，Facebookは40文字が反応を得やすいとのことです。

Twitterより長文が書けるFacebookのほうが短いところが面白いですが，これは画像+テキストという投稿が多いからでしょうね。そして，画像の投稿の方が「いいね！」やコメントが付きやすいことが，この調査結果に影響を与えているんだと思われます。

なお，この記事の元になっているBuffer Blogの記事では，もっと細かいデータや，TwitterとFacebook以外の調査結果も載っていて楽しめます。

Google+ではさらに短く60文字，ブログ記事では1600文字が理想的，プレゼンテーションの理想的な長さは18分など，いろいろ載っていて面白いです。

Webテク, Webデザイン, Web広告, SNS, アイコン, スマートフォン

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote