【フェイスブックは色が分かる?】アイキャッチ画像の認識は、人口知能の発達と、たくさんの思いが詰まっていた話。

こんにちは、管理人のRENAです。
いつも『初心者のためのワードプレス入門講座』をお読み頂き、ありがとうございます。

 

まだまだ発展途上のブログですが、
『ワードプレスにチャレンジしたい!』
『はじめたけど、難しくてなかなか前に進まない!』
そんな方のために、これからもお届けしていきたいと思います。

 

今日は、最近ず〜っと気になっていた、
フェイスブックのアイキャッチ画像の色に関するお話について…

 

フェイスブックは、どうやって色を識別しているの?

少し前から、フェイスブックに掲載される、
アイキャッチのピンク枠で囲んだ部分に色が加わりました。

アイキャッチ画像 facebook
(ついこの間までは、パソコンの表記にも色がついていたのですが、5/13の時点では、無色に戻っていました!)

 

そして、よく観察していると、アイキャッチ画像で仕様している写真の色に合わせて、親切、丁寧に、色が変わってるんです。

 

▼海の色に合わせたターコイズ。
ターコイズブルー ワードプレスのアイキャッチ画像

▼大入りの赤に合わせた赤。
大入り 心の筋トレアイキャッチ画像

▼リッツカールトンのお皿に合わせてロイヤルブルー。
ロイヤルブルー フェイスブックアイキャッチ画像

この色になって、急に自分のタイムラインが明るくなって、
『アイキャッチ画像に合わせて変わるなんてすごい!』
『可愛すぎる〜!』って、ただただ感激してたんです。

 

でも、同時に思うわけです…
『色の比率で変わるのかな?』
『インパクトのあるアイキャッチの色が採用されてる?』

 

その謎が深まると同時に、これだけたくさんの写真などが投稿される中で、
この識別をするフェイスブックのシステムそのものがすごいと。
フェイスブックのすごさに改めて感激していました。

 

でも、『色を識別する理由』そのものは理解出来なかったんです。
どうして色が識別できるのか?も、全く理解できず…
お恥ずかしいお話です。

 

ALT属性(オルト属性)の存在を知る

思わず、いつもお世話になっているデザイナーさんに質問させて頂きました。
その内容をちょっとシェアさせて頂きます!

 

『フェイスブックの写真の識別って、どうやってやっているのでしょうか?自動で出来てるので不思議すぎて…』

 

Sさん『画像に含まれる色を自動で識別しているんです。私たちWEBデザイナーは、HTMLで画像を配置する際にALT属性(オルト属性)を設定します。視覚に障がいがある方が使う音声リーダーでは、文字は読めても画像は認識できないので、その際にALT属性に書かれた文章を拾って、その画像が何なのかを伝えるんです

 

『すみません!!知りませんでした。そこまで識別されるんですね。アイキャッチの識別の話の背景に、その理由があったなんて、知りませんでした!』

 

SさんALT属性の自動代替えテキストに関しては、フェイスブックは去年からやっているんですよ。中学高校の友人が10年くらい前から目に障がいを持っていたので、色々とサポートを知っていたので知っていました。色に関しても、その頃から研究が続いていて、制度が上がって来て導入されたのかもしれませんね!』

 

「勉強不足ですみません!さまざまな垣根を越えて、情報を共有できるようになっているんですね!アイキャッチ画像って『人を引きつけ』その先の情報を見てもらうため!って思っていたのですが、写真の選び方が変わりそうです…

画像の例 パソコン、写真

Sさん「なので、玲奈さんの投稿されたブログの記事も…
『画像に含まれている可能性のあるもの:1人、座っている、ノートパソコン』
と、書かれています!これも全部自動なんですよ〜!」

【フェイスブックの色識別の不思議は…】
実は、色を識別しているだけでなく、その写真に何が写っているのかを識別しているということなんんです!

 

色の識別は、フェイスブックの人工知能の発達によるもの

今回、その事実を知り、改めて調べていると、この「色識別・画像認識」はフェイスブックの人工知能研究「Facebook AI Research(FAIR)」で開発している画像認識の技術によるものだと知りました!

 

FacebookはFAIRの立ち上げ当初から「コンピュータビジョン」と呼ばれる研究分野に注力し、コンピュータに人間と同じレベルの目と脳を持たせることに取り組んでこられているそうです。

 

画像内のオブジェクトを抽出して識別する技術が、2016年4月にフェイスブックで発表された「視覚障がい者向けの音声キャプション」にも採用されているのです。

 

もともとの写真認識技術

左の写真を観た時に、
私たちは、男性がカメラを覗き、カメラを操作し、草原?広い敷地を認識し、遠くに背の高い建物を認識することができます。

しかし、機械はそこまで認識できません。
右の写真のように、各ピクセルの色値(色の明度、彩度の相対値)を表す、数字の配列として認識されます。

元来の写真の識別技術

Facebookの人工知能の技術

さきほどの技術に加えて、FAIRでは「深層畳み込みニューラルネットワーク」という技術を応用したこの3つの技術(『Deep Mask』『Sharp Mask』『Multh Path Net』)を開発しました!

 

これまでの写真の色値だけでなく、実際に、写真に何が写っているのか、形や大きさから認識する技術を現在も高められているそうです。

フェイスブックの画像認識技術の写真

だから、先ほどの写真で、
『画像に含まれている可能性のあるもの:1人、座っている、ノートパソコン』
と、識別できるようになっているということなんです。

繊細な色の識別に感動!

▼赤という色もこんなに幅があります!赤に関する写真

▼青の色の種類でもこんなに♪
青に関する写真

▼緑だとこうなるのです!!
緑に関する写真

▼茶色やうすい色もこの通り!茶色に関する画像

▼グレーやシックな色も、こうみるとお洒落なのです!シックな色に関する画像

アイキャッチ画像を1つ設定するのにも、様々な工夫ができそうですね!
こうしてみると楽しくなってきます。

編集後記

今回、『アイキャッチ画像の色をどうやって識別しているの?』という、
素朴な疑問から、フェイスブックの人工知能の発達を知ることになりました。

 

ALT属性を知らなかったのは、本当にお恥ずかしく、反省すべき点だと思います。これからは画像ひとつひとつにタイトルをつけて、認識してもらい、音声ソフトでブログを読まれている方に向けても、サイトを作成していきたいと思いました。

 

フェイスブックの技術者の方々は、視覚障がいを持つ約5万人の方々のユーザビリティを調査し、もっと多くの方が楽しんでもらえるように今後もサービス改善を目指されています。世界の人、ネット使えるすべての人にとって楽しめる、役立つ技術を常に目指していることを感じています。

 

▼コンピュータービジョンの将来

料理にカメラを向けるだけでカロリー計算が出来るだけでなく、
商品にカメラを向けると、ネットで検索して購入出来たり、
人にカメラを向けると、ヘルスチェックができたり。
(今でも実際にできるものもあります…)

 

もはや、フェイスブックが目指しているのは、
ソーシャルメディアという人と人を結びつけるだけでなく、

 

商品の流通の改革や、医療の改革。
今は想像も及ばないような世界を生み出す可能性が
たくさんつまっているのだと感じました。

 

ワードプレスとはちょっと関係ないお話でしたが、
私たちが使っているフェイスブックの魅力を感じたので、
記事に書かせて頂きました。

 

ぜひ、アイキャッチ画像を選ぶ際には、
今日のことを少しでも思い出して頂けると幸いです。

 

最後までお読み頂き、ありがとうございます。

福岡開催決定!初心者のためのワードプレス講座

4月14日 福岡開催決定!
初心者のための8時間ではじめる
wordpress講座

詳細はこちら

Related Entry

初心者のためのワードプレス入門講座はじまります!

サーバー

【期間限定】5/31まで、ドメインがずっと無料キャンペーンが...