アーカイブ : 2020年11月11日

話題のマテリアルデザインって何!?

お世話になっております。ダブルループの福田です。

目を惹くwebサイトの条件の1つにデザインがあります。
デザインは時代によって流行が変わっていきます。

そんな中、今のトレンドは「マテリアルデザイン」です。

ということで今回はマテリアルデザインについて紹介します。

話題のマテリアルデザインって何!?

マテリアルデザインは2014年にGoogleが発表した新たなデザインの概念のこと
です。

マテリアル=物質的ということからデザインする対象のwebパーツを物質として考えて、我々の現実世界の物理的構造ルールに基づいてそのwebパーツをデザインすれば、より直感的にユーザーが操作できる

という概念です。

この説明では「?」の方が多いことかと思います。かくいう私も自分で書いてお
いて「?」です^^;

わかりやすく、身近で具体的な例を挙げるなら

・GoogleディスカバーなどGoogleの各種アプリ内の表示方法
・Android端末のUI

これらをご覧いただくことが最も早いかと思います。

ではなぜマテリアルデザインが人気なのか、を解説する前にマテリアルデザイン
に至るまでのデザインの歴史について解説してみます。

現在までのデザインの大まかな流れは

スキューモーフィズム

フラットデザイン

マテリアルデザイン

となります。

まずスキューモーフィズムについて。
これは2000~2010年頃に流行ったデザインです。

マテリアルデザイン同様、デザインなので説明しづらいのですが、スキューモー
フィズムは我々の現実世界に存在するリアルさを表現したデザインのことです。

少し昔にリアルなON/OFFのスイッチなどがwebやアプリで流行りました。
これはまさにスキューモーフィズムデザインと言えるでしょう。

具体的な例を挙げるならばiOS6(2012年迄)までのiPhoneのUIがスキューモー
フィズムを採用しています。

続いてフラットデザイン。
iPhoneの例を挙げるならばiOS7がこれにあたり、さらにはAppleの公式サイトはフラットデザインで作られています。

また最近のWindowsのメニュー画面もフラットデザインです。

フラットという名の通り2次元的なデザインです。一言でいうならばシンプルに
最小限でこちらの意図を伝えるデザイン、それがフラットデザインです。

そして今日においてはフラットデザインからマテリアルデザインへと進みました。

パッと見る限りフラットデザインとマテリアルデザインでは大差がありません。
では何が異なるのか、というよりもマテリアルデザインの特徴を述べて参ります。

・影

2次元なデザインのフラットデザインに比べて3次元表現になるマテリアルデザインには影があることが特徴と言えます。
たとえば写真をいくつか並べたwebサイトにて、その中の1つをクリックすると
背景が暗くなり、選んだ写真がくっきりと見やすくなる、というのはまさにマテ リアルデザインです。この細かな動きにより、ユーザーは数ある写真からその1つを選択したということが理解できるはずです。

・モーション(アニメーション)

ボタンなどタップした際に動きを多く持たせているのがマテリアルデザインの特徴の1つです。これにはユーザーが操作を感覚的に行えるようサポートする意味合いが含まれています。

・画面構成(レイアウト)

上に挙げた影と内容が被りますが、影を使って奥行きを持たせwebサイトを構成
するパーツの動作状態を表現することはマテリアルデザインと言えます。
これによりユーザーの視覚的理解を促します。

さて、今回はデザインに関して解説しましたが、いかがでしたでしょうか。
デザインもコンテンツも結局はユーザー(検索者)のためです。
検索して自社のサイトにたどり着いてくれた方にとって、見やすいサイトの方が
当然良いはずです。

今回ご紹介したマテリアルデザインはそんな見やすいサイトにするためのヒント
です。皆さんのサイトを見直す際にどうぞお役立てください。

弊社サービス紹介

■いつでも自分でページを作成できる「WordPress付き!ホームページ制作」
 https://www.doubleloop.co.jp/business/solution/hp/wp/

■SNS活用で集客倍増!?「facebookページ制作」
 https://www.doubleloop.co.jp/business/solution/facebook/

■ターゲットを絞って効率的に集客「facebook広告運用代行」
 https://www.doubleloop.co.jp/business/solution/facebook/adsupport/

■被リンクに頼らず検索上位へ!「ホワイトハットSEOサービス」
https://www.doubleloop.co.jp/business/solution/seo/

WordPressにおけるサイバー攻撃への備え

お世話になっております。

ダブルループの福田です。

 

最近、弊社のクライアントにてMicrosoftを謳った音声警告がPCが流れてきて、

とても焦ったという報告がありました。

 

近年になってサイバー攻撃はあの手この手で

PC、ネットをアタックしてきています。

 

攻撃を未然に防ぐためには、その危険性と手口を理解することが大切です。

ということで、今回はWordPressのサイバー攻撃について考えてみました。

 

WordPressにおけるサイバー攻撃への備え

今年2月に「Wordpressで深刻な脆弱性が見つかった」

というニュースがありました。

※こちらに関しては下記にて詳しく書いています。

コラム:WordPressに重大な脆弱性が見つかったと発表

 

WordPressを代表としたCMSでは、

このような脆弱性をターゲットとしたサイバー攻撃を仕掛けられることが

少なくありません。

 

今回はサイバー攻撃の主な内容と対策について(一部ではありますが)

書いていきます。

Wordpressにおけるサイバー攻撃への備えならダブルループ

まず、Wordpressのサイバー攻撃は大きく2つに分類できます。

 

1.Wordpress自体の脆弱性を狙ったもの

2.Wordpressのプラグインの脆弱性を狙ったもの

 

1については上述した通り、

WordPressなどCMSがバージョンアップした際に、

プログラムの検証が不十分のため「穴」が存在してしまい、

それに伴い、攻撃を仕掛けられてしまうという内容です。

 

具体的にはサイト内のコンテンツが改ざんされるということが

この2月には多くのwebサイトで見られました。

 

WordPress自体の脆弱性を突いたサイバー攻撃への対策としては、

WordPressも早急な対応を施すので、

対応を施したバージョンへとアップデートすることが

最大の対処と言えるでしょう。

 

次に2について。

ご存知の通り、Wordpressの魅力の1つは

プラグインツールを利用できることにあります。

 

プラグインツールを利用することで、

簡単にwebサイトが構築できるようになるからです。

 

そしてこのプラグインツールもWordpressのバージョンアップや

世の技術革新に伴い、アップデートされていきます。

 

そのアップデートの過程の中で

プラグインツールのプログラム内に「穴」が出来てしまうのです。

 

たとえば近年だとWP Job ManagerやWP Mobile Detectorで脆弱性が見つかり、

サイバー攻撃を受けた例があります。

 

2のサイバー攻撃も1と同様、

対象プラグインツールのアップデートにより対処が可能です。

Wordpressにおけるサイバー攻撃への備えならダブルループ

WordPressは簡単にwebサイトを構築できる一方、

プラグインが多数あるため、

プラグインに脆弱性が含まれている場合が多いことを

理解しておく必要があります。

 

もしwebサイトの制作・運営をweb制作会社に委託している場合には、

委託先企業が定期的にバージョンアップを実施していることや、

脆弱性に関するレポートを定期提出してくれていることが

1つのリスクマネジメント指標と言えるでしょう。

 

自社でサイト運営している場合は、サイバー攻撃の対象とならないためには、

日ごろから最新バージョンへアップデートしておくこと、

そしてアップデートの際に脆弱性が見つかったバージョンではないかと

慎重を期することが重要です。

 

 

パートナー

ご相談や質問・ご不明な点はお気軽にコチラから