週刊Webテク通信

2017年2月第2週号 1位は，Webデザインのナビゲーションの過去と未来，気になるネタは，さらばDirector Adobe，Directorの販売およびShockwaveサポートを終了

Webテク, Webデザイン, Web広告, UX, マテリアルデザイン, HTML, CSS, メール

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

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

1. A Look into Navigation in Web Designhttps://cmd-t.webydo.com/from-simple-to-unusual-a-look-at-navigation-in-web-design-1057d0baef7b#.wmomircet

Webデザインのナビゲーションについて掘り下げた記事です。過去のナビゲーションパターンを振り返り，今後どこに向かうべきかを考察した内容となっています。

現在のナビゲーションパターンを以下の5つに分けて解説するとともに，実例のサイトがいくつか紹介されており，ナビゲーションを考える上で大いに参考になるはずです。

  1. 通常のナビゲーション
  2. 隠れたナビゲーション
  3. 複数のパターンを併せ持ったナビゲーション
  4. 分類をベースとしたナビゲーション
  5. 実験的なナビゲーション

図1　Webデザインのナビゲーションの過去と未来

図1　Webデザインのナビゲーションの過去と未来

2. 20 Web Design Trends for 2017 - RankRedhttp://www.rankred.com/web-design-trends-for-2017/

2017年のWebデザインの進化を予測して，20のトレンドとしてまとめています。

見た目のデザインだけでなく，AIやフェイクニュースなど業界のトレンドも取り入れた内容になっています。

  1. バーチャルリアリティと360度ビュー
  2. 対話型UIとAIによるチャットボット
  3. 機械学習
  4. グリッドレイアウトとカードデザイン
  5. 位置と文脈を認識する
  6. パーソナライズされたアイコン
  7. 年齢に合わせてレスポンシブなデザイン
  8. マイクロインタラクション
  9. モダンレトロ
  10. まだまだ使われるパララックス（視差効果）
  11. 新たなナビゲーションパターン
  12. 手描き風の要素
  13. 幾何学的な図形とパターン
  14. フェイクニュースとの戦い
  15. わかりやすく創造性のあるタイポグラフィ
  16. 没入できるストーリー性
  17. 可変するデザインと，より明るい色
  18. シネマグラフィとアニメGIF
  19. 直感的なフォーム
  20. フリー素材の写真を使わない

図2　2017年のWebデザインのトレンド予測

図2　2017年のWebデザインのトレンド予測

3. 7 Common UX Mistakes That Can Ruin Your Content | Design Shackhttps://designshack.net/articles/ux-design/7-common-ux-mistakes/

よくあるユーザーエクスペリエンスの失敗についてまとめた記事です。

  1. テキストが読めない
  2. 統一感がない文字揃え
  3. 場違いな画像
  4. モバイル向けに細心の注意を払っていない
  5. おかしな配色
  6. 次に何をすべきか分からない
  7. 重要な要素を詰め込みすぎ

図3　よくあるユーザーエクスペリエンスの失敗

図3　よくあるユーザーエクスペリエンスの失敗

4. Material Design and the Mystery Meat Navigation Problemhttps://medium.freecodecamp.com/material-design-and-the-mystery-meat-navigation-problem-65425fb5b52e#.blocx3szq

マテリアルデザインのナビゲーションボタンの問題について考察した記事です。

タイトルに“⁠ミステリーミートナビゲーション⁠”問題とありますが，見た目では何の肉か分からない加工肉と同じように，押してみないと分からないボタンなどのナビゲーションをこう呼ぶようです。

Andorid 5.0 Lollipopで変更されたナビゲーションバー，フローティングアクションボタン，2016年3月に導入された新しい下部のナビゲーションバーが，いずれも“⁠ミステリーミートナビゲーション⁠”になっているという指摘です。

図4　マテリアルデザインのナビゲーションボタン問題

図4　マテリアルデザインのナビゲーションボタン問題

5. 58 CSS Slidershttp://freefrontend.com/css-sliders/

HTML＆CSSによるスライダーを，カードタイプ，複数画像の比較，フルスクリーン，レスポンシブの項目に分けて大量に紹介しています。

「DEMO AND CODE」でコード共有サイトのCodePenからコードを読み込むようになっているので，ページ遷移なくその場で気になるスライダーを試せるようになっています。

図5　58種類のスライダーを紹介

図5　58種類のスライダーを紹介

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

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

Really Good Emails - The Best Email Designs in the Universe (that came into my inbox)https://reallygoodemails.com/

Really Good Emailsは優れたHTMLメールデザインのギャラリーです。キーワード検索かカテゴリ別にメールデザインを探せます。

各HTMLメールは画像として登録してありますが，HTML＆CSSで作られたHTMLメールそのものを開くこともでき，さらにCodePen上で開き編集してみることも可能です。

また，HTMLメール制作に役立つ情報へのリンクもあり，HTMLメールを作成するための手助けとなるサイトとなっています。

図6　優れたHTMLメールのギャラリー

図6　優れたHTMLメールのギャラリー

今週の気になるWebネタ

さらばDirector Adobe，Directorの販売およびShockwaveサポートを終了 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1701/31/news118.html

Adobe Directorの販売が2017年2月1日で終了し，Adobe Shockwaveのサポートは2017年3月14日で終了すると発表されました。いわゆる「マルチメディアCD-ROM」が流行った1990年代に，オーサリングソフトとして大活躍していたMacromedia Director（当時）⁠。わたしも当時いろいろとお世話になりました。

ネット時代になり，Directorのコンテンツをブラウザで動かすShockwaveプラグインが登場したのですが，当時の回線と圧縮技術では「重くなる」ことを解消できず，ベクターベースのFlashの時代になっていったわけです。

この記事のためにDirectorについてネットで調べてみて，オーサリング，Shockwave，LINGO（オーサリング言語）など懐かしいフレーズに触れて，過去の記憶の扉が開いた感じです。ともかく，今までありがとうDirector！

Webテク, Webデザイン, Web広告, UX, マテリアルデザイン, HTML, CSS, メール

著者プロフィール

芦之由（あしのよし）

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

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

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