ネットで見かけた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/

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

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

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

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

ワイヤーフレームのイメージが並んでおり，詳細ページでは具体的にコンテンツが入った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. 止まらない通知

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. ブランディング

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

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

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

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

• フェイスブック ジャパンが初の行政連携--神戸市と地方創生を支援 - CNET Japan
  神戸市職員や市民，中小企業を対象に，FacebookやInstagramの活用を活性化するセミナーやワークショップを実施するそうです
• Firefoxのブランドロゴ刷新について，Mozillaがフィードバック募集中 - ITmedia NEWS
  2種類のロゴファミリーを公開。投票ではなく意見を求めているとのことです
• ツイートのFacebookでの自動投稿が8月1日から無効に Facebookの権限廃止で - ITmedia NEWS
  使ってる人はほとんどいないと思いますが，Twitterへの投稿が自動でFacebookにも投稿される機能がAPIの変更で無効になりました

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

Gridloverhttps://www.gridlover.net/

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

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

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