週刊Webテク通信

2020年9月第3週号 1位は，ナビゲーションメニューのUXデザインの原則，気になるネタは，Alexaにおはようと言うと，あいみょんが挨拶 「一日アレクサ」で新譜プロモーション

Webテク, Webデザイン, Web広告, UX, UI, プレゼンテーション, 動画, Alexa, プロモーション

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

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

1. UX Design for Navigation Menus | Learn UXDhttps://learnuxd.io/posts/ux-design-for-navigation-menus/

ナビゲーションメニューのUXデザインの原則について解説しています。

  1. 配置の問題
  2. ユーザーがどこにいるのかを示す
  3. メガメニュー対ドロップダウン
  4. 効果的なリンクのタイトル
  5. アイテム数はいくつ？
  6. 隠さない
  7. ビジュアルデザインのヒント

図1　ナビゲーションメニューのUXデザインの原則

図1　ナビゲーションメニューのUXデザインの原則

2. How to Choose UI Colors for Mobile and Web Design Wiselyhttps://gapsystudio.com/blog/ui-design-colors/

プロダクトに合ったUIデザインの色の選び方をまとめた記事です。

  1. 色の心理学を学ぶ
  2. 調和の取れた色にこだわる
  3. 60-30-10ルールに従う
  4. 文化の違いを受け入れて対処する
  5. バランスの取れたコントラスト
  6. 最初はグレースケールに絞る
  7. 自然からインスピレーションをもらう

図2　プロダクトに合ったUIデザインの色の選び方

図2　プロダクトに合ったUIデザインの色の選び方

3. Landing Page 101: How to design a landing page that converts | Dribbble Design Bloghttps://dribbble.com/stories/2020/09/10/design-landing-pages-that-convert

効果のあるランディングページをデザインする方法を紹介しています。

  1. すでに確立されているパターンを利用する
  2. A／Bテストを行う
  3. メインのナビゲーションをなくす
  4. 少ないほど良い
  5. フォームをより短くする
  6. テキストを斜め読みできるようにする
  7. セクションごとの区切りがわかるようにする
  8. 行動を促す要素を繰り返す

図3　効果のあるランディングページをデザインする方法

図3　効果のあるランディングページをデザインする方法

4. 7 Principles Of Icon Designhttps://marketsplash.com/icon-design/

アイコンデザインの7つの原則をまとめた記事です。

  1. 一貫した見た目の重さ
  2. シンプルさとミニマリズム
  3. 一貫したブランドの個性でアイコンを作成する
  4. 十分な空白のあるアイコンをデザインする
  5. 画面解像度に合わせて完璧にピクセル表示されるデザイン
  6. コントラストとカラーパレット
  7. 幾何学的形状は効果が大きい

図4　アイコンデザインの7つの原則

図4　アイコンデザインの7つの原則

5. Footers Design Gallery | Smiley Cathttps://www.smileycat.com/footers-design-gallery/

フッターデザインのギャラリーです。なんと11ページにも渡って紹介されていました。

連絡先情報，メール登録フォーム，ソーシャルメディアボタンなどの二次的情報，サイト全体へアクセスするためのリンクなどをフッタに入れることで，ユーザーのアクションを促すことができるということです。

図5　フッターデザインのギャラリー

図5　フッターデザインのギャラリー

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

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

Narakeethttps://www.narakeet.com/

Narakeetはプレゼンスライドからナレーション付き動画を作れるサービスです。テキストから音声読み上げする仕組みで，日本語にも対応していました。

PowerPoint，Googleスライド，Keynoteのデータから動画に変換できます。読み上げさせるテキストは，発表者ツールのノートに入れておきます。あとは自動で動画が生成されるという簡単で便利なサービスです。

マークダウンで指示書を書き，画像や動画からナレーション入り動画を作る機能もあります。自社商品のPRを多言語で行うケースを想定しているようで，20以上の言語が使えるのがアピールポイントになっています。日本語も使えるところがうれしいですね。

図6　プレゼンスライドからナレーション付き動画を作れるサービス

図6　プレゼンスライドからナレーション付き動画を作れるサービス

今週の気になるWebネタ

Alexaにおはようと言うと，あいみょんが挨拶 「一日アレクサ」で新譜プロモーション - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2009/09/news059.html

Alexaを使ったあいみょんニューアルバムのプロモーションが面白いです。「⁠アレクサ，おはよう」と話しかけると，アレクサがしゃべったあと，あいみょんが登場して話すというもの。

一日限定でしたが，10月9日までは「あいみょんのおはようメッセージを聞かせて」と話しかければ何度でも聴けます。Amazon Musicであいみょんのニューアルバムを聴くところまで誘導されていて，よくできたプロモーションだと感心しました。

「おはよう」に対する呼びかけにアーティストが応答するのは，あいみょんが初の試みとのこと。同じようなプロモーションは今後も増えるんじゃないでしょうか。スマートスピーカー普及の後押しにもなるかもしれませんね。

Webテク, Webデザイン, Web広告, UX, UI, プレゼンテーション, 動画, Alexa, プロモーション

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote