週刊Webテク通信

2018年8月第2週号 1位は，固定ナビゲーションメニューのトレンド，気になるネタは，FacebookとInstagramに使いすぎ防止機能追加へ

Webテク, Webデザイン, Web広告, UI, アニメーション, CSS, SNS

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

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

1. Design Trends for Fixed Navigation Menus in Web Design - Designmodohttps://designmodo.com/fixed-navigation-menus/

固定ナビゲーションメニューのトレンドについて，実例とともに解説しています。

  • 自動でリサイズするナビゲーションバー
  • 固定された垂直ナビゲーション
  • ドロップシャドウで奥行きを加える
  • スクロールによってアニメーションするナビゲーションバー

図1　固定ナビゲーションメニューのトレンド

図1　固定ナビゲーションメニューのトレンド

2. Pattern Designs http://www.uipatternhub.com/

UIデザインパターンを集めたギャラリー的なサイトです。

ワイヤーフレームのイメージが並んでおり，詳細ページでは具体的にコンテンツが入ったUIデザイン例が見られます。

図2　UIデザインパターン集

図2　UIデザインパターン集

3. Dark Pattern Design — It’s Downright Unethical & Irresponsiblehttps://uxplanet.org/dark-pattern-design-its-downright-unethical-irresponsible-c2a3612a1640

ユーザーを惑わせたり騙したりする，悪いデザインパターンをまとめた記事です。

  1. 無料トライアルにクレジットカード情報が必要
  2. メールアドレスをプロモーションに利用することに自動的に許諾させられる
  3. 誤解を招くポップアップ
  4. ショッピングカートにこっそり追加のアイテムを入れる
  5. 不明瞭な同意リクエストで連絡先へのアクセス権を得る
  6. 余分なサービスをセットにする
  7. 説得するためのメッセージを乱用する
  8. 止まらない通知

図3　悪いデザインパターンのまとめ

図3　悪いデザインパターンのまとめ

4. Interaction Design: 7 Basic Types of UI Animationhttps://icons8.com/articles/interaction-design-basic-types-ui-animation/

UIアニメーションのサンプルを7つのタイプに分けて紹介しています。

  1. ローディングと進捗状況
  2. ナビゲーション
  3. 動作の完了
  4. スクロール
  5. トランジション
  6. 説明
  7. ブランディング

図4　UIアニメーションのサンプルいろいろ

図4　UIアニメーションのサンプルいろいろ

5. Motushttp://alexcambose.ro/motus/

スクロールに合わせたキーフレームアニメーションを作るためのJavaScriptのライブラリです。

スタート点と終了点を決めて，要素の位置やサイズなどをアニメーションできます。

図5　スクロールに合わせたアニメーションのためのライブラリ

図5　スクロールに合わせたアニメーションのためのライブラリ

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

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

Gridloverhttps://www.gridlover.net/

Gridloverは文字周りのCSS設定をプレビューしながら設定できるサービスです。h1〜h5の見出し，段落，リストなどのCSSを設定できます。

サンプルとなるHTMLはマークダウンで自由に変更できるので，日本語の文章に変更してから文字サイズなどの調整を行えばいいですね。基準となる文字サイズ，行間，倍率を設定するだけで，自動的に見出しなどのサイズが調整されます。

CSSを個別に調整することもできますが，数値を自由に設定できるわけではなく，このシステムが用意した計算式をベースに段階的に変えられるだけです。その分ルールに沿ったきちんとした文字組ができるということでしょう。

図6　文字周りのCSS設定を設定できるサービス

図6　文字周りのCSS設定を設定できるサービス

今週の気になるWebネタ

FacebookとInstagramに使いすぎ防止機能追加へ - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1808/02/news049.html

iOSもAndroidも次期OSで対応予定というスマホの使いすぎを防止機能ですが，FacebookとInstagramのアプリにも追加されるとのこと。あらかじめ設定した時間以上利用を続けようとすると，通知が来るよう設定できます。

そんな通知必要ないという人も，自分がアプリをどれだけ使っているのか分かる利用時間のグラフ表示は見てみたいと思うんじゃないでしょうか。過去1週間分を曜日ごとにグラフで表示するようですが，利用した時間帯も見られるといいですね。

通知を一時的にオフにする機能も付きました。「⁠○○さんがあなたの投稿にいいね！しました」のような通知を普段ONにしている人は，時と場合に応じてオフにできて便利です。もっとも完全にオフにしておいたほうが，使いすぎ防止になると思いますが。

Webテク, Webデザイン, Web広告, UI, アニメーション, CSS, SNS

著者プロフィール

芦之由（あしのよし）

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

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

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