週刊Webテク通信

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

ネットで見かけた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 ボタンのコントラストを診断してくれるサービス

おすすめ記事

記事・ニュース一覧