週刊Webテク通信

2018年3月第4週号 1位は，ユーザーフレンドリーなフォームを作るためのヒント，気になるネタは，カシオの「ゲーム電卓」復活 シューティング搭載「SL-880」38年ぶりに

Webテク, Webデザイン, Web広告, UI, JavaScript, ゲーム電卓

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2018年3月12日～3月18日の間に見つけた記事のベスト5です。

1. Creating User-friendly forms – Prototyprhttps://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

ユーザーフレンドリーなフォームを作るためのヒントを紹介しています。

  1. シンプルさを保つ
  2. インラインでの値チェックを行う
  3. 関連するフィールドはまとめる
  4. ラベルテキストを使用し，左揃えに並べる
  5. 入力欄の種類に合わせてサイズを変える
  6. コールトゥアクションボタンを目立たせる
  7. 検索フィールドを隠さない
  8. 明瞭にする

図1　ユーザーフレンドリーなフォームを作るためのヒント

図1　ユーザーフレンドリーなフォームを作るためのヒント

2. The Great Design Battle of 2018 — Pick Your Side – Design + Sketch – Mediumhttps://medium.com/sketch-app-sources/design-tool-choices-2018-a3e6a8ce87c6

ウェブデザインのためのツールの最近の動向と今後の予想をまとめた記事です。

デザイン→プロトタイプ→ハンドオフ（開発への橋渡し）の3つの段階におけるツールを2016年から振り返っています。2016年の段階ではデザイン，プロトタイプにそれぞれ2つだったツールが，2017年には4つずつに増えています。

2019年には，各ツールがデザイン，プロトタイプ，ハンドオフの全ての機能を持ち異なるツール間の連携が難しくなるというパターンと，各ツール間で連携が取りやすくなるというパターンとの2つの予想が載っていました。

図2　ウェブデザインツールの最近の動向と今後の予想

図2　ウェブデザインツールの最近の動向と今後の予想

3. UI Design: How to Amplify User Interface with Illustrationshttps://icons8.com/articles/ui-design-user-interface-illustrations/

イラストを使うことでユーザーインターフェイスを強化する方法を解説しています。

イラストの利点として以下の5つが挙げられていました。

  1. テキストより速く知覚されるので重要なメッセージをすばやく伝えられる
  2. ページまたはスクリーンの視覚的な階層構造を伝えられる
  3. インタフェースの審美的，感情的な魅力を強める
  4. 色，形，視覚的な比喩を心理に訴えかける
  5. 必要な詳細部分にユーザーの注意を引く

図3　イラストでユーザーインターフェイスを強化する方法

図3　イラストでユーザーインターフェイスを強化する方法

4. 10 Examples of Effective Website Header and Footer Designhttps://speckyboy.com/website-header-footer-design/

ヘッダとフッタのデザインの実例を紹介しています。デザイン的に優れているというよりも，どういう機能を持たせるかに焦点を当てています。

これらを参考にしつつ，ブランドに合わせた固有のヘッダまたはフッタを作成することが重要とのことでした。

図4　ヘッダとフッタの実例紹介

図4　ヘッダとフッタの実例紹介

5. Best Free Scroll To Top JavaScript Plugins & Snippets - Onextrapixelhttps://onextrapixel.com/free-scroll-top-snippets/

ページの先頭に戻る機能を実装するためのJavaScriptプラグインとコードをまとめています。

オリジナルで作るのもそう難しくはありませんが，まとめたものを最近見たことがなかったので取り上げてみました。

図5　ページの先頭に戻る機能のJavaScriptプラグインとコード

図5　ページの先頭に戻る機能のJavaScriptプラグインとコード

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

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

All categories | Interfaces.prohttps://interfaces.pro/

All categoriesはウェブサイトをインターフェイス要素ごとにカテゴリ分けしたデザインギャラリーを提供しています。有名サイトから学ぼうという考えで，量より質でセレクトされているようです。

404ページ，わたしたちについて，お問い合わせ，といったページの種類別や，フォーム，価格表といった要素別に探すことができます。カテゴリが多すぎで探しにくいときは，カテゴリリストの下をクリックすると検索窓が現れて絞り込みが可能です。

一覧表示と詳細表示の両方で，デスクトップとモバイルでの画面を切り替えて見られて便利です。もちろん気になったサイトに直接アクセスできるようリンクも用意されています。

図6　インターフェイス要素ごとにカテゴリ分けしたデザインギャラリー

図6　インターフェイス要素ごとにカテゴリ分けしたデザインギャラリー

今週の気になるWebネタ

カシオの「ゲーム電卓」復活 シューティング搭載「SL-880」38年ぶりに - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1803/15/news067.html

カシオから「ゲーム電卓」の新製品が発売されるそうです。「⁠デジタルインベーダー」というゲームが遊べる電卓で，38年ぶりに復活されることになります。

このゲーム電卓自体は持っていませんでしたが，シャープのポケコン（ポケットコンピュータ）にBASIC言語で移籍された「デジタルインベーダー」があって，それで遊んでいた記憶があります。

この「デジタルインベーダー」は，Android用のアプリで登場していることを以前見かけて懐かしく思ったことがありました。「⁠80年代の電子ゲームを再評価する動きも見られる」とのことですが，そういった電子ゲームをちゃんと公式版としてスマホゲーム化していくと面白そうです。

Webテク, Webデザイン, Web広告, UI, JavaScript, ゲーム電卓

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote