週刊Webテク通信

2020年10月第1週号 1位は,ハンバーガーメニューのエンゲージメントを高める方法,気になるネタは,アマゾンがEcho Dotを球体に再設計,キッズ版に動物のデザインと読書機能を追加

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

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

1. Secrets to High Engagement on Hamburger Menushttps://uxmovement.com/navigation/secrets-to-high-engagement-on-hamburger-menus/

ハンバーガーメニューのエンゲージメントを高める方法を解説した記事です。

以下に概要をまとめました。

  • ハンバーガーメニューに「メニュー」とラベルをつけてもそれほど効果はない
  • ユーザーが求めているものと「メニュー」という言葉は一致しないから
  • メニュー内の項目をカテゴリーにグループ化して,カテゴリへのリンクをメニューバーに配置する
  • そのカテゴリへのリンクをクリックするとハンバーガーメニューが開くようにする
  • モバイル画面の場合はカテゴリへのリンクをメニューバーの下の段に配置する

図1 ハンバーガーメニューのエンゲージメントを高める方法

図1 ハンバーガーメニューのエンゲージメントを高める方法

2. Successful Design Handoffhttps://blog.plantapp.io/post/successful-design-handoff

デザインのハンドオフ(デザイナーから開発者への受け渡し)のガイドです。

プロセスごとのヒントと使用ツールについて解説しています。

  • モックアップとレイヤー
  • コンポーネントとアセット
  • プロトタイプとインタラクション
  • 文章と文脈
  • 空の状態と限界ギリギリの状態

図2 デザイナーから開発者への受け渡しのガイド

図2 デザイナーから開発者への受け渡しのガイド

3. 10 useful HTML5 features, you may not be usinghttps://blog.greenroots.info/10-useful-html5-features-you-may-not-be-using-ckdua7ql300l1m3s1ez7teshc

あまり使われていないけど便利なHTML5のタグと,そのタグでできることを紹介しています。

  • details
  • contenteditable
  • map
  • mark
  • data-* attribute
  • output
  • datalist
  • range(slider)
  • meter
  • inputタグで使われる属性

図3 あまり使われていないけど便利なHTML5のタグいろいろ

図3 あまり使われていないけど便利なHTML5のタグいろいろ

4. BGJar | Free svg background image generator for your websiteshttps://bgjar.com/

SVGでの背景ジェネレーターです。ベースになるものを選んで,サイズや色などをカスタマイズできます。

SVGファイルでダウンロードするか,SVGのコード,CSSで背景指定する場合のコードをコピーできます。

図4 SVGでの背景ジェネレーター

図4 SVGでの背景ジェネレーター

5. Web Design Inspiration | Discover the Best Website Designshttps://www.reallygoodstores.com/

お店のサイトのギャラリーです。カテゴリごとに絞り込むことができます。

Shopify,WooCommerceなど,何で構築されているのかが分かるのもいいですね。

図5 お店のサイトのギャラリー

図5 お店のサイトのギャラリー

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

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

SendFileOnline | Share file with 6 digit code for freehttps://sendfileonline.com/

SendFileOnlineはユーザー登録不要で使えるファイル転送サービスです。6桁のコードで共有できるのが特徴です。

1GBまでのファイルをアップロードできて,ファイルの保存期間は24時間と1週間のどちらかを選べます。6桁のコードを埋め込んだ形式でのリンクも生成されます。

コードは6桁でも,IPアドレスによる接続回数の制限もあるのでセキュリティ上問題ないと作者は書いていました。同様のサービスのFirefox Sendは終了してしまいましたが,この手のサービスの選択肢のひとつとして期待したいです。

図6 ユーザー登録不要で使えるファイル転送サービス

図6 ユーザー登録不要で使えるファイル転送サービス

今週の気になるWebネタ

アマゾンがEcho Dotを球体に再設計,キッズ版に動物のデザインと読書機能を追加 | TechCrunch Japanhttps://jp.techcrunch.com/2020/09/25/2020-09-24-amazon-redesigns-echo-dot-as-a-sphere-adds-animal-designs-and-reading-feature-for-kids-edition/

Amazonがスマートスピーカー「Echo」のシリーズを刷新しました。Echo Dotはデザインが変更され,球形のデザインになっています。

Echo Dot Kids Editionは動物のキャラクターが施されたデザインで,子供から親しまれそうです。キッズエディションは子供向けの本を聞くことができたり,子供の読書をサポートする機能もあるそうです。

かわいいデザインのスマートスピーカーといえば,LINEスタンプのキャラクターのデザインのLINE CLOVAを連想します。ちなみに,CLOVAはLINEのAIテクノロジーのブランド名になり,対応製品も拡大していました。

著者プロフィール

芦之由(あしのよし)

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

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

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