週刊Webテク通信

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

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

ネットで見かけた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から派生したアイコンフォントサービス

今週の気になるWebネタ

バス乗車中にスマホを充電できる『電源バス』の運行を西東京バスが開始 - 週刊アスキーhttp://weekly.ascii.jp/elem/000/000/357/357699/

携帯電話・スマートフォンを充電するためのコンセントが用意された「電源バス」の運行が始まりました。これはうれしいサービスですね。

なお,この電源には「携帯・スマホ専用」と但し書きがあって,ノートパソコンなどに使ってはダメとのこと。タブレットはだめなのかとか,iPod touchは? とかいろいろ言い出す人もいそうですが,スマホサイズのものは許されそうにも思います。

「携帯・スマホ専用」と,携帯電話とスマートフォンとが別モノとして扱われているところも今の日本の状況を表しているようで興味深いですね。この但し書きは英語では「Mobile phone only」となっていました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入