週刊Webテク通信

2017年11月第1週号 1位は,モバイルでのUXの見栄えを良くするための5つのデザイントリック,気になるネタは,Saying Goodbye to Firebug(さよならFirebug)

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

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

1. 5 Design Tricks to Make Your Mobile UX Shine | Design Shackhttps://designshack.net/articles/ux-design/mobile-ux-design-tricks/

モバイルでのUXの見栄えを良くするための,5つのデザイントリックを紹介しています。

  1. スリム化したナビゲーション
  2. ジェスチャー(と触覚)
  3. 会話形式に
  4. アニメーション
  5. 操作説明をうまくやり,フォームを簡単に使いやすく

図1 モバイルでのUXの見栄えを良くするための5つのデザイントリック

図1 モバイルでのUXの見栄えを良くするための5つのデザイントリック

2. 3 Essential Design Trends, November 2017 | Webdesigner Depothttps://www.webdesignerdepot.com/2017/10/3-essential-design-trends-november-2017/

最近のデザイントレンド3つを実例とともに取り上げた記事です。

  1. アンダーラインを引いたテキストや図形
  2. 遮られたテキスト
  3. 美しい白黒

2は事例を見ていただくと分かりやすいのですが,文字を遮るように別な要素が配置されているデザインです。読みにくくなる危険はあるものの目を引くデザインに繋がるとのことでした。

図2 最近のデザイントレンド3つ

図2 最近のデザイントレンド3つ

3. 3 essential microinteraction design tips | Webflow Bloghttps://webflow.com/blog/3-essential-microinteraction-design-tips

マイクロインタラクションをデザインするヒントを紹介しています。マイクロインタラクションは,TwitterやFacebookの「いいね!」ボタンを押した後のアニメーションなど,ちょっとしたフィードバックのことです。

  • ユーザーを圧倒しない
  • ブランドイメージから外れることをしない
  • 機能を低下させない
  • 目的を持って使う

などのマイクロインタラクションを使う上で気をつけることなどがまとめられていました。

図3 マイクロインタラクションをデザインするヒント

図3 マイクロインタラクションをデザインするヒント

4. HEAD - A free guide to elementshttps://gethead.info/

HTMLのヘッダ部分に入る要素をまとめた,完全ガイドと言えそうなページです。

<head>内に入るmeta,link,title,style,script,noscriptの記述方法から始まり,Facebook Open Graph,Twitter CardなどSNS用の記述など,ヘッダ部分に入るものをほとんど網羅しています。

関連ドキュメントへのリンクも充実しており,いつでも確認できるようにブックマークしておきたいページです。

図4 HTMLのヘッダ部分に入る要素のガイド

図4 HTMLのヘッダ部分に入る要素のガイド

5. 17 Useful CSS Cheat Sheets of 2017 | With New CSS3 Tags - RankRedhttps://www.rankred.com/css-cheat-sheets/

CSSのチートシートを17種類まとめた記事です。

メディアクエリ,Flexbox,CSS Grid,CSSアニメーション,と最近のCSS制作では押さえておきたい技術はもちろん,短縮して記述するテクニックやWordPress用CSSのチートシートもあります。

図5 CSSのチートシートまとめ

図5 CSSのチートシートまとめ

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

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

imgix Page Weight Tool • Learn how to improve your site or app’s speed.https://pageweight.imgix.com/

ページの重さ(読み込みの遅さ)をテストして改善のヒントを与えてくれるサービスです。画像の重さとそれを最適化した場合にどのくらい減るのかを数値とグラフで表示します。

解析結果のレポートページの見せ方やデザインが非常に良くできていて参考になります。デスクトップ向けページとモバイルページとを切り替えてレポートを見ることができ,レポートページのURLをシェアすることも可能です。

オンライン画像処理APIサービスのimgixが提供するツールなので,imgixを使うと画像の最適化が簡単というサンプルにもなっています。なお,imgixは画像のリサイズや切り抜き,ぼかしなどの加工や,テキストやロゴを重ねるなどの処理もできて便利そうです。

図6 CSSのチートシートまとめ

図6 CSSのチートシートまとめ

図7 imgix Page Weight Toolのレポート例

図7 imgix Page Weight Toolのレポート例

今週の気になるWebネタ

Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer bloghttps://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/

ブラウザ上で動く開発ツールの先駆けだったFirebugが,Firefoxの次期リリースでサポート終了になり12年の歴史に幕を閉じるようです。ウェブデザイナーや開発者のほとんどは,過去にこのツールを使っていたんじゃないでしょうか。

ブラウザで見ているページをそのままいじれるというのは当時は画期的で,わたしはFirebugというエクステンションがあるからFirefoxを使っていたといっても過言ではありません。

その後ブラウザが開発ツールを内蔵するようになり,どのブラウザでもFirebugと同じようなことができるようになっていき,Firebugの存在感は薄れていきました。なお,Firebugの機能は現在全てFirefox標準の開発ツールに統合されているとのことです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入