週刊Webテク通信

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

ネットで見かけた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 コーディング技術を競うコード共有サービス

おすすめ記事

記事・ニュース一覧