週刊Webテク通信

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

ネットで見かけた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 ユーザー登録不要で使えるファイル転送サービス

おすすめ記事

記事・ニュース一覧