gihyo.jpサイトのロゴ

週刊Webテク通信

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

2018-08-09

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

おすすめ記事

記事・ニュース一覧