サイトをマテリアルデザイン風に変更してみた。触覚イメージでSEO効果!?

投稿日:

Material

サイトの見た目を学んだばかりの「マテリアルデザイン」風に変えてみました。

マテリアルデザインはもともとGoogleが提唱している所からで、イメージとしては「ウェブサイトという紙の上にパーツを置く」感じだと解釈しています。

物質を手で持って見る感覚(視覚+触覚)。さらにはパーツの「動き」が加わってデザインとして完成するっちゅー何ともザックリとした把握具合。

詳しくはいくつかの参考サイトをどうぞ

Googleは2014年6月にGoogle I/O conferenceにおいて、新しいUX(ユーザーエクスペリエンスデザイン)体系として、「マテリアルデザイン」を発表した。マテリアルデザインは、ユーザーが接する画面にマテリアル(物質)、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するもの

引用元:マテリアルデザイン(Wikipedia)

この記事は、マテリアルデザイン風に変更してすぐの考えなどを備忘録として残します。

自サイトのマテリアルデザイン化はSEO効果につながる

material-io

今なら、マテリアルデザインにすることだけで「SEO効果がある」と考えています。

マテリアルデザインが視覚や聴覚以外にも触覚にまでイメージの影響を与えられるからです。

見る人がストレスを感じないマテリアルデザイン

定められた厳格なルールに基づいて作られるのがマテリアルデザイン。

material-design-principles

Material Design - Introduction

  • Material is the metaphor
  • Bold, graphic, intentional
  • Motion provides meaning

物理的なリアル世界の動きと同じ感じだから、「見る人にストレスを与えない

なんというかGoogleの考え方からして、気持ちいいですね。

今風のSEOはユーザー目線が必要

どんなに良い内容でも、読みづらければページを読まない人は必ずいます。

僕です \( ^o^)/

その為、よくあるブログ記事で「文字の色や大きさ・文字間隔」などが読了率につながるとして書かれているサイトは多いです。さらには、Youtubeなど映像を駆使したコンテンツや、図解で分かりやすくするなど「視覚」「聴覚」へ訴える内容が今風のSEOになります。

しかしその対策だけで全員に伝わるでしょうか。

書き方の工夫・図解での解説だけでは全員に伝わらない

yotta
僕は次のように思うんです

検索結果の1ページ目トップは、誰でも情報が知れるページでなければならない

この時「誰でも」な点が重要で、「誰が読んでも」を意識する場合、文章や書き方だけでは全員に伝わるわけがなく、映像コンテンツなどの視覚・聴覚だけでも伝わりません。

その点でマテリアルデザインは「触覚イメージ (tactile)」を使います。それがストレスフリーでより万人に対応できる点だと思うのです。

ペルソナ m9(^Д^) プギャー

ようは「ペルソナ」だ何だって、書き手が対象のユーザーを絞っている限り1ページ目のトップには相応しくないわけです(クエリによるかも)

だから少なくともデザイン面は人間の本質に合わせるといいんじゃない?って。

  1. 文章・書き方、図解で「視覚」に訴え
  2. 映像コンテンツで「聴覚」にも語り掛ける
  3. マテリアルデザインが更に「触覚」をイメージさせる

余談:残るは「味覚」「嗅覚」ですね。
しずる感あふれる食べ物の写真・・以外は技術の進歩待ちなイメージ(いずれ IoT な世界になったらその辺もサイトと繋がって楽しめるんでしょうね)

マテリアルデザインがSEO効果がある理由をまとめる

まとめると、「マテリアルデザイン=人間にやさしい」

⇒「人間にやさしいサイト=良い数字にプラスとして繋がる」

こういうフワフワ感です。逃しているユーザーを減らせるかも!

言うて全然理解できていないからマテリアルデザイン"風"である

new-top今のサイトトップ(もうちょっと改造予定)

合ってるか分かりませんが、上記してきた僕なりの解釈・イメージでポチポチとCSS修正したのが今のトップページです。ルール言うわりには雰囲気いじりなので、パーツごとの高さだけ意識してみましたが、どうなんでしょう。

「動き」や「スペース感」など、そもそも過去デザイン流用しつつで色々無視してます。とにかく「影」を入れてみたのだよってことをカッコつけてマテリアルデザイン風!言うてるだけです。

影の入れ方などはすべて「サルワカさん」から

だからCSS分かる人はすぐにできるよ!
yotta

あとメニューの項目を削除してみました。

あるハズがないに対するストレスは思考停止

「リンクの色は青が良い」みたいなことはもう今は昔の話だと思っています。もっと人間の本質に合わせるのがマテリアルデザイン。

「本来ある物がない」は確実にストレスにつながると思いますが、果たしてメニューって必要なのか?って考えていたので、リンクの色パターンではないですが、メニューを取っ払いました。

ページ/セッションが2以下のブログですもの。

メニュー経由で無駄クリックより、直接次の記事へ結び付けた方が「2」以上の数字になるんじゃないかと。あとは数字で判断します。

このデザインが浸透したら

マテリアルデザインは、コレからもっと色々なサイトが適用していくかもです。

浸透したらどのサイトも同じようになるのでは?って疑問があるので、やるなら今でしょ!

現実世界のルールに沿ってるのですから枠を飛び出せないのは仕方なしです。その先へ突破するのはプロのデザイナーさんに任せて、僕らは時代に合わせて行けばいいんじゃ。

yotta
実の所、いろいろ変更したCSS動作を確認したかったが為の記事であった

(メモ:変更は2017年10月22日早朝)

というわけで、マテリアルデザイン風サイトをAFFINGERで作っていくシリーズを始めます。

-ブログ運営

関連記事とスポンサーリンク

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.