週刊Webテク通信

2020年11月第2週号 1位は，Google新アイコンの区別の付きにくさを改善する試み，気になるネタは，自撮り画像を他人が撮ったように変換する技術「Unselfie」 Adobeなど開発

Webテク, Webデザイン, Web広告, Google, CSS, フレームワーク, ブログ, AI, 写真

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2020年11月2日～11月8日の間に見つけた記事のベスト5です。

1. Why Google’s new app logos are pretty (&) bad | by Markus Hofmann | Bootcamp | Nov, 2020 | Mediumhttps://medium.com/design-bootcamp/why-googles-new-app-icons-are-pretty-bad-10f1ec40ab04

Googleの各サービスのアイコンがリニューアルして，以前より統一感が強まったのですが区別しにくいと不評です。

この記事では，Googleの新アイコンたちのスタイルを可能な限り維持しつつ，細部を最適化して区別の付きにくさを改善する試みを紹介しています。

図の中の解説が画像になっているので自動翻訳できないのが残念ですが，どう改善するかの解説がとても参考になります。

図1　Google新アイコンの区別の付きにくさを改善する試み

図1　Google新アイコンの区別の付きにくさを改善する試み

2. 9 essential elements of a modern website design | Webflow Bloghttps://webflow.com/blog/elements-of-a-website

現在のウェブデザインにおける重要な要素を9つまとめた記事です。

  1. ビジネスのウェブサイトには明確な目的が必要
  2. そのブランドらしい発言をする
  3. 情報の構造や構成に沿った使い方ができるようデザインする
  4. 明確なユーザー体験を提供する
  5. Eコマースを簡単にする
  6. コンテンツを最新の状態に保つ
  7. タイポグラフィに一貫性を持たせる
  8. 色で視覚的なアイデンティティを表す
  9. 連絡を取る方法を提供する

図2　現在のウェブデザインにおける重要な要素9つ

図2　現在のウェブデザインにおける重要な要素9つ

3. Color Contrast Mistakes on Buttonshttps://uxmovement.com/buttons/color-contrast-mistakes-on-buttons/

2つのボタンの色のコントラストについて解説しています。目立たせたいメインの「プライマリボタン」と，2つ目の選択肢「セカンダリボタン」との差の付け方の注意点です。

  • プライマリボタンと同じ色をセカンダリボタンのアウトラインに使わない
  • セカンダリボタンを黒色にしない
  • プライマリボタンに明るいアクセントカラーを使わない

なお，この記事の全ての内容を読むには有料のサブスクリプションに登録する必要があります。その仕組みは最近注目されているSubstackというサービスを利用しています。

ブログには記事を途中まで載せておき，全文はSubstack上に有料コンテンツとして登録することで，途中から有料というnoteのようなことができる例として面白いと思いました。

図3　2つのボタンの色のコントラストの差の付け方について

図3　2つのボタンの色のコントラストの差の付け方について

4. Amazing Examples of Vintage Style Web Design - Qode Interactivehttps://qodeinteractive.com/magazine/examples-of-vintage-style-web-design/

ヴィンテージなスタイルのウェブデザインを実例とともに紹介した記事です。

バロック，ゴシック様式，アールデコ，アール・ヌーボーなどのカテゴリーにわけて掲載しています。

図4　ヴィンテージなウェブデザインいろいろ

図4　ヴィンテージなウェブデザインいろいろ

5. OrbitCSS - A modern CSS framework based on Flexbox.https://orbitcss.com/

FlexboxベースのCSSフレームワークです。CDNから読み込んで使うこともでき，軽量です。Sassでカスタマイズしやすく作られているそうです。

テンプレートとして使えそうなサンプルと，このフレームワークで作られた事例も充実していて，導入に役立ちそうです。

図5　FlexboxベースのCSSフレームワークOrbitCSS

図5　FlexboxベースのCSSフレームワークOrbitCSS

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

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

Ench — A new era editor for digital creators.https://ench.app/

Enchはシンプルなコンテンツ配信のプラットフォームです。ブログというフレーズは使っていませんが，簡単ブログサービスと言った方がわかりやすいと思います。

Mediumやnote風のいまどきのエディタですが，よりシンプルにアレンジされています。パソコンのブラウザでもモバイルのブラウザでもほぼ同じ操作感で作業できました。

課金の仕組みとユーザー同士のフォロー機能が今後追加予定です。課金は9つの方法から選べるとのことで気になります。最近のこの手のサービスは収益化の仕組みが必須となってきているようですね。

図6　シンプルなコンテンツ配信のプラットフォーム

図6　シンプルなコンテンツ配信のプラットフォーム

今週の気になるWebネタ

自撮り画像を他人が撮ったように変換する技術「Unselfie」 Adobeなど開発 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2011/02/news052.html

ベルギーとアメリカの大学とAdobe Researchチームとが，自撮り写真を別の人が撮影した写真のように変換する技術を開発しました。サンプルを見たところ，とても自然な仕上がりになっていました。

もちろんAI技術を使って自動で生成するための技術です。Photoshopが不要になるような技術をAdobeが開発しているところが興味深いです。

逆に普通の人物写真を自撮り風に変換することもできそうですね。その技術が実現すれば，アイドルなどが写真をSNSにアップするときに，ひとりで出かけているよとアピールするために使えそうです。

Webテク, Webデザイン, Web広告, Google, CSS, フレームワーク, ブログ, AI, 写真

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote