週刊Webテク通信

2017年10月第2週号 1位は,ボタンを使わない未来のUIデザインについて,気になるネタは,スマートスピーカーの国内展開は「レンタル」と「実質0円」に注目

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

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

1. Future UI Design Without Buttons | Toptalhttps://www.toptal.com/designers/ui/future-ui-design-without-buttons

ボタンを使わない未来のUIデザインについて考察した記事です。マイク,カメラ,タッチスクリーン,振動,加速度計,ジャイロ,GPS,拡張現実,バーチャルリアリティなどを使うことでボタンのいらないUIが実現できるとして,いくつかの例を紹介してします。

Instagarmのストーリーのナビゲーションが,タッチスクリーン全体が操作に使われる例として載っています。スクリーンの真ん中あたりをタップすると一時停止,左右の端をタップすると次や前へのナビゲーションとなっており,最初は分かりにくいですが慣れるとボタンより快適です。

なお,拍手で「いいね!」ができる例や,指でハートを描くと「いいね!」になる例が掲載されていますが,これらはあくまでも「こういうのはどうでしょう」というコンセプト動画でした。

図1 ボタンを使わない未来のUIデザインについて

図1 ボタンを使わない未来のUIデザインについて

2. 10 Free Snippets for Creating CSS Content Cardshttps://speckyboy.com/css-content-cards/

カード型でコンテンツを見せる「コンテンツカード」のCSSでのコーディング例を10個紹介しています。

マテリアルデザインでおなじみのモバイル端末を意識した要素だと思いますが,PCでしか動作しないホバー状態での変化をうまく使ったものも多いところが気になります。

図2 コンテンツカードのコーディング例いろいろ

図2 コンテンツカードのコーディング例いろいろ

3. More Padding, Please! – Wayfair Design – Mediumhttps://medium.com/wayfair-design/more-padding-please-b95e19422acc

「もっと空白を!」というタイトルで,デザインにおけるホワイトスペースの重要性を訴えています。

この記事の作者の会社では,8, 16, 24, 32, 40と8の倍数ピクセルでパディングを設定するルールになっており,それにより視覚的な一貫性を生んでいるとのことです。

ホワイトスペースによりユーザー体験はどう改善されるかという項目では,以下の3点について説明していました。

  • 特定の要素に焦点を当てられる
  • ページ内の構成がわかりやすくなる
  • 読みやすくなる

図3 デザインにおけるホワイトスペースの重要性

図3 デザインにおけるホワイトスペースの重要性

4. Making a Pure CSS Play/Pause Button | CSS-Trickshttps://css-tricks.com/making-pure-css-playpause-button/

CSSだけでプレイボタン/ポーズボタンを作る方法を丁寧に解説しています。

昔ながらのCSSのボーダーを使ってテクニックで,プレイ/ポーズボタンを作り出しています。

図4 CSSだけでプレイボタン/ポーズボタンを作る

図4 CSSだけでプレイボタン/ポーズボタンを作る

5. 10 Beautiful Examples of iOS 11 App Designhttps://1stwebdesigner.com/beautiful-ios-11-app-design/

iOS11での美しいアプリデザインの例をGIFアニメで紹介しています。

より大きなタイトルテキスト,大きく丸みを帯びたコーナー,微妙な影,洗練されたボタンやアイコンが特徴のようです。

図5 iOS11での美しいアプリデザインの例いろいろ

図5 iOS11での美しいアプリデザインの例いろいろ

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

RatioBuddy - Aspect ratio calculatorhttp://ratiobuddy.com/

RatioBuddyはイメージの縦横比を計算してくれるシンプルなWebサービスです。縦横比を固定したままレスポンシブにリサイズできるCSSコードも生成されます。

上の欄が縦横のピクセル数,下の欄が縦横比となっており,それぞれ数値入力できます。画像サイズを入力して縦横比を求めたり,縦横比を固定した状態で幅か高さの片方の数値を入力することで,もう片方の数値を求めるといった使い方ができます。

たとえばサムネイル画像のサイズを決めたいという場合には,まず画像サイズを入れて縦横比を求めて,鍵マークを選んで縦横比を固定したあと幅か高さかの数値を入力してサイズを決められます。

図6 イメージの縦横比を計算してくれるシンプルなWebサービス

図6 イメージの縦横比を計算してくれるシンプルなWebサービス

今週の気になるWebネタ

スマートスピーカーの国内展開は「レンタル」「実質0円」に注目 - 週刊アスキーhttp://weekly.ascii.jp/elem/000/000/405/405376/

グーグルのスマートスピーカー「Google Home」の国内販売がスタートし,LINEの「Clova WAVE」も正式販売が開始され,スマートスピーカーが日本でもいよいよ始動しました。

Google HomeはTSUTAYAでレンタルも行われるそうで,試してみたい人には便利そうです。一方Clova WAVEは「LINE MUSIC」の12ヶ月分をセットにした限定モデルがあり,LINE MUSICの使用料を考えると本体料金は実質1280円となるとのことです。

米国でスマートスピーカーのトップを走る「Amazon Echo」や,音楽再生に重きを置いたAppleの「HomePod」の登場がまだなので,様子見という人も多いでしょう。しばらくはヒット商品といえるほどスマートスピーカーが売れることはないと思いますが,じわじわと普及していく可能性はあると考えています。

著者プロフィール

芦之由(あしのよし)

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

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

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

バックナンバー

週刊Webテク通信

バックナンバー一覧

コメント

コメントの記入