Blog

ホームページ制作を通常の3倍加速させる Material Design Lite

2015.07.10 | ホームページ制作 | 1167views


スクリーンショット 2015-07-10 11.08.20

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

Material Design Lite

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

http://www.getmdl.io/

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

スクリーンショット 2015-07-10 11.12.46

スクリーンショット 2015-07-10 11.13.52

スクリーンショット 2015-07-10 11.14.04

実際に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ぽいカードもこの通り。

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
<!-- 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>

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

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

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI