gihyo.jpサイトのロゴ

週刊Webテク通信

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

2019-04-04

ネットで見かけた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. 写真
  5. インスピレーション
図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　ウェブデザインのスキルアップにつながるゲームいろいろ

おすすめ記事

記事・ニュース一覧