週刊Webテク通信

2015年5月第4週号 1位は,Webの新トレンド:没入型のインタラクションデザインについて ,気になるネタは,Facebook,メッセンジャーでプレイするゲームを準備中

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

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

1. New Web trends: immersive interaction designhttp://thenextweb.com/dd/2015/05/20/new-web-trends-immersive-interaction-design/

Webの新トレンドという,没入型のインタラクションデザインについて解説した記事です。

対話型,双方向的なユーザー体験のためのポイントとして,以下の4項目に分けて説明しています。

  1. アニメーションと切り替え効果(トランジション)
  2. インタラクティブなストーリー性のある見せ方
  3. マイクロインタラクション(ちょっとした相互作用)
  4. 階層構造のあるエフェクト

図1 没入型のインタラクションデザインの4つのポイント

図1 没入型のインタラクションデザインの4つのポイント

2. The 10 Commandments of Good Form Design on the Web - Monohttp://mono.company/journal/design-practice/the-10-commandments-of-good-form-design-on-the-web/

良いフォームデザインのための「十戒」です。原文では,⁠なんじ,○○なかれ」みたいな言葉遣いの見出しとなっています。

  1. フィールドのラベルを常に表示する
  2. 十分大きなフォントを使う
  3. タッチデバイスで指でタップしやすくする
  4. 予想される文字数に応じて入力欄のサイズを調整する
  5. チェックボックスとラジオボタンをカスタマイズしない
  6. エラーメッセージは全体で共通のものとフィールドごとに個別のものと両方を表示する
  7. 必須項目とそうでないものを明確にする
  8. 不要なものは必要となるまで表示しない
  9. 入力する項目を最小限にする
  10. どう入力して欲しいのかを明確にする

さらに追加の1項目として,⁠入力値チェックは送信ボタンを押してから行う」というのも載っていました。ユーザーは項目によっては後回しにする場合もあるので,フィールドに入力するたびに値チェックをしないほうがいいとのことでした。

図2 良いフォームデザインのための「十戒」

図2 良いフォームデザインのための「十戒」

3. Accessibility for Modern Responsive Website Layouts | Trendshttp://webdesignledger.com/trends-2/accessibility-for-responsive-websites

レスポンシブなWebサイトのレイアウトにおけるアクセシビリティについて,注意すべき点をまとめた記事です。

読みやすい文字を使う,重要でない要素を削る,柔軟性をもたせたレイアウトを使うといったポイントを解説しています。

図3 レスポンシブなWebレイアウトのアクセシビリティ

図3 レスポンシブなWebレイアウトのアクセシビリティ

4. Here are the Best Tools and Resources of 2015 - DesignM.aghttp://designm.ag/resources/here-are-the-best-tools-and-resources-of-2015/

Webデザインや制作に役立つツールや素材をまとめています。

HTMLメールのテンプレートの売買ができるサービスや,パワーポイントでワイヤーフレームを作るのに役立つツールキットなどが紹介されていました。

図4 Webデザインや制作に役立つツールや素材

図4 Webデザインや制作に役立つツールや素材

5. Flat Websites Design - 26 New Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2015/05/flat-websites-flat-ui-design/

フラットデザインのWebサイトのギャラリーです。

「2015年はちょっと影が薄くなってきたフラットデザインだけど,わたしは好き」という人が,目新しいフラットデザインのサイトをまとめています。

図5 フラットデザインのWebサイトのギャラリー

図5 フラットデザインのWebサイトのギャラリー

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

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

Adobe Photoshop, Illustrator and InDesign Keyboard Shortcut Visualiser | FastPrint.co.ukhttp://www.fastprint.co.uk/adobe-shortcut-mapper/

Adobe Photoshop,Illustrator,InDesignのショートカットキーを確認できるサービスです。画面に表示されたキーボードの各キーに機能の名称が表示されます。

画面上のキーボードのコマンドキーやシフトキーなどを押すと,それに合わせてショートカットが変更されます。パソコンのキーボードでキーを押した場合も同様です。

キーボードは,Mac/Windows/Linuxで切り替えたり,言語で切り替えられるようになっています。残念ながら,日本語キーボードは選べません。

検索フィールドに文字を入力してショートカットを探すこともできます。これももちろん英語なんですが,なかなか便利だと思います。

図6 Adobeのアプリケーションのショートカットを確認できるサービス

図6 Adobeのアプリケーションのショートカットを確認できるサービス

今週の気になるWebネタ

Facebook,メッセンジャーでプレイするゲームを準備中─⁠─米報道 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1505/19/news148.html

Facebook Messengerに関するニュースが最近多いのですが,メッセンジャーでプレイするゲームを準備中というよくわからない報道もありました。

LINEのゲームみたいに,ゲームの体力回復アイテムをメッセージで送り合うようなものを連想したのですが,それだけではないんでしょうか? チェスやボードゲームを順番でメッセージを送り合いながらやるというのもありかもしれません。

何にせよ,Facebookがやるわけですし,ソーシャルな要素が含まれたゲームになるんだと思います。そして,Facebookのゲームのお誘いの通知と同様なものが,メッセンジャーにも登場するんでしょうね。取引先からメッセージが来たと思ったらゲームのアイテムなんてことが,LINE同様起きそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入