週刊Webテク通信

2019年2月第3週号1位は、Web Design 3.0の定義や目指すところ、気になるネタは、Spotifyが黒字転換、Anchorなどポッドキャスト企業2社買収

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

1. Web Design 3.0: When Your Web Design Really Matters - Nicepage.com Documentationhttps://nicepage.com/doc/article/20348/web-design-3-0-when-your-web-design-really-matters

ウェブデザインの歴史を振り返り、現状の問題点を明確にしたうえで、Web Design 3.0の定義や目指すところを解説しています。結局のところはウェブデザインツール「Nicepage」の宣伝のための記事ですが、なかなか興味深い内容でした。

Web Design 3.0の定義としては、以下の3つを挙げています。

  1. 自由な配置
  2. 要素の重なり
  3. Bootstrapのようなグリッドの制限をなくす

印刷物と同様の、創造性があり自由度の高いレイアウトを実現するのがWeb Design 3.0の目指すところのようで、そのためには新たなツールが必要という話の流れになっていました。

図1 Web Design 3.0の定義や目指すところを解説
図1 Web Design 3.0の定義や目指すところを解説

2. Mobile Icon Design for Faster Visual Searchhttps://uxmovement.com/mobile/mobile-icon-design-for-faster-visual-search/

モバイルアイコンのデザインについて、認識しやすさという観点からヒントを紹介しています。

  1. アイコンを詳細まで描き込むほど、視覚的なノイズが多くなり認識しにくくなる
  2. アイコンを背景図形に配置したとき、背景に対するアイコンの比率が低いと見にくくなる
  3. 暗い背景に明るい色のアイコンの方が大きく見えて認識しやすい
  4. 青、緑、赤がアイコンに好まれる色で、紫、オレンジ、黄色は好まれない色

青、緑、赤は光の三原色なのではっきり見えて親しみやすく、紫、オレンジ、黄色は色あせて見えるので好まれないのではないかとのことです。また、アイコンの持つ意味は、色の好みには特に影響を与えなかったそうです。

図2 モバイルアイコンのデザインのヒント
図2 モバイルアイコンのデザインのヒント

3. Can't Unseehttps://cantunsee.space/

2つの画像から、正しいUIデザインを選んでいくクイズを提供しています。結構むずかしくて夢中になってしまいます。

一見2つとも同じに見える画像もありますが、文字やアイコンの濃さや大きさがちょっとだけ違ったりしています。読みやすいもの、バランスの良いものを選ぶとだいたい正解します。

回答したあとは2つの画像のどこが違うのかがテキストで表示され、Shiftキーを押すか「Compare」ボタンを押すと切り替えながら比較できます。

図3 UIデザインのクイズサイト
図3 UIデザインのクイズサイト

4. Logo Design Cost: A look at the logo design priceshttps://www.designyourway.net/blog/graphic-design/logo-design-cost/

ロゴデザインにいくらかかるのかについて、だいたいの価格帯とその値段でどこまでできるかを解説しています。日本とは違う要素も多いと思いますが、金額的には1ドルを100円で換算したくらいで納得いく数字だと思います。

ツールやテンプレートで作る方法や、クラウドソーシングを利用する提案、フリーランスデザイナーの探し方まで紹介していて、なかなか読み応えのある記事です。

図4 ロゴデザインにかかるコストについて
図4 ロゴデザインにかかるコストについて

5. 10 Free Instagram Story Templateshttps://speckyboy.com/free-instagram-story-templates/

Instagramのストーリー用テンプレートを配布しているページをまとめています。

ストーリー用だけでなく、投稿用の正方形のテンプレートも混ざっており、無料のものも有料のものもあります。

ストーリーサイズのスマホ縦型用画像をレイアウトするヒントにもなりそうです。

図5 Instagramのストーリー用テンプレートいろいろ
図5 Instagramのストーリー用テンプレートいろいろ

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

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

Tokimeki Unfollow ✨https://tokimeki-unfollow.glitch.me/

「Tokimeki Unfollow」は、Twitterで自分がフォローしているアカウントを整理するためのサービスです。Twitterアカウントと連動させて、フォローしているアカウントのフォローを外すかどうかを順番に処理していきます。

Tokimekiは「ときめき」のことで、Netflixの番組が始まり米国で再ブレイク中の近藤麻理恵の「KonMari片付けメソッド」でフォロワーも整理しましょうということです。あらためて一人ずつのツイートを見て、ときめくかどうかで判断するんですね。

見ていく順番は、フォローしたのが新しい順、古い順、ランダムの3種類から選べます。アンフォロー/リストに追加/キープ(そのままフォローし続ける)はキーボードで操作もでき、快適に「KonMariメソッド」を実践できそうです。ちなみに、作者は近藤麻理恵とは全く無関係の人のようです。

図6 Twitterでフォローしているアカウントを整理するサービス
図6 Twitterでフォローしているアカウントを整理するサービス

おすすめ記事

記事・ニュース一覧