週刊Webテク通信

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

ネットで見かけた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ファイルを使ったアニメーションを作るサービス

おすすめ記事

記事・ニュース一覧