週刊Webテク通信

2019年4月第1週号 1位は,モバイルでのボタンを直感的にするための5つのテクニック,気になるネタは,Apple,ゲームの定額制配信サービス「Apple Arcade」発表 iOSやMac,Apple TVで横断プレイ ソニックも参戦

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

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

1. 5 Techniques to Make Mobile Call to Action Buttons Intuitivehttps://uxmovement.com/mobile/5-techniques-to-make-mobile-call-to-action-buttons-intuitive/

モバイルでのボタンを直感的にするための5つのテクニックを説明画像とともに解説しています。

  1. 目線の移動の順番にあわせてボタンを並べる
  2. 図形で囲むことでボタンを通常のテキストと区別する
  3. 前進しているアクションには色を加える
  4. ラベルテキストの太さを変える
  5. 優先度の高いアクションにはアイコンを加える

図1 モバイルでのボタンを直感的にするための5つのテクニック

図1 モバイルでのボタンを直感的にするための5つのテクニック

2. Color Theory for Designers – A Crash Course | Toptalhttps://www.toptal.com/designers/visual/color-theory-for-designers

色の理論を元に,自信を持ってすばやく色を選択するためのインフォグラフィックスを掲載した記事です。

  1. 色は相対的なもの
  2. 色相が影響を与える
  3. 色は心理学
  4. 変わった色が目立つ
  5. 色は文化的な意味を持っている
  6. 彩度は鮮やかさに影響を与える
  7. 同じコントラストの色の組み合わせは視覚的に強力
  8. 色には60対30対10の法則がある
  9. 文字と背景色との関係はきわめて重要
  10. 色のアクセシビリティは無視してはいけない
  11. どんな2つの色も調和をとれる
  12. 基本的なカラースキームが最善

図2 自信を持って色を選択するためのインフォグラフィックス

図2 自信を持って色を選択するためのインフォグラフィックス

3. Top 5 design tools for striking visual content – Picture Deskhttps://picturedesk.tasteminty.com/trendy_illustrations_for_summer-2/

印象的なビジュアルコンテンツのためのデザインツールをまとめた記事です。

以下の5つのカテゴリごとに,おすすめのツールやサービスを紹介しています。

  1. フォント
  2. イラスト
  3. 写真
  4. インスピレーション

図3 ビジュアルコンテンツのためのデザインツールいろいろ

図3 ビジュアルコンテンツのためのデザインツールいろいろ

4. Create an Interactive Drop-Down Menu in Sketch Using Animahttps://blog.animaapp.com/create-an-interactive-drop-down-menu-in-sketch-using-anima-58ef2150bd1f

インタラクティブなドロップダウンメニューのプロトタイプを,SketchとAnimaというプラグインを使って実装する方法を解説しています。

ちょっと手間がかかりますが,ちゃんと選択した項目名が入るセレクトメニューが完成していました。

図4 SketchとAnimaでドロップダウンメニューのプロトタイプを作る方法

図4 SketchとAnimaでドロップダウンメニューのプロトタイプを作る方法

5. 5 Old-School Web Design Trends Nobody Misseshttps://www.awwwards.com/5-old-school-web-design-trends-nobody-misses.html

昔のスタイルのウェブデザインのトレンドを紹介しています。

  1. アクセスカウンター
  2. Netscape 4.0で見てください
  3. 工事中(Under construction)
  4. Flash
  5. フレーム

さいきん流行りの90年代風ウェブサイトもまとめて掲載しています。

図5 昔のスタイルのウェブデザインのトレンド

図5 昔のスタイルのウェブデザインのトレンド

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

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

Web Design & Development Games to Test Your Skills - 1stWebDesignerhttps://1stwebdesigner.com/web-design-development-games-to-test-your-skills/

ウェブデザインや開発のためのスキルアップにつながるゲームをまとめた記事です。ゲーム形式で学べるウェブサービスを11種類掲載しています。

以前紹介した正しいUIを2択から選んでいくものや,文字詰め,ベジェ曲線,色についてのゲームなど,楽しく学べそうなものがたくさんあります。CSSのFlexboxやGridを学べるものもありますが,結構むずかしいです。

ついつい夢中になってしまい,気付いたら結構な時間が経ってしまうケースが起こりそうなので注意が必要かもしれません。学びのためのものなので,結構時間のかかるものが多い印象です。

図6 ウェブデザインのスキルアップにつながるゲームいろいろ

図6 ウェブデザインのスキルアップにつながるゲームいろいろ

今週の気になるWebネタ

Apple,ゲームの定額制配信サービス「Apple Arcade」発表 iOSやMac,Apple TVで横断プレイ ソニックも参戦 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1903/26/news056.html

Appleがスペシャルイベント「It's Show Time」で,定額制のゲーム配信サービス「Apple Arcade」を発表しました。4つのサービスが発表されましたが,Apple ArcadeとApple TV+は日本でも提供されそうです。

ゲーム開発者にとっては,定額制サービスで遊んでもらうことが収入に繋がる方が,売上の見込みを立てやすくなるかもしれません。App Storeで高額なゲームをたくさん売るのはむずかしそうですし,開発者を救うサービスとなるのを期待されているようです。

iOSのゲームはあまりやらないのですが,定額制によって課金要素のない良質なゲームが増えるのであれば,やってみたいなと興味を持ちました。個人的にはスポーツゲームに期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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