週刊Webテク通信

2016年4月第1週号1位は、美しく魅力的なUIを作るためのヒント、気になるネタは、Appleと大リーグが提携 全チームにiPad Proを支給

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

1. Tips for Creating Beautiful and Engaging UIhttps://speckyboy.com/2016/03/28/tips-creating-beautiful-engaging-ui/

美しく魅力的なUIを作るためのヒントをまとめた記事です。

  • UIデザインの手順
  • 明確さを優先させる
  • ページのレイアウトを直感的なものにする
  • 即座に反応する
  • デフォルト設定を楽しく生産的なものにする
  • 行動をうながす案内をする
  • 基本的なデザイン要素をおろそかにしない
図1 美しく魅力的なUIを作るためのヒント
図1 美しく魅力的なUIを作るためのヒント

2. Essential Design Trends, March 2016 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/03/essential-design-trends-march-2016/

2016年3月のデザイントレンドを紹介しています。

以下の3項目について、事例と解説がまとめられていました。

  1. 黄色とゴールド
  2. ビンテージ
  3. インタラクション
図2 2016年3月のデザイントレンド
図2 2016年3月のデザイントレンド

3. Everything You Need to Know About HD Design | Design Shackhttp://designshack.net/articles/graphics/everything-you-need-to-know-about-hd-design/

Retinaディスプレイなど高解像度の画面に対応した、⁠HDデザイン」について解説した記事です。

画像、動画、イラストと背景画像、アイコンとユーザーインターフェイス要素について、高解像度画面を考慮した扱い方について紹介しています。

図3 高解像度の画面向けのWebデザインについて
図3 高解像度の画面向けのWebデザインについて

4. Danny Herran » State of affairs: Bootstrap 4 vs Foundation 6.2http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/

BootstrapとFoundationの、それぞれ最新版を比較した記事です。まだアルファ版のBootstrap 4と、最近リリースされたFoundation 6.2とを、9項目で比べて勝ち負けを付けています。

Foundation派のわたしとしてはちょっと残念ですが、結果は5勝2敗2分けでBootstrapのほうがオススメとなっていました。

なお、コメント欄でオススメのフロントエンドフレームワークを紹介している人もいて、そちらも参考になります。

図4 BootstrapとFoundationの比較
図4 BootstrapとFoundationの比較

5. Quick Tip: The Best Way To Make Sticky Footers | Tutorialzinehttp://tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/

ページのコンテンツの量が少ない場合にも、フッタを画面の一番下に固定するテクニックを紹介しています。

Flexboxを使うことによって、非常に簡単に実装しています。Flexboxに未対応のブラウザでも問題はないので、手軽に導入できそうです。

図5 フッタを画面の一番下に固定するテクニック
図5 フッタを画面の一番下に固定するテクニック

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

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

Nibbler - Test any websitehttp://nibbler.silktide.com/

Nibblerは、アクセシビリティやSEOなどの要素から、Webサイトを解析してレポートする無料のWebサービスです。URLを入力するだけで、点数付きのレポートを作成します。

いろいろな要素ごとに点数を付け、以下の4つの項目での総合評価も出しています。

見出しやページタイトル、モバイル対応などを元にした「アクセシビリティ」 コンテンツの量やサーバーの動作などを元にした「ユーザー体験」 ソーシャルメディアや解析タグなどを元にした「マーケティング」 コードの品質やメタタグ、URLのフォーマットなどを元にした「テクノロジー」

自分が管理するサイトを解析するのはもちろん、リニューアルを頼まれたサイトの状況を分析するのにも便利そうです。

このNibblerよりも機能が豊富な、有料版のSitebeamというサービスもあります。

図6 Webサイトを解析してレポートするNibbler
図6 Webサイトを解析してレポートするNibbler
図7 Nibblerでの解析結果の例
図7 Nibblerでの解析結果の例

おすすめ記事

記事・ニュース一覧