【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

マテリアルデザインのガイドラインと基本的な実装

マテリアルデザインのガイドラインと基本的な実装

こんにちは 開発部山田です。

みなさんはGoogleやAppleがデザインのガイドラインを公表していることをご存知ですか?

普段何気なく使用しているiPhoneやAndoroidは、そのボタンやアイコン、画面のレイアウトにさえも何らかのコンセプトに沿って作られています。今回はGoogleが2014年に公表したデザインガイドラインの中から「マテリアルデザイン」と呼ばれるコンセプトの概要と、みなさんのサイトに導入するための方法についての紹介です。

マテリアルデザインの概念

ここで2つのボタンを比較してみましょう。

##①フラットデザインのボタン
1609_mdl_01

##②MDLのボタン(立体的なボタン)
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-30-18-17-41

①のボタンと②のボタンで受ける印象はいかがでしょうか?

個人的な見解ですが、
もしWebサイトをスクロールしている途中で①のボタンが出てきたら、
背景に溶け込んでいて、押してみたい情動はあまり湧いてこないかなと思いました。

例えば、現実の世界にこの様な「ボタン」という物質を置いたならば、

ボタンには(厚み)があり、
厚みがあるなら(影)があり、

またボタンを押した時には何らかの「反応」があるはずです。

この様に、現実の世界にある物質と同じような感覚をユーザーに意識してもらうために設計されたのがマテリアルデザインなのです。

マテリアルデザインを導入してみる

導入の方法は幾つか有り、以下3つが主な導入方法になります。

  1. Google APIのリンクを設置して読み込む ← 【おすすめ】
  2. MDL(Material Design Lite)のサイトからファイルをダウンロードする
  3. GitHubからソースコードを取得する

今回は軽量かつお手頃な「Google APIのリンクを設置して読み込む」の方法で紹介します。

前準備

内に下記のコードを挿入するだけです。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>

ボタンの設置

クリックやタップをしてみてください。アクションに対しての反応が返ってくるはずです。



コードはこちら

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>

動く…動くぞ…
どうです..割りと簡単に動いて驚いているでしょう..

どんどんいきます!

テキストエリア




Input is not a number!

入力エリアのタップした際に、”TEXT” の文字が浮遊してエリア上部に残る動きが良いですね

使っている人が操作したことに対して、ちゃんと動きで「返事(フィードバックやインタラクション)」をするというのがマテリアルデザインの根底にあり、MDLのライブラリにはさまざまな動きが含まれています。

(前述のボタンを押した際にボタンが一瞬光るのもそのためです。)

あと1つくらいいきましょう…

メニュー

クリックすると収められているメニューが展開されます。


  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action

という風に専用のcss,jsを読み込み、あとは少しのhtmlコードを記述するだけでサイト内に動きのあるUIを導入可能です。

さらにMDLにはモーダルの機能やタブ切り替えの機能など秀逸なUIがまだまだありますので、

これらの実装も追って紹介していければなと思います。

以上、山田でした!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+