週刊Webテク通信

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

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

ネットで見かけた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 転送用のメールアドレスを簡単に作れるサービス

今週の気になるWebネタ

「Apple Arcade」日本でも9月20日スタート 月額600円(無料トライアルあり) - ITmedia PC USERhttps://www.itmedia.co.jp/pcuser/articles/1909/11/news098.html

Apple Arcadeは月額600円で,家族6人まで契約を共有できることが発表されました。日本では9月20日にスタートで,1ヶ月間は無料体験できます。

iPhone,iPad,Mac,Apple TVで同じゲームが遊べ,外出先ではiPhoneでプレイし,自宅Macで遊ぶといったことも可能とのこと。ゲーム専用機のゲームに匹敵するような本格的なタイトルも多いようで,PlayStation 4,Xbox One用のコントローラーが使えるそうです。

ファミリープランはあるだろうと思っていましたが,個人プランと同じ料金で6人までというのは予想外でした。600円という値段は安いと思いますが,家族と共有しない人は損しているように感じるかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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