週刊Webテク通信

2015年7月第5週号1位は、iOS向けデザインにおける破るべき4つのルール、気になるネタは、バス乗車中にスマホを充電できる『電源バス』運行を西東京バスが開始

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

1. iOS Design Rules to Breakhttp://www.nngroup.com/articles/4-ios-rules-break/

iOS向けデザインにおける破るべきルールとして、4つのデザインパターンについて問題点と解決策を解説しています。

  1. ページのコントロール:ドットでページを示すこと
  2. フォームの送信ボタンが上部にあること
  3. プラス(+)アイコン
  4. 移動アイコン

1は、スワイプしてページめくりをするときに、ページ数や今のページを示すためのドットは見落としやすいという問題です。はっきり表示されるようにコントラストに気をつけたり、コンテンツを途中まで表示して続きがあることが想像できるようにするといいとのことです。

4は項目をドラッグして動かせることを示すアイコンなのですが、この三本線(≡)のアイコンは、メニューなどが出現する「ハンバーガーメニュー」に使われるアイコンと似ていることも問題とのことでした。

図1 iOS向けデザインにおける破るべき4つのルール
図1 iOS向けデザインにおける破るべき4つのルール

2. Custom Grid Design for Structured Website Mockupshttps://webdesignledger.com/tips/grid-design-for-website-mockups

カスタムグリッドデザインを使って、Webサイトのモックアップを構築する方法についてレクチャーしている記事です。

  • 構成を考える
  • 余白のパターンを決める
  • グリッドデザインを実践する
  • グリッド構造を越える

また、グリッドを作るためのオンラインツールとPhotoshopのエクステンションも紹介されています。

図2 モックアップを構築するためのカスタムグリッドデザイン
図2 モックアップを構築するためのカスタムグリッドデザイン

3. You might not need jQuery plugins ? When youmightnotneedjquery you also might not need jQuery plugins.http://youmightnotneedjqueryplugins.com/

jQueryを使わずに利用できるJavaScriptのライブラリを紹介しています。それぞれに、どのjQueryプラグインの代わりになるものかが記載してあります。

親要素のサイズに合わせて文字サイズを変更するFitText.jsのスタンドアロン版や、イメージギャラリー、スライダー、ツールチップなどが載っていました。

図3 jQuery不要のJavaScriptライブラリいろいろ
図3 jQuery不要のJavaScriptライブラリいろいろ

4. 11 Web Typography Tools & Libraries | SmashingApps.comhttp://www.smashingapps.com/2015/07/23/11-web-typography-tools-libraries.html

Webサイト上でタイポグラフィを扱うのに役立つツールやライブラリをまとめています。

文字のサイズを決めるのに役立つツールや、Webページで使われているフォントを調べるブックマークレットなどが紹介されていました。

図4 Web上でタイポグラフィを扱うのに役立つツールやライブラリ
図4 Web上でタイポグラフィを扱うのに役立つツールやライブラリ

5. 16 Animated Logos to Check Out | HOW Designhttp://www.howdesign.com/design-business/design-news/animated-logos/

アニメーションするロゴのギャラリーです。GIFアニメのロゴが16個紹介されています。

Webページ上のロゴが常に動いていたら邪魔ですが、ロールオーバー時などに動くというのは面白いんじゃないかと思いました。

図5 アニメーションするロゴのギャラリー
図5 アニメーションするロゴのギャラリー

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

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

Fonticonshttps://fonticons.com/

Fonticonsは、アイコンフォントを無償で提供してきたFont Awesomeから派生した有料の会員制サービスです。

年49ドルからの有料プランでは、カスタムアイコンを利用できます。SVGファイルをアップロードするか、Adobe Illustratorからコピー&ペーストで登録できるそうです。

また、必要なアイコンだけをセレクトして自分だけのKitを作れるようになりました。不要なアイコンや冗長なCSSを読み込まなくて済むようになるので、ロード時間を短くできるメリットがあります。無料プランでは1つのkit、年49ドルのBASICプランでは5つのKitが利用できます。

図6 Font Awesomeから派生したアイコンフォントサービス
図6 Font Awesomeから派生したアイコンフォントサービス

おすすめ記事

記事・ニュース一覧