Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. シンプルで使いやすい!マテリアルデザインの優良リソース15選
  1. action
  2. URLをコピーしました

シンプルで使いやすい!マテリアルデザインの優良リソース15選

  • 2017年2月14日
  • ニュース

Google が2014年に発表した「マテリアルデザイン」。
もはやトレンドというよりも、モバイル アプリ デザインにおけるスタンダードになりつつあります。

マテリアルデザインの大きな人気の理由のひとつが、その操作性です。
Google が配布している アプリ のほとんどでマテリアルデザインが採用されていますが、どの UI も直感的で分かりやすく、操作しやすいのです。
そういうわけで、マテリアルデザインは2017年も引き続き多くの場面で見ていくことになるでしょう。

今回は、2017年のマテリアルデザインにも大活躍しそうな、使い勝手のよい優良リソースをご紹介していきます。
使えそうなものから試してみてください。

参考:
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選
Googleが推奨!マテリアルデザインの2016年のトレンドを学ぼう

マテリアルデザインの優良リソース15選

1. Material Design

1_materialdesign.jpeg https://material.io

マテリアルデザインの総合情報サイトです。
ガイドラインやリソース、制作に役立つ ツール などが紹介されています。

2. Material Design Guidelines

2_mdintroduction.jpeg https://material.io/guidelines/

マテリアルデザインの基本的な制作方針やルールについてまとめられています。
部品デザインだけでなく、アニメーションやオンボーディングについても、実はしっかりとした決まりがあります。
Google の基本的なデザインのガイドラインなので、まだ読んでいないひとは一読しておきましょう。

3. Material Palette

3_colorpalette.jpeg https://www.materialpalette.com

マテリアルデザインでよく使われる配色パターンをカラーパレットで紹介しています。
プライマリーカラーとアクセントカラーの2色を選ぶだけで、そのほか活用できる色もパレットとして提案してくれます。

4. Material Icons

4_icons.jpeg https://material.io/icons/

マテリアルデザインでよく使われるアイコンのセットです。
Webアイコンフォントとして使うことで、ホームページ上でも以下のように簡単にアイコンを表示することができます。

icon.png

5. Device Metrix

5_devicemetrix.jpeg https://material.io/devices/

マテリアルデザインはモバイル端末でも大活躍します。
そこで、こちらの ページ では、スクリーンサイズや縦横比、解像度などをデザインしやすいようにまとめています。

6. Material Design Colors

6_colorpatterns.jpeg https://material.io/guidelines/style/color.html

先ほどはマテリアルデザインの原色を中心としたカラーパレットをご紹介しましたが、こちらは各色別に濃淡まで掲載しています。
プライマリー・セカンダリー・アクセントカラーの選び方のガイドラインも掲載されています。

7. Material Design for Android

7_forandroid.jpeg https://developer.android.com/design/material/index.html

アンドロイド端末でのマテリアルデザインでの設計の注意点が掲載されています。
シャドウやクリッピング、ドローアブルなどの説明も記載されています。
アンドロイドでのマテリアルデザインに興味のある方は、一読しておきましょう。

8. Polymer Paper Elements

8_polymer.jpeg https://www.webcomponents.org/author/PolymerElements

Polymerとは、 JavaScript の UI フレームワーク で、Web Componentsをモダン ブラウザ 以外でも利用できるようにしたライブラリです。
Web Componentsとは今後Web標準になる予定の技術で、Web ページ で利用する各パーツをコンポーネント化し、 ページ を作成します。
パーツをコンポーネント化することで、何度でも簡単に再利用することができるようになります。

Polymer Paper Elementsは、Polymerを使ったマテリアルデザインの基盤となる UI フレームワーク 集で、Polymerを使ったことがあるひとなら簡単にマテリアルデザインを使ったWebアプリケーションを作ることができます。

9. Material Design Lite

9_designlite.jpeg https://getmdl.io

Material Design Liteはマテリアルデザインを簡単に実装することができるライブラリです。
CSS と JavaScript を読み込めば、あとは簡単なコーディングでマテリアルデザインを使ったホームページを作成することができます。

10. Angular Material

10_angularmaterial.jpeg https://material.angularjs.org/latest/

AngularJSを使ったマテリアルデザインの フレームワーク です。
JavaScript がベースとなっているので、オートコンプリートやデートピッカーなど、動的な UI コンポーネントを作成することもできます。

11. Materialize

11_materialize.jpeg http://materializecss.com

こちらも CSS と JavaScript を使った UI フレームワーク です。
サードパーティからSassファイルが提供されており、関数を組んでコンパイルを行うこともできます。
また、ドラッグアウトメニュー(左からスワイプして出すメニュー)やトースト(ボタンを押すと下から出てくるメッセージ)などユニークな UI もそろっています。

12. Random Material Generator

12_randomgenerator.jpeg https://codecrafted.net/randommaterial/

こちらもいわゆるカラーパレットですが、プライマリー・セカンダリー・アクセントの各カラーを選ぶと、コピー&ペースト用のコードを自動生成してくれます。
配色はリアルタイムプレビューで確認することもできるので、直感的に配色を選ぶことができます。

13. MProgress

13_mprogress.jpeg http://lightningtgc.github.io/MProgress.js/

マテリアルデザイン風のプログレスバーを実装するための フレームワーク です。
ページ 内部だけでなく、 ページ 上部にくっつけることもできます。

14. Material Design Iconic Font

14_iconicfont.jpeg http://zavoloklom.github.io/material-design-iconic-font/

マテリアルデザイン用のアイコンをはじめからWeb フォント 化したパッケージです。
さまざまな種類のアイコンが777種類用意されています。
Font Awesomeを使ったことのあるひとには馴染みやすいかもしれません。

15. Material Design for Bootstrap

15_mdbootstrap.jpeg http://mdbootstrap.com/material-design-for-bootstrap/

Bootstrapをベースにマテリアルデザイン用に改変・拡張した フレームワーク です。
Flexboxも同梱されていてレスポンシブ対応がしやすいです。
非常に簡単にマテリアルデザイン調のかっこいいサイトを構築できます。

まとめ

以上、マテリアルデザインで使える、さまざまな優良リソースをご紹介しました。

マテリアルデザインは、見た目の美しさだけではなく ユーザー の使い勝手まで意識されたデザインです。

とりわけ フレームワーク やライブラリは、1つ採用するだけでデザインの効率が劇的に上がるので、ぜひ使ってみてください。

関連記事

  • マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 
  • 五感を刺激する!2017年注目のWebデザインアイデア10選
  • ノンデザイナーでも簡単!オリジナルキャラクター制作ができる最新無料アプリ&サイト39選
  • こんなにあるの!?空きスペースを活用したサービス50選
  • 【全て無料】業務効率・生産性を向上させる!国内外のオンラインクラウドサービス60選

関連記事

  • マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 
  • 五感を刺激する!2017年注目のWebデザインアイデア10選
  • ノンデザイナーでも簡単!オリジナルキャラクター制作ができる最新無料アプリ&サイト39選
  • こんなにあるの!?空きスペースを活用したサービス50選

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

酒井 涼

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
  
>> 執筆記事一覧はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

SFAの導入"失敗"事例とその理由

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

SaaSの意味とは?何ができる?有名ツールも紹介

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

現会員425,321人

ログインはこちら

おすすめ記事

マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 

五感を刺激する!2017年注目のWebデザインアイデア10選

ノンデザイナーでも簡単!オリジナルキャラクター制作ができる最新無料アプリ&サイト39選

こんなにあるの!?空きスペースを活用したサービス50選

【全て無料】業務効率・生産性を向上させる!国内外のオンラインクラウドサービス60選

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら