Googleが公開を始めた公式フレームワーク「Material Design Lite」がヤバイわけです。CSSならBootstrap、WordpressならBONE、PythonならDjangoなどなどフレームワークといえるものは数多くありますが、Google謹製ということで興味津々。素材やテンプレートをガンガンダウンロードできる仕様になっていますのでご紹介いたします。

Material Design Lite

サイト制作をより効率的に

http://www.getmdl.io/

まずはテンプレートを見て行きましょう。

実際にMaterial Design Liteのサイトでプレビューを見るとよく分かるのですが、そのまま画像やテキスト置き換えだけで即使えるイメージになってますね。A/BテストやLP制作などにも充分使えると思います。もちろんレスポンシブデザイン。

コンポーネント

例えばローディングイメージなどもご覧のとおり。

これだけのソースで動いています。

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate progress-demo"></div>

いかにもGoogleぽいカードもこの通り。

<!-- Square card -->
<style>
  .demo-card-square.mdl-card {
    width: 320px;
    height: 320px;
  }
  .demo-card-square > .mdl-card__title {
    color: #fff;
    background:
      url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
  }
</style>

<div class="mdl-card mdl-shadow--2dp demo-card-square">
  <div class="mdl-card__title mdl-card--expand">
    <p class="mdl-card__title-text">Update</p>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
    </a>
  </div>
</div>

プログラミングなどでは「車輪の再発明は無駄だ」とよく言われますが、サイト制作でも同じことが言えるでしょう。ローディングイメージはわずかに５行。たったこれだけで完成してしまいます。一昔前はお問い合わせフォーム制作をPHPで作っただけで５万円もの金額を請求される時代でしたが、いまでは誰でも簡単にソースの中身など知らなくても出来てしまいます。

このような技術の革新がサイト制作そのものにも来ているわけですね。