週刊Webテク通信

2016年6月第1週号1位は、日本のWebデザインから学ぶ5つの教え、気になるネタは、360度動画のテレビ局を目指す--コロプラ子会社の「360Channel」本格始動

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

1. 5 Lessons We Can Learn From Japanese Web Design @speckyboyhttps://speckyboy.com/2016/05/27/japanese-web-design/

「日本のWebデザインから学ぶ5つの教え」といったタイトルの記事です。情報、細部、色、間隔、単純さの5つの項目に分けて、事例とともに解説しています。

楽天やヤフージャパンを代表とした、ごちゃごちゃした日本のWebデザインを否定的にとらえる声は国内でもよく見かけますが、この記事は嫌味ではなく良い点に目を向けているようです。

「日本のWebデザインは⁠less is more(より少ないことは、より豊かなこと)⁠の考え方を受け継いでいない」と書いてあるのを見て、苦笑いしつつもちゃんと日本のWebデザインについて分かってるんだなと感心しました。

図1 日本のWebデザインから学ぶ5つの教え
図1 日本のWebデザインから学ぶ5つの教え

2. Essential design trends, May 2016 | Webdesigner Depothttp://www.webdesignerdepot.com/2016/05/essential-design-trends-may-2016/

Webデザインの最近のトレンドを3点紹介しています。

  1. 1つの大きな写真
  2. サイドバーナビゲーション
  3. インタラクティブ性の高い体験型

サイドナビゲーションは、昔ながらの2カラムレイアウトでのサイドメニューではなく、サイドから出現するタイプのものです。

いわゆるハンバーガーメニューですが、ほぼ全画面までメニューが広がり、ロールオーバー時に背景画像が変わるなど大きな効果が加えられています。

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

3. Working With 3D Visuals in Web Design: A Primer | Design Shackhttps://designshack.net/articles/graphics/primer-to-working-with-3d-visuals/

3D的な効果を活かしたWebデザインについてまとめています。デザインに3D的な効果やスタイルを使用することが流行ってきているそうです。

紹介されている事例を見ると、基本的にはシンプルでフラットデザインがベースなものに、ちょっとした奥行きを感じられる効果が追加されています。マテリアルデザインの方向性ですね。

図3 3D的な効果を活かしたWebデザイン
図3 3D的な効果を活かしたWebデザイン

4. Mobile UX Design: The Right Ways to Ask Users for Permissions — UX Planethttps://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27#.syc4ex1eu

モバイルアプリでの、ユーザーに許可をもらう際のUXデザインについて解説した記事です。

位置情報や住所録、カメラなどへのアクセスを許可してもらうため、いつどのように許可をもらうかについてUXデザインの観点から考察しています。

図4 モバイルアプリでのユーザーに許可をもらうUXデザインについて
図4 モバイルアプリでのユーザーに許可をもらうUXデザインについて

5. 日本の90年代テレビゲームからUXデザインについて学ぶ | TechCrunch Japanhttp://jp.techcrunch.com/2016/05/31/20160528what-ux-designers-can-learn-from-1990s-japanese-video-games/

こちらも日本から学ぶ記事です。90年代の日本のテレビゲームのUXデザインから良い部分と悪い部分について解説しています。

現在のサイトやアプリのUXデザインに通じる部分があるということで、興味深い内容でした。

なお、原文の英語版は以下です。

図5 90年代の日本のテレビゲームのUXデザインの考察
図5 90年代の日本のテレビゲームのUXデザインの考察

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

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

Flex Layout Attribute (FLA)http://progressivered.com/fla/

厳密にはWebサービスではないのですが、Flexboxのレイアウトをインタラクティブに確認できるツールを紹介します。

Flexboxのレイアウトビルダー的なツールはこれまでもいろいろありましたが、このツールが一番分かりやすいと思います。ツールだけではなく細かい解説もあり、Flexboxのリファレンスとして役立つはずです。

「Snippets」としてレイアウト例もあり、レイアウト例をクリックするとツール上で確認できるところも便利です。

図6 Flexboxのレイアウトをインタラクティブに確認できるツール
図6 Flexboxのレイアウトをインタラクティブに確認できるツール

おすすめ記事

記事・ニュース一覧