週刊Webテク通信

2019年9月第4週号 1位は, シェア(共有)機能,シェアボタンについての考察,気になるネタは,アリババ,スマートスピーカー「Tmall Genie」でスタバのコーヒーが注文可能に

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

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

1. UX Considerations for Web Sharing | CSS-Trickshttps://css-tricks.com/ux-considerations-for-web-sharing/

シェア(共有)機能,シェアボタンについて,モバイルとパソコンの違いやアイコンデザインについて考察した記事です。

モバイル環境では,6割の人はシェアボタンを使ったことがないというアンケート結果もあるそうです。しかし,OSが用意しているシェア機能を使う場合も,シェアボタンがあることがシェアしようと思うきっかけのケースもあるので,ボタンが押されたことだけが重要ではないとのことでした。

モバイルではOSが用意するシェア機能を使い,パソコンでは独自のシェアボタンを出すのが今のところ最適解のようです。シェアボタンに「メールで送信」ボタンを入れるケースもありますが,Gmailなどオンラインのメールとうまく連動しないことが多いので,URLをコピーするボタンの方がおすすめと解説しています。

OS標準のシェアボタンは,Androidのものが認識されやすく,以前Appleが使っていた左向き矢印のものはYouTubeで使われて認識率が上がったそうです。今のAppleの上向き矢印のものは,ダウンロードの逆になっているだけでわかりにくいという評価でした。

図1 シェア(共有)機能,シェアボタンについての考察

図1 シェア(共有)機能,シェアボタンについての考察

2. Where to put buttons on forms by Adam Silver | Designer, London, UK.https://adamsilver.io/articles/where-to-put-buttons-in-forms/

フォームのボタンの配置についてのヒントを紹介しています。

  1. 主ボタンを入力欄の左端に揃える
  2. フォームの上部に戻るボタンを配置
  3. フォームの上部に分岐するアクションを配置
  4. 何をやるかによって追加のボタンの配置場所を決める
  5. 一部の単一フィールドフォームでは,入力欄の横にボタンを配置
  6. マルチセレクトボタンをフォームの上部に配置

5は検索窓などのケース,6はCMSの管理画面で記事一覧を操作するボタンなどのケースですね。

図2 フォームのボタンの配置についてのヒント

図2 フォームのボタンの配置についてのヒント

3. Dark Mode — Working with Color Systems - Nodes Digital - Mediumhttps://medium.com/nodesdigital/dark-mode-working-with-color-systems-e73aeab8dbae

ダークモードのための配色について解説した記事です。

カラーシステムを管理し,設計時にライトモードとダークモードを切り替えるSketchのプラグインも紹介しています。

図3 ダークモードのための配色について

図3 ダークモードのための配色について

4. The perfect responsive menu (2019) | Polypane responsive browserhttps://polypane.rocks/blog/the-perfect-responsive-menu-2019/

パーフェクトなレスポンシブメニューの作り方です。

PCサイズでは右寄せの水平メニュー,モバイルサイズではハンバーガーメニューから展開し,横方向センター揃え&縦方向均等配置のメニューになります。

図4 パーフェクトなレスポンシブメニューの作り方

図4 パーフェクトなレスポンシブメニューの作り方

5. 15 unique website layouts | Webflow Bloghttps://webflow.com/blog/unique-website-layouts

個性的なレイアウトのウェブサイトを15個紹介しています。Webflowでこんなサイトが作れるというPRの意味もある記事です。

一見シンプルで色数も少ないですが,スクロールしていくと変化する凝ったサイトが多いです。スクロールによる効果が多いのは,Webflowがそういうページを作りやすいからなのでしょう。

図5 個性的なレイアウトのウェブサイトを15個紹介

図5 個性的なレイアウトのウェブサイトを15個紹介

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

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

Button Contrast Checker | Aditus | Free toolhttps://www.aditus.io/button-contrast-checker/

ウェブページ上のボタンの色と文字色/ボタンの色とその背景色に,十分なコントラストがあるかどうかを診断してくれるサービスです。URLを入力してスキャンボタンを押すと結果が表示されます。

ボタンの通常時/ホバー時/フォーカス時の全てを自動でチェックします。ボタンだけでなくリンク文字の色も対象です。結果は要素ごとに「AAA/AA/失敗」で評価されます。

WCAG ⁠アクセシビリティガイドライン)2.1に準拠しており,ガイドラインの内容もまとめてあります。チェックした結果もシンプルで見やすく,無料で使えるのもうれしい便利なサービスだと思います。

図6 ボタンのコントラストを診断してくれるサービス

図6 ボタンのコントラストを診断してくれるサービス

今週の気になるWebネタ

アリババ,スマートスピーカー「Tmall Genie」でスタバのコーヒーが注文可能に - CNET Japanhttps://japan.cnet.com/article/35142864/

中国では,Alibabaのスマートスピーカーでスターバックスの配達を注文できるようになったそうです。また,スターバックスデザインのスマートスピーカーを3000台の数量限定で発売したところすぐに売り切れたとのこと。

中国でもスターバックスは人気なんですね。一方日本では,スターバックスでの決済に使えるボールペン「STARBUCKS TOUCH The Pen」が登場しました。FeliCaチップを内蔵して非接触決済に使える,ゼブラと協力して開発したボールペンです。

スターバックスは世界中にファンがいるので,スターバックスデザインのスマートスピーカーやSTARBUCKS TOUCH The Penを欲しがる海外の人も多そうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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