週刊Webテク通信

2018年4月第2週号 1位は,ボタンのステータス(状況)によるデザインのヒント,気になるネタは,「Alexa」,決済機能「Amazon Pay」で米非営利団体への寄付が可能に

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

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

1. Designing Button States - Cloud Fourhttps://cloudfour.com/thinks/designing-button-states/

ボタンのステータス(状況)による変化をどうデザインするかについて,良い例,悪い例を挙げて解説しています。

標準時/ホバー時/押せないときなどの状況を正しく伝えるためのヒントがまとめられていて参考になります。

図1 ボタンのステータス(状況)によるデザインのヒント

図1 ボタンのステータス(状況)によるデザインのヒント

2. 25 Best Responsive Business Website Design Exampleshttps://business.tutsplus.com/articles/best-responsive-business-website-design-examples--cms-30734

レスポンシブデザインの企業サイトの良い例を25サイト紹介しています。

見た目が素晴らしいレスポンシブなウェブサイトを作るためのヒントがまとめられていました。

  • 魅力的なデザイン
  • 最適化された画像
  • ライトボックス(画像クリックでの全面表示)をモバイル端末では無効にする
  • 全ての端末でフォームのフィールドの大きさをテストする
  • ポップアップをモバイル端末では無効にする
  • レスポンシブなシェアボタンを使う

図2 レスポンシブデザインの企業サイトの良い例いろいろ

図2 レスポンシブデザインの企業サイトの良い例いろいろ

3. 3 Essential Design Trends, April 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/04/3-essential-design-trends-april-2018/

最近のデザイントレンドを3つ紹介しています。

  1. 泡&どろっとしたかたまり
  2. 浮いている四角形
  3. 文字の形に切り取られた画像

図3 最近のデザイントレンド

図3 最近のデザイントレンド

4. Try the most efficient UX/UI Tools in 2018 | Web Resources | WebAppershttp://www.webappers.com/2018/04/05/try-efficient-uxui-tools-2018/

最近やらたと増えてきたUX/UIデザインツールを7つ紹介した記事です。

共同作業,プロトタイピング,インタラクティブデザイン,ユーザーテストの手助けになるようなツール類がまとめられています。

図4 UX/UIデザインツールのまとめ

図4 UX/UIデザインツールのまとめ

5. Mockup Photos - High quality mockup templates from around the worldhttps://mockup.photos/

スマホやPCの画面に自分の作った画像を入れ込んだ,ハメコミ合成写真を作れるサービスです。デジタルデバイスだけではなく,ノートなどアナログな写真素材もあります。

フリーの素材もそれなりに揃っていますが,月額19ドルの有料プランにすると450近くの素材が使えます。この手の画像を毎月作るニーズはそんなに多くないと思うので,単品購入もできると良いかと思いますが…。

図5 デジタルデバイスなどのハメコミ合成画像を作れるサービス

図5 デジタルデバイスなどのハメコミ合成画像を作れるサービス

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

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

Logobook - Discover the worlds finest logos, symbols and trademarkshttp://www.logobook.com/

Logobookはロゴ,シンボル,トレードマークをいろいろな切り口で探せるサービスです。モノクロのマークが大量に集められています。

文字,形,もの,自然,ビジネスといった大カテゴリに分かれており,それぞれの小カテゴリからロゴを絞り込むことができます。たとえば,⁠A」をモチーフにしたロゴ,三角形を使ったロゴ,鳥をモチーフにしたロゴ,ホテルのロゴ,スポーツ関連企業のロゴ,などの探し方ができます。

クオリティが高いものばかりではない印象を受けますが,いろいろなカテゴリでマークがまとまっていて面白いです。眺めていると,ほとんどのパターンは出尽くしているように感じてきますが…。日本のロゴやマークを集めたこういったサイトがあると便利だと思いました。

図6 ロゴ,シンボル,トレードマークをいろいろな切り口で探せるサービス

図6 ロゴ,シンボル,トレードマークをいろいろな切り口で探せるサービス

今週の気になるWebネタ

「Alexa」,決済機能「Amazon Pay」で米非営利団体への寄付が可能に - CNET Japanhttps://japan.cnet.com/article/35117091/

米国では,Amazon Echoに「Alexa,米国がん協会に10ドル寄付して」みたいに話しかけるだけで寄付できるようになったそうです。決済にはAmazon Payを利用します。

それほど画期的ではありませんが,寄付へのハードルがかなり下がりそうです。Alexaを使った個人間送金に対応する予定もあるとのことですが,スマートスピーカーでの音声による決済は今後盛り上がりそうに思えます。

それと同時に,セキュリティ面への配慮や機能強化が必要でしょうし,詐欺なども起こる予感がします。日本ではスマートスピーカーよりAIスピーカーという呼び名が普及していますが,⁠AIスピーカー詐欺」というと,AIを使った詐欺みたいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入