週刊Webテク通信

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

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

ネットで見かけた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での解析結果の例

今週の気になるWebネタ

Appleと大リーグが提携 全チームにiPad Proを支給 - Computerworldニュース:Computerworldhttp://itpro.nikkeibp.co.jp/atcl/idg/14/481542/040400217/

AppleとMLB(米大リーグ)が提携し,12.9インチのiPad Proが全球団に提供されるそうです。MLBが開発したチームのデータを活用するための専用アプリを搭載するそうですが,データは各球団が用意するようになっています。

これは,アメフトのNFLがマイクロソフトと独占契約し,2014年シーズンからSurface 2 Proを使用していることに対抗しているようです。だから,iPad Airやminiではなく,12.9インチのiPad Proじゃないといけないのですね。

それに伴い,ノートパソコン,タブレット,スマートフォンをダグアウトで使うことも解禁されるそうです。試合中に監督がTwitterで実況したり,選手がベンチでの自撮りをInstagramにアップしたりは,たぶん禁止ですよね…?

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入