週刊Webテク通信

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

ネットで見かけた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メールテンプレート作成ツール

おすすめ記事

記事・ニュース一覧