週刊Webテク通信
2020年10月第1週号 1位は，ハンバーガーメニューのエンゲージメントを高める方法，気になるネタは，アマゾンがEcho Dotを球体に再設計，キッズ版に動物のデザインと読書機能を追加
ネットで見かけたWebテク
1. Secrets to High Engagement on Hamburger Menushttps://uxmovement.com/navigation/secrets-to-high-engagement-on-hamburger-menus/
ハンバーガーメニューのエンゲージメントを高める方法を解説した記事です。
以下に概要をまとめました。
- ハンバーガーメニューに
「メニュー」 とラベルをつけてもそれほど効果はない - ユーザーが求めているものと
「メニュー」 という言葉は一致しないから - メニュー内の項目をカテゴリーにグループ化して，
カテゴリへのリンクをメニューバーに配置する - そのカテゴリへのリンクをクリックするとハンバーガーメニューが開くようにする
- モバイル画面の場合はカテゴリへのリンクをメニューバーの下の段に配置する
図1 ハンバーガーメニューのエンゲージメントを高める方法
2. Successful Design Handoffhttps://blog.plantapp.io/post/successful-design-handoff
デザインのハンドオフ
プロセスごとのヒントと使用ツールについて解説しています。
- モックアップとレイヤー
- コンポーネントとアセット
- プロトタイプとインタラクション
- 文章と文脈
- 空の状態と限界ギリギリの状態
図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のタグいろいろ
4. BGJar | Free svg background image generator for your websiteshttps://bgjar.com/
SVGでの背景ジェネレーターです。ベースになるものを選んで，
SVGファイルでダウンロードするか，
図4 SVGでの背景ジェネレーター
5. Web Design Inspiration | Discover the Best Website Designshttps://www.reallygoodstores.com/
お店のサイトのギャラリーです。カテゴリごとに絞り込むことができます。
Shopify，
図5 お店のサイトのギャラリー
そのほか，
- PDFをスマホでも見やすく--アドビ，
AIでレイアウト調整する 「Liquid Mode」 を発表 - CNET Japan
iOSとAndroidのAcrobat Readerアプリに搭載され，今後デスクトップ版とブラウザ版にも追加されるそうです - Twitter，
「リンク先を読んでからRTして」 表示を全ユーザーに拡大へ - ITmedia NEWS
一部の利用者でテストしたところ，この警告を入れることで記事を開くユーザーが増えたそうです - ブログを手で書く
「てがきはてなブログ」 登場 iPadに最適化 - ITmedia NEWS
マウスでも書けますが，iPad + Apple Pencilに最適化しています
先週の気になるWebサービス
SendFileOnline | Share file with 6 digit code for freehttps://sendfileonline.com/
SendFileOnlineはユーザー登録不要で使えるファイル転送サービスです。6桁のコードで共有できるのが特徴です。
1GBまでのファイルをアップロードできて，
コードは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 Dot Kids Editionは動物のキャラクターが施されたデザインで，
かわいいデザインのスマートスピーカーといえば，
著者プロフィール
アシカガコウジ
フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。
バックナンバー
週刊Webテク通信
- 2020年10月第5週号 1位は，CSSグリッドの完全版チュートリアル，気になるネタは，AdobeがiPad用IllustratorとiPhone用Frescoをリリース
- 2020年10月第4週号 1位は，UIデザインのためのユーザビリティの経験則10選，気になるネタは，グーグル検索，気になる曲をハミングすると曲名を教えてくれる新機能
- 2020年10月第3週号 1位は，フッターデザインの実例を多数紹介，気になるネタは，ドコモ，「iモード公式サイト」を2021年11月末に終了へ
- 2020年10月第2週号 1位は，UIデザインの危険なトレンド，気になるネタは，Hameeが小学生向け“プレスマホ”を発表 月額1000円で1GB，Google Playにも対応
- 2020年10月第1週号 1位は，ハンバーガーメニューのエンゲージメントを高める方法，気になるネタは，アマゾンがEcho Dotを球体に再設計，キッズ版に動物のデザインと読書機能を追加
関連記事
- 2021年8月第1週号 1位は，UI／UXのちょっとしたテクニックいろいろ，気になるネタは，ザッカーバーグ氏は110兆円規模のフェイスブックを「メタバース」企業にすると投資家に語る
- 2021年3月第2週号 1位は，アイコンフォントではなくSVGを使うことのススメ，気になるネタは，憧れのタレントからサプライズでビデオメッセージが届くサービス「heyhey」日本上陸
- 2021年2月第2週号 1位は，いまならCSSだけでできること，気になるネタは，Twitterの音声チャットルーム「Spaces」を日本でいち早く体験--Clubhouse対抗になりうるか
- 2021年2月第1週号 1位は，Clubhouseのアイコンにも使われている「スーパー楕円」のボタンの作り方，気になるネタは，いらすとや，2月より毎日更新を一時停止‐「ここ数年，ほとんど休みがなかった」
- 2020年11月第3週号 1位は，エンゲージメントを高めるお問い合わせページをデザインする方法，気になるネタは，「Googleフォト」，無制限の無料ストレージを2021年5月末で終了へ