週刊Webテク通信

2016年3月第5週号 1位は，ドロップダウンの代わりとなるナビゲーションメニュー，気になるネタは，LINE，今夏にも“月額500円から”のMVNO事業——関連サービスの通信料は無料

Webテク, Webデザイン, Web広告, CSS, SVG, ブログ, LINE, モバイル

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

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

1. 5 Alternatives to Drop-Down Hover Menus | Design Shackhttp://designshack.net/articles/ux-design/5-alternatives-to-drop-down-hover-menus/

ドロップダウンメニューの代わりになる，ナビゲーションメニューのデザインパターンを5つ紹介しています。

  1. スクロールするパネル
  2. ハンバーガーメニュー
  3. カードスタイルナビゲーション
  4. 固定メニュー
  5. 垂直方向のサイドメニュー

ドロップダウンはモバイルの小さい画面に適用しにくく時代遅れで，代わりとなるナビゲーションメニューに移行していくべきとのことでした。

図1　ドロップダウンの代わりとなるナビゲーションメニュー

図1　ドロップダウンの代わりとなるナビゲーションメニュー

2. 10 Web design trends you can expect to see in 2016http://thenextweb.com/dd/2016/01/01/10-web-design-trends-can-expect-see-2016/

2016年のWebデザインのトレンドを10個まとめた記事です。

  1. ナビゲーションとメニューの実験はまだ続く
  2. スクロールまたはスクロールしない
  3. ページ全体の代わりにモジュールとコンポーネントでデザインする
  4. フラットデザインは続く
  5. マテリアルデザインが離陸する
  6. ストック素材を捨てる
  7. フォームと入力欄はフルスクリーンにする
  8. 表現力豊かながら目立ちすぎないアニメーション
  9. ユーザーはサイトの見た目よりも機能に関心がある
  10. デザイナーはブラウザー内でのデザインに向かう

ブラウザー内でのデザイン（designing in the browser）とは，最初のデザイン／プロトタイプの段階から，Photoshopなどで静止画を作るのではなく，ブラウザ内で動くものを作っていく手法です。

図2　2016年のWebデザインのトレンド10個

図2　2016年のWebデザインのトレンド10個

3. CSS only Responsive Tables – David Bushell – Web Design & Front-end Development (based in Manchester, UK)http://dbushell.com/2016/03/04/css-only-responsive-tables/

CSSだけでレスポンシブな表組みを作るテクニックを紹介した記事です。

横幅が狭い場合には，横スクロールするようになります。スマホではフリップで横スクロールできて便利です。

図3　CSSだけで作ったレスポンシブなテーブル

図3　CSSだけで作ったレスポンシブなテーブル

4. 25 Fresh Resources for Designers & Developers, March 2016 | JUST Creativehttp://justcreative.com/2016/03/21/free-hand-picked-resources-for-designers-developers-march-edition/

Webデザインや開発に役立つ素材やフォントなどをまとめています。

Craftは，SketchとPhotoshop用の話題のプラグインで，ダミーの写真／文章を挿入するなどインターフェイスデザインに役に立ちます。

図4　Webデザインや開発に役立つ素材やフォント

図4　Webデザインや開発に役立つ素材やフォント

5. Animated Animals in CSS and SVG | Codropshttp://tympanus.net/codrops/2016/03/21/animated-animals-css-svg/

CSSとSVGでアニメーションする動物の作例と動かし方の解説です。とても良い動きをしていて感心しました。

「animated SVG filters」を使っており，対応しているのはChromeだけとのことです。CPUの負荷が高いようで，iMacでしばらく再生しているとファンが回り始めました。

図5　CSSとSVGでアニメーションの作例

図5　CSSとSVGでアニメーションの作例

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

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

CardFormhttp://cardform.co/

CardFormはWebサイトやブログを簡単に作れるWebサービスです。タスク管理ツールとして人気のTrelloがベースとなっており，Trelloのボードでページを管理できるところがユニークです。

テンプレートとして，アプリのランディングページ，COMING SOONページ，ブログ，画像ギャラリー，シングルページサイトなどが用意されています。作ったサイトは，Trelloのボードと連動するようになっており，カード型のわかりやすいUIでページの更新ができます。

コンテンツの更新や修正が楽なので，Trelloのボードを共有して，複数人でサイト管理する使い方が便利だと感じました。

現在ベータ版となっており，Trelloのユーザーは5サイトまで作れるようになっています。

図6　Webサイトを簡単に作れるTrelloベースのWebサービス

図6　Webサイトを簡単に作れるTrelloベースのWebサービス

今週の気になるWebネタ

LINE，今夏にも“月額500円から”のMVNO事業—⁠—関連サービスの通信料は無料 | TechCrunch Japanhttp://jp.techcrunch.com/2016/03/24/line-mobile/

LINEがLINEモバイルという名でMVNO事業に参入するとのことです。月額500円からで，LINEとFacebook，Twitterにかかる通信は使い放題というのが特徴となっています。

これは，ガラケーとの2台持ちユーザーに適したサービスではないでしょうか。シニア層が子供や孫とLINEのやり取りするためのスマホやタブレットを持つ場合に，有力候補となりそうです。

ところで，LINE／Twitter／Facebookアプリ内でWebページを開いたときの通信量は，使い放題とは別なんでしょうか？ たとえば，アプリ内のリンクからYouTube動画を見たたときの通信量も使い放題とは考えにくいですが，そのへんの区別が一般の人には分かりにくいと思います。

Webテク, Webデザイン, Web広告, CSS, SVG, ブログ, LINE, モバイル

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote