週刊Webテク通信

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

ネットで見かけた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サービス

おすすめ記事

記事・ニュース一覧