週刊Webテク通信

2015年10月第1週号 1位は，モバイルファーストによってWebサイトを発展させるヒント，気になるネタは，日本でも「Amazon Fire TV」とスティック型の「Fire TV Stick」が発売へ

Webテク, Webデザイン, Web広告, モバイル, iOS, Android, タイポグラフィ, jQuery, SVG, 動画

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2015年9月14日～9月27日の間に見つけた記事のベスト5です。

1. Give your Website a Boost with Mobile-First Strategy - DigiServed Bloghttp://blog.digiserved.com/give-your-website-a-boost-with-mobile-first-strategy/

モバイルファーストの戦略によって，Webサイトを発展させるためのヒントを解説した記事です。

以下の項目に分けて説明してあります。

  • モバイルの制約に従ってデザインする
  • デバイス（例：iOSとAndroid）の機能の違いに基づいて設計する
  • モバイルならではの機能（例：GPS）を追加する
  • デスクトップ版に機能を適応させる

図1　モバイルファーストによってWebサイトを発展させるヒント

図1　モバイルファーストによってWebサイトを発展させるヒント

2. iOS Design vs. Material Designhttp://blog.pipesapp.com/ios-design-vs-material-design/

AppleによるiOS向けデザインと，Googleによるマテリアルデザインを比較しています。

  1. スキューモーフィズム
  2. ナビゲーション
  3. コンテンツ
  4. 色
  5. Apple／Googleによる管理

以上の5項目で比べていました。

5つ目は英文では「Control」となっていて，AppleやGoogleがどれだけ厳密にルール付けしてコントロールしようとしているかということです。

Appleの方が厳しそうですが，これについてはGoogleのマテリアルデザインの方が決まり事が多くなっています。

図2　iOSデザインとマテリアルデザインとの比較

図2　iOSデザインとマテリアルデザインとの比較

3. 15 Super Useful Typography Tools and Frameworkshttp://www.1stwebdesigner.com/typography-tools/

タイポグラフィ関連のツールやフレームワークを多数紹介しています。

テキストを綺麗にレンダリングするフレームワークや，ウィンドウサイズに合わせて文字の大きさを変更するスクリプトなどが掲載されていました。

なお，このブログにアクセスすると，メールマガジンの購読を促す画面が全面に出てくる場合がありますが，Yesの右側にある「結構です」的な薄いボタンを押せば購読しなくても記事を読めますのでご安心を。

図3　タイポグラフィ関連のツールやフレームワーク

図3　タイポグラフィ関連のツールやフレームワーク

4. 20 Websites That Show The Current Web Design Trendshttp://www.webdesigndev.com/websites-that-show-the-current-web-design-trends/

グリッドレイアウト，大きな写真，フラットカラー，Retina対応といった，今のトレンドに合ったWebデザインを集めたギャラリーです。

有名なサイトのリニューアル案などを，behanceに掲載されている作品を中心にセレクトしてあります。

図4　今のトレンドに合ったWebデザインのギャラリー

図4　今のトレンドに合ったWebデザインのギャラリー

5. 25+ Free and Sought-After jQuery Plugins - Designmodohttp://designmodo.com/free-jquery-plugins/

よく使われている無料のjQueryプラグインをまとめた記事です。

デザインや双方向性，ユーザーエクスペリエンス，リーダビリティなどを向上させる軽量のプラグインを25個以上掲載しています。

図5　よく使われている無料のjQueryプラグインまとめ

図5　よく使われている無料のjQueryプラグインまとめ

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

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

We Love SVG - Google Fonts for icons | Icons8https://icons8.com/welovesvg

「We Love SVG」は，SVGアイコンを自分のサイトやブログに簡単に埋め込むことができるサービスです。

数多くのアイコンセットが用意されているので，そこから使いたいアイコンをクリックすると，埋め込み用のHTMLコードが表示されます。あらかじめ提供されているJavaScriptへのリンクをページに設置しておけば，このHTMLコードを入れるだけでアイコンが表示されます。アイコンは，CSSで色やサイズをコントロールできます。

「Flat Color」というセットはカラーのアイコンで，「⁠Font Awesome」など他のアイコンセットは単色でした。キーワード検索することも可能ですが，複数のアイコンセットを横断して検索することはできません。検索したあとアイコンセットを切り替えていけば，同じキーワードで次々と検索できます。

図6　SVGアイコンを簡単に埋め込めるサービス

図6　SVGアイコンを簡単に埋め込めるサービス

今週の気になるWebネタ

日本でも「Amazon Fire TV」とスティック型の「Fire TV Stick」が発売へ - CNET Japanhttp://japan.cnet.com/digital/av/35070926/

Amazonがプライム会員なら動画見放題の「プライム・ビデオ」をスタートするとともに，これまで日本では発売されていなかったAmazon Fire TVとFire TV Stickの販売開始を発表し予約を受け付けています。

これで，新型Apple TV，Amazon Fire TV，Google Chrome＆Nexus Playerとテレビに繋げるデバイスも出そろいましたね。Google Chromeも新型が発表されるようで楽しみです。

動画見放題サービスは，Hulu，Netflix，Amazonプライム・ビデオとどれを選ぶのか難しいところですが，テレビに繋げるデバイスもどれにするのか悩ましいでしょう。動画見放題サービスは複数契約してもいいですが，テレビに繋げるデバイスは複数いらないですし，同時にたくさん繋げられませんしね。

Webテク, Webデザイン, Web広告, モバイル, iOS, Android, タイポグラフィ, jQuery, SVG, 動画

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote