週刊Webテク通信

2019年5月第5週号 1位は, モバイルコマースで売上を伸ばすためのデザイン手法,気になるネタは,老舗Macデベロッパーが作る携帯ゲーム機「Playdate」はモノクロ,手回しハンドル付き

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

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

1. 6 M-Commerce Design Practices to Help Improve Your Sales in 2019https://speckyboy.com/mobile-commerce-design/

モバイルコマース(モバイル端末を使ってのネット販売)で,売上を伸ばすためのデザイン手法についてまとめています。

  1. シンプルだけど重要な真実:モバイルを優先する
  2. タッチ操作に最適化し,ジェスチャー操作に対応する
  3. マイクロインタラクションでUXを作り上げる
  4. 自動サジェスト機能でユーザーの入力を簡単にする
  5. ユーザーにセキュリティ面での安心感を与える
  6. シンプルでスムーズ,スピーディーな支払い処理を構築する

5での安心感を与える方法として,鍵アイコンを使う,⁠進む」⁠安全」⁠暗号化」といった単語で不安を減らす,色の心理学を利用する,といった方法を解説していました。

なお,Eコマース,Mコマースに続いて,Vコマースという言葉もあるようですが,仮想空間で買い物するVirtualコマース,声で買い物をするVoiceコマース,オンライン動画で販売するVideoコマースといろんな意味があるようです。

図1 モバイルコマースで売上を伸ばすためのデザイン手法

図1 モバイルコマースで売上を伸ばすためのデザイン手法

2. 5 Rules for Choosing the Right Words on Button Labelshttps://uxmovement.com/buttons/5-rules-for-choosing-the-right-words-on-button-labels/

ボタンのラベルテキストとして,正しいものを選ぶ方法を解説しています。

  1. 動作をあらわす動詞を使う
  2. 正確な意味での言葉を使う
  3. 日常的な言葉を使う
  4. 能動的な命令形を使う
  5. 通常の文章での大文字小文字の使い方をする(単語の頭文字を全部大文字にしない)

すべて英語でのケースなので,日本語の場合に当てはまらない部分もありますが,参考にして気を配ることは必要だと思います。

図2 正しいラベルテキストを選ぶ方法

図2 正しいラベルテキストを選ぶ方法

3. 5 Design Ideas That Never Get Old | Design Shackhttps://designshack.net/articles/trends/design-ideas-that-never-get-old/

古くならないデザインのアイデアを5つまとめた記事です。

  1. グリッド
  2. 白黒
  3. 画面分割
  4. たくさんのホワイトスペース
  5. 特大の文字

図3 古くならないデザインのアイデア5選

図3 古くならないデザインのアイデア5選

4. Top 10 CSS Blog Cards - csshint - A designer hubhttp://csshint.com/css-blog-cards/

CSSによるカード型レイアウトのコーディング例を,CodePenからまとめています。

どの例もレスポンシブになっており,カーソルを合わせたときの効果が凝っているものも多いです。

図4 CSSによるカード型レイアウトのコーディング例

図4 CSSによるカード型レイアウトのコーディング例

5. On How I Approach Teaching CSS, CodePen Quizzes and Playing Cards – PEPSizedhttps://pepsized.com/on-how-i-approach-teaching-css-codepen-quizzes-and-playing-cards/

CSSを教えるためにクイズとカードゲームを使う方法を紹介しています。

問題を解きながらCSSを学べるCSSクイズはCodePenに3つ公開されていて,この記事の作者が作ったそうです。

図5 CSSを教えるためにクイズとカードゲームを使う方法

図5 CSSを教えるためにクイズとカードゲームを使う方法

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

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

SVGmator! Animate SVG fast and easily!https://www.svgmator.com/

SVGmator!は,簡単にSVGファイルを使ったアニメーションが作れるサービスです。ユーザー登録不要で無料で使えます。

SVGファイルの1つ1つのエレメントに対し,あらかじめ用意されたアニメーション効果を適用するだけの簡単操作です。アニメーションツールには付きもののタイムラインがなく,エレメントごとに動きのタイミングをコントロールすることはできません。

機能を非常に限定している分,シンプルで誰にでも使えるツールとなっています。グループ化したオブジェクトは1つの効果を適用するだけで順番に動いたりするので,素材となるSVGの作り方次第で高度なアニメーションも作れそうです。

図6 SVGファイルを使ったアニメーションを作るサービス

図6 SVGファイルを使ったアニメーションを作るサービス

今週の気になるWebネタ

老舗Macデベロッパーが作る携帯ゲーム機「Playdate」はモノクロ,手回しハンドル付き - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1905/23/news059.html

ウェブコーディング用エディタのCodaやFTPツールのTransmitでおなじみの米Panic社から,独自の携帯ゲーム機「Playdate」が発表されました。昔のゲームボーイをかわいくコンパクトにしたような黄色い筐体が印象的です。

Panicは最近はゲーム制作に力を入れていたようで,Firewatchというゲームをヒットさせたそうです。FirewatchはきれいなCGの作品ですが,このPlaydateはモノクロ液晶で,400×240pixelという低解像度です。

手回しのクランク型アナログコントローラといい,アナログ感やレトロ感があって興味深いゲーム機となっています。日本の公式サイト,公式ツイッターアカウントもできていて,日本でも発売されるようなので楽しみです。

著者プロフィール

芦之由(あしのよし)

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

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

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