週刊Webテク通信

2019年9月第3週号1位は、 ボタンの定義と種類、設計のためのヒント、気になるネタは、「Apple Arcade」日本でも9月20日スタート 月額600円(無料トライアルあり)

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

1. Basic Types of Buttons in User Interfaces - UX Planethttps://uxplanet.org/basic-types-of-buttons-in-user-interfaces-ea7b065f66ee

ボタンの定義と種類、設計のためのヒントをまとめた記事です。

以下、紹介されているボタンの種類です。

  • CTAボタン
  • テキストボタン
  • ドロップダウンボタン
  • ハンバーガーボタン
  • プラスボタン
  • エクスペンダブルボタン(押すと様々なオプションが開く)
  • 共有ボタン
  • ゴーストボタン
  • フローティングアクションボタン
図1 ボタンの定義と種類、設計のためのヒント
図1 ボタンの定義と種類、設計のためのヒント

2. Integrating Video and Web Content: Lessons in User Interface Design | Thomas Parkhttps://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/

ウェブページ上に動画を配置する場合の、ユーザーインターフェイスデザインについて注意点を解説しています。

  • 垂直スクロールは水平スクロールに勝る
  • 可能な場合、リストを単一カラムに制限する
  • 固定配置で動画を表示し続ける
  • メディアクエリを使う場合、orientationメディア特性を使う
  • モバイルでデフォルトのフルスクリーン動作を無効にする
  • 動画とウェブコンテンツの双方向性のある連動
  • 遅延自動スクロール

すべてを実践した例として、The Beautubeというサイトを紹介していました。

図2 ウェブページ上に動画を配置する場合のUIデザインのヒント
図2 ウェブページ上に動画を配置する場合のUIデザインのヒント

3. Best of Interaction Design — Sep 2019 - Product Disrupt Bloghttps://blog.productdisrupt.com/best-of-interaction-design-sep-2019-5541c9bd6093

インタラクションデザインを動画(アニメーションGIF)で紹介しています。

Dribbbleに掲載されたものからセレクトしているので、実際に使われているものではなくサンプル作品的なものが多いと思います。

図3 インタラクションデザインを動画で紹介
図3 インタラクションデザインを動画で紹介

4. Top Prototyping and Design Handoff Tools for Designers - 1stWebDesignerhttps://1stwebdesigner.com/top-prototyping-and-design-handoff-tools-for-designers/

デザイナーのためのプロトタイピング&ハンドオフ(開発者への引き継ぎ)ツールを5つ紹介しています。

今とても注目の分野で、勝者もまだ完全には決まっていないと思います。個人的にはiPadに対応したこの手のツールの登場を期待しています。

図4 デザイナーのためのプロトタイピング&ハンドオフツールいろいろ
図4 デザイナーのためのプロトタイピング&ハンドオフツールいろいろ

5. Can I email… Support tables for HTML and CSS in emailshttps://www.caniemail.com/

各種メーラー/メールサービスでの、HTML、CSSタグの対応状況を教えてくれるサービスです。

わたしは以前やっていて今は関わってないのですが、HTMLメールでのニュースレターをコーディングしている人には役立つはずです。

図5 メーラーでのHTML、CSSタグの対応状況を調べるサービス
図5 メーラーでのHTML、CSSタグの対応状況を調べるサービス

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

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

altmails | Disposable temporary email addresses which forward every email to your mailboxhttps://altmails.com/

altmailsを使うと、転送用のメールアドレスを簡単に作れます。Webサービスにサインアップするときの、使い捨ての一時的なメールアドレスとしての利用を考えたサービスです。

自分のメールアドレスと、新たに作るメールアドレスの@altmails.comの前に入る文字列を入力するだけで、メールアドレスが作れます。転送されてきたメール内の「Unsubscribe」のリンクから、いつでもメールアドレスを削除できます。

一時的なメールアドレスを作ってブラウザ上でメールを受け取れるTEMPMAIL、ブラウザ上からメールを送信できるSENDMAILという関連サービスもあり、どれも便利そうです。ウェブフォームからのメール送信を簡単に実装できるformsubmitと同じ開発元でした。

図6 転送用のメールアドレスを簡単に作れるサービス
図6 転送用のメールアドレスを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧