週刊Webテク通信

2018年9月第4週号 1位は,ハンバーガーメニューの良い点,悪い点,気になるネタは,Amazon,「Echo」ファミリー拡大で「Echo Dot」などの更新および電子レンジ他の新製品

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

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

1. Loving & Hating the Hamburger Icon | Webdesigner Depothttps://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/

ハンバーガーメニューの良い点,悪い点を解説しています。

  • ○ すっきりしたキャンバス上にデザインできる
  • × 一部のユーザーには理解されないかもしれない
  • ○ モバイル向けのユーザーパターンとして受け入れられている
  • × 詰め込みすぎの傾向がある
  • ○ 重要なリンクに簡単かつダイレクトにアクセスする
  • × 関連情報の欠如
  • ○ スクリーン上の拡張された場所である
  • × 新しいことを見つけるのに複数回クリックが必要になる

図1 ハンバーガーメニューの良い点と悪い点

図1 ハンバーガーメニューの良い点と悪い点

2. 9 layout design trends | Webflow Bloghttps://webflow.com/blog/9-layout-design-trends

レイアウトデザインのトレンドを9つ紹介した記事です。

  1. 深さを追加した視差効果
  2. オーバーラップした要素
  3. ヘッダ,サブヘッダ,カラムをずらして配置してコンテンツを区切る
  4. 水平方向のカードを使ってコンテンツをレイアウトする
  5. 画面を分割
  6. グリッドを表示する
  7. 見出しを背景に入れる
  8. 横スクロールを選択する
  9. 図表部分がスライダー

図2 レイアウトデザインの9つのトレンド

図2 レイアウトデザインの9つのトレンド

3. Re-approaching Color – Lyft Designhttps://design.lyft.com/re-approaching-color-9e604ba22c88

拡張性がありアクセシブルなカラーシステムを作る新しい方法を紹介しています。

ColorBox.ioというオンラインツールが公開されており,この記事で解説している独自のアルゴリズムによってカラーシステムを作れます。

図3 カラーシステムを作る新しい方法とツールの紹介

図3 カラーシステムを作る新しい方法とツールの紹介

4. The ultimate guide to proper use of animation in UXhttps://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

UXに使用するアニメーションの究極のガイドと題し,主な原則とルールをまとめた記事です。

良い例と悪い例や解説をGIFアニメーションで見ることができて,わかりやすいです。

図4 UXアニメーションの究極のガイド

図4 UXアニメーションの究極のガイド

5. The Golden Ratio in Design: Examples & Tips | Design Shackhttps://designshack.net/articles/layouts/golden-ratio-in-design/

デザインに黄金比を使うためのテクニックと実例をまとめた記事です。

黄金比を計算するためのツールとテンプレートのリンク集も載っています。

図5 デザインに黄金比を使うためのテクニックと実例

図5 デザインに黄金比を使うためのテクニックと実例

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

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

Codier – Front-end Coding Challengeshttps://codier.io/

Codierはフロントエンドのコード共有サービスです。共通のテーマに対してコーディング技術を競う「Challenges」を前面に打ち出しています。

たとえば「Material Design Card」といったテーマには43個の投稿があります。評価が高い(いいね!的なものが多い)順に表示されるので,良いコードが探しやすくなっています。

コード共有サービスとしての機能も同種のものと遜色なく,シンプルなデザインで使いやすく感じました。まだ投稿数がそれほど多くなく,各Challengesも10票くらいのプラス評価で1位になれるくらいです。腕に覚えのある人は,今が目立てるチャンスだと思います。

図6 コーディング技術を競うコード共有サービス

図6 コーディング技術を競うコード共有サービス

今週の気になるWebネタ

Amazon,「Echo」ファミリー拡大で「Echo Dot」などの更新および電子レンジ他の新製品 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1809/21/news068.html

Amazonが音声アシスタント「Alexa」とスマートスピーカー「Echo」シリーズ関連の新製品をいろいろと発表しました。ディスプレイ付き「Echo Show」も新モデルから日本で発売されます。

ちょっと面白いのが,Echoと連動して使う電子レンジと壁掛け時計です。⁠レンジで2分温めて」など音声の命令で電子レンジをコントロールできるのは便利ですね。壁掛け時計は全面ディスプレーではなく,目盛りの部分にLEDが仕込まれているだけのようです。

スマートスピーカーではアラームとタイマーが多く使われているので,タイマーの経過時間などを視覚的に分かる「モニター」的役割としての壁掛け時計なんですね。スマートスピーカーだけでは足りない視覚フィードバックを,ディスプレイ以外で行う機器は今後もいろいろ出てきそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入