週刊Webテク通信

2016年10月第4週号 1位は,UXデザインの7つのトレンド,気になるネタは,任天堂,新ゲーム機「Nintendo Switch」を発表--持ち運び可能な据え置き型マシン

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

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

1. 7 UX Design Trends to Watch out for in 2017| Inkoniq | Bloghttps://inkoniq.com/blog/7-ux-design-trends-to-watch-out-for-in-2017/

UXデザインのトレンドについてまとめた記事です。

  1. カード型デザイン,スクロール,視差効果…これらはどんな場合にも使えるわけではない
  2. インタラクションの中にあるインタラクション
  3. PWA(Progressive Web Apps)とAMP(Accelerated Mobile Pages)が後押ししてレスポンシブ化が進む
  4. 動画は今でも大きな存在だが,さらに巨大な存在感を示すようになる
  5. 珍しい色と太くて大きな文字
  6. プロトタイピングはラピッドプロトタイピングに置き換えられる
  7. 最新の方法でユーザーからのフィードバックを記録・解析する

3のPWAとは,ネイティブアプリのようなインタラクションを実現したスマホ向けWebページのことで,AMPは,Google主導で開発されている,モバイル端末でウェブページを高速表示するためのプロジェクト,またはそのためのフレームワークのことです。

図1 UXデザインの7つのトレンド

図1 UXデザインの7つのトレンド

2. Button Design Tips: Simple, Small and Vitally Important | Design Shackhttps://designshack.net/articles/graphics/button-design-tips/

ボタンデザインのヒントについて解説しています。

  • 触れられるように見えるべき
  • ボタンの色
  • ボタンのサイズ
  • ボタンの位置が重要
  • コントラストに重点を置く
  • 一般的な形を使用する
  • ユーザーに何ができるのかを説明する
  • ボタンを重要性が高く見えるようにする

図2 ボタンデザインのヒント

図2 ボタンデザインのヒント

3. Landing Page Design: 15 Tips for High Conversionshttps://www.sitepoint.com/15-tips-for-a-high-conversion-landing-page-design/

効果的なランディングページを作るためのヒントをまとめています。

  1. ユーザーのニーズを知る
  2. 焦点を絞る
  3. 主な特徴
  4. 引きつける
  5. 重要な情報を先に知らせる
  6. 説得力のある見だし
  7. お客様の声を追加する
  8. 特別価格や限定商品などの提示
  9. ライブチャット
  10. アクションを起こさせるためのボタン
  11. A/Bテスト
  12. プロフェッショナルに見えるように
  13. コンタクトフォームを最適化する
  14. サーチエンジンに最適化する
  15. 知的に見えるビジュアルを使う
  16. 競合製品と比較した情報を追加する
  17. プライバシーポリシー
  18. 計測して解析する

タイトルには「15 Tips」とありますが,実際は18項目ありました。

図3 効果的なランディングページを作るためのヒント

図3 効果的なランディングページを作るためのヒント

4. HUE.css - A huge pack of 49 photorealistic CSS gradientshttp://evankarageorgos.github.io/hue/

グラデーション背景が49種類用意されたCSSを配布しています。CSSだけで実現しており画像は使っていません。

ページ全体の背景はもちろん,ページの一部を囲む領域に使うのにも便利だと思います。

図4 CSSで実現したグラデーションのセット

図4 CSSで実現したグラデーションのセット

5. iPhone 7 and iOS 10: Free Mockups and Templates | NOUPEhttp://www.noupe.com/essentials/iphone-7-and-ios-10-free-mockups-templates-98968.html

iPhone7とiOS 10のモックアップ素材を多数紹介しています。

ワイヤーフレーム作成用のテンプレート素材やUIキットも掲載されていました。

図5 iPhone7とiOS 10のモックアップ素材いろいろ

図5 iPhone7とiOS 10のモックアップ素材いろいろ

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

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

Pulp. Mashed up email.http://pulp.glitchpack.com/

PULPは,レスポンシブなHTMLメールのテンプレートを作成しダウンロードできるサービスです。テーブルレイアウトとCSSを併用する面倒なHTMLメール用の段組部分が簡単に作れます。

1段,2段,3段の段組から選び,それを積み重ねていくことでレイアウトを作成します。追加した段組を取り消したり入れ替えたりはできないなど,とても単純な作りになっています。あらかじめ用意されたテンプレートをダウンロードすることもできます。

なお,HTMLメールとして使用するには,最終的にCSSをインライン化(HTMLのタグの中に記述)する必要があります。それには,この段組作成ツール画面の右下からリンクしている「Mailchimp Inliner」というツールを利用すると便利です。

図6 レスポンシブなHTMLメールテンプレート作成ツール

図6 レスポンシブなHTMLメールテンプレート作成ツール

今週の気になるWebネタ

任天堂,新ゲーム機「Nintendo Switch」を発表--持ち運び可能な据え置き型マシン - CNET Japanhttp://japan.cnet.com/entertainment/35090878/

任天堂の新ゲーム機「Nintendo Switch(ニンテンドースイッチ)が発表されました。据え置き型から持ち運びできるマシンにスイッチできるところが特徴です。

据え置き型で使っているコントローラーを持ち運びの際にも装着して使うなど,コントローラーを着脱して多彩なプレイスタイルが楽しめるところが面白いです。外出先で使う際にもコントローラーを取り外して使ったり,左右のコントローラーをバラバラに使って多人数プレイもできます。

WiiとDSとは別カテゴリーのゲーム機なのでしょうが,どっちつかずな感じを持たれそうにも感じます。モバイル機として使用する場合には,どうしてもスマートフォンと比べられると思うのですが,カメラやGPSなどがない(※詳細は発表されていませんが)のは見劣りしてしまいますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入