Liruu Design

このサイトは、Googleマテリアルデザインを組み込んだフレームワーク「Materialize」を使ったLiruu Designのデモサイトです。本家サイトではございません。詳細はブログをお読みください。

ブログを読む
liruu
「Materialize」は、Bootstrapライクなフレームワークなので、導入しやすくWordpressやHPリニューアルにも持ってこい！！

Materialize導入の「いいところ」

サイト構築がラク

マテリアルデザインを組込んだフレームワーク「Materialize」は、簡単にかつ優秀なアニメーションやトランジションも用意されています！

Button-01

ユーザーエクスペリ

マテリアルデザインを基礎に作成したコンポーネントは、すべてのプラットフォーム間で統一されたユーザーエクスペリエンスを可能にします！

使い方の説明も充実

「Materialize」を使うのに役立つドキュメントの他に、テンプレートのダウンロードやコード例も紹介しています。しかも見やすさワンダフル！！

Button-03

いろいろ充実！

freephoto

マテリアルデザイン実装

グリットレイアウトで設置でき、カラーパレットやボタンにシャドーを付けられたり、ホバーアニメーションも充実しています！
とはいえ、Bootstrapと比較するとカワイイもんですが、本家サイト自体も見やすくて、Bootstrapより目当てを見つけ易いのがありがたいところ！

【Button】メインスタイル
メインスタイル
標準ボタン 円形 フラットボタン
クリックアニメーション他
暗いウェーブ 明るいウェーブ 大きいサイズ シャドー付きボタン
freephoto
Googleライクなカード
Googleライクなカード

Googleアプリで見たことあるかたもいると思いますが、少し邪魔だったカードです。もちろん、あの時よりは全然こっちの方がいい！ただ果たして使いこなせてないユーザーが理解できるかどうか・・・心配ではありますが・・・・↓

　プリローディング

　フォームのアニメーションも可愛らしい！

JSコンポもめちゃんこ充実！

【Collapsible】がスムーズ！
  • まずは

    ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキスト

  • 次に

    ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキスト

  • 最後に

    ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキスト

【Toast】が便利！
Hover me!
上のボタンにカーソルを合わせると、ツールチップが出てきます！ガイドラインでは「Snackbars & toasts」と呼ばれているものです！

【Slider】もありがたい！
  • サンプル
  • サンプル

    スライダーも簡単実装！！

    動きもスムーズで、キャプション付き！！
  • サンプル

    アニメーションも！！！

    キャプションアニメーションは嬉しい！
他にもいろいろもあるよ！

クリックすると波紋のように広がるアニメーション

Wave

たまに中途半端なところにバーがおりますが、タブメニューもご覧のとおり！

タブメニュー01のBodyです！！
タブメニュー02のBodyです！！
タブメニュー03のBodyです！！

アイコンがめちゃんこ充実！

ナビゲーションや受話器関連のアイコンだけでも、こんなに用意されています！
なかには、茶目っ気のあるアイコンもあるので、超重宝っっ

さぁはじめよう！

freephoto