マテリアルデザインを参考にホームページをリニューアル 千葉県の方へ

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像1

マテリアルデザイン

Webデザインのトレンドともいえるマテリアルデザインを参考にPCREPAIRのホームページを新しくしてみました。マテリアルデザインって何?ってところから調べなおして取り入れられる要素としてグラデーションカラーとレイヤーを取り入れて、作ってみました。文字が浮き出ているというか、文字の後ろに画像があるように見えていたらうれしいです。画像だけでなくサイト全体が立体的に見えるように後述させて頂くフローティングアクションボタンの設置も検討したのですが、今のところはつけていません。

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像1

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像25

マテリアルデザインって何だろう?ということの前に、Webデザインの経緯から入ります。ひと昔前はFlashを使った動画がドーンとでてくるサイトが多かったですね。7年くらい前までですかね?5年くらい前にはほぼ見なくなっていたんですけど。デザインとしてはすごく綺麗でカッコよかったです。こういうサイト作りたいな。作れたらいいなと見ていました。ただ、その頃からスマートフォンがどんどん普及していました。Flashで動画がドーンとでてくるページは、容量が大きくてスマートフォンだと読み込むまでに時間がかかってしまうんですね。その頃まだ3Gのスマートフォンもたくさんありましたし(2012年から4Gが始まりました)、サイトを開くと下のテキストだけ先に読み込んで動画の部分だけクルクルしているというサイトを度々見た記憶があります。

そんなこともあり、セキュリティのこともあり、だんだんとFlashが使われなくなっていきました。

そうすると今度、画像のみのフラット(平面的)で動きのないサイトがたくさん増えました。それが今ですね。

そこにGoogleが推奨し始めたのがマテリアルデザインですね。マテリアルデザインは配色や影やアニメーションを組み合わせて、立体的に魅せインタラクティブな動き表現したデザインですね。インタラクティブというのは双方的ということで、一方的にアニメーションが動作するのではなく、見ている方の操作に合わせて動きが起きるというものです。例として、ボタンをタップしたら他のボタンがいくつも展開するというのがあります。

そんなことを考えながら、こういった要素を取り入れられるだけ取り入れてみました。
記事の初めに書かせて頂いたフローティングアクションボタンの設置も考えました。下の画像がフローティングアクションボタンです。

フローティングアクションボタンの画像

このフローティングアクションボタンを設置することにより、画像だけでなくサイト全体が立体的に見えるなと思い実装しようか考えたのですが、スマホで見た時に邪魔にならないかな・・・とか考えて今のところつけていません。アプリに求めているものとWebサイトに求めているものってまた違うだろうなとか、自分のサイトにフローティングアクションボタンはあった方がいいのかどうかなどを考えて、今のところはつけていません。今後また検討してみます。

⇓今回、マテリアルデザインの参考にしたサイトはこちらです

ユーザビリティに配慮したカラー設計のマテリアルデザインが最近のトレンド?