人気HTMLフレームワークのひとつ Bootstrap は、使いやすく多くのデベロッパーが利用しています。ただし、多くのユーザーが利用していることもあり、Bootstrapフレームワークを利用して作成したウェブページは、どれも同じようなデザインになりがちという問題点も。

今回ご紹介する Material Kit PRO は、Google のマテリアルデザインにインスパイアされた、新しいタイプの Bootstrap UI キットです。あらかじめ用意された美しいコンポーネントを組み替えることで、マテリアルデザインをコンセプトにしたHTMLページを手軽に作成できます。これならデザインが他とかぶることもなく、トレンドUIデザインを手軽に表現することができます。


今回は、Creative Tim様のご好意で、クライアント案件などあらゆる商用プロジェクトにも対応できる Material Kit Pro デベロッパー・エディション($599 およそ66,000円相当)を、5名様にプレゼントします。

プレゼントの応募について
apps

豊富なコンポーネント

デザイン制作に必要な要素がコンポーネント化されています。すべてのコンポーネントは他とも完璧にフィットし、配色バリエーションを変更可能です。

view_day

マルチユース対応のレイアウト

コンポーネントを組み合わせたレイアウトサンプルを並べるだけで、思い通りのHTMLページを作成できます。チームへのプレゼンテーションや金額表など、簡単にカスタマイズでき、自分だけのHTMLページを作成できます。

view_carousel

サンプル用レイアウト

あらかじめコンポーネントを組んだ、サンプル用レイアウトを利用することで、すぐにデザイン開発をはじめることができます。

ベーシック・コンポーネント

ウェブサイトの核となるデザイン要素
人気のHTMLフレームワーク Bootstrap を利用しているので、慣れているBootstrap のクラス名を利用しながら、マテリアルデザインの新しい見た目で表現できます。また、追加で用意されたスタイリング用クラスを利用すれば、よりクリエイティブなデザインを作成することが可能。

クリエイティブなカード型レイアウト

ひとつのカードレイアウトですべての問題を解決
現在さまざまなサイトで利用されているカード型レイアウト。情報をすっきりと整理することができ、ブログ投稿一覧や商品カード、ユーザーのプロフィール欄など使い方もアイデア次第。どのカードレイアウトも、マテリアルデザインのコンセプトを意識しており、目立つデザインに仕上げることができます。

コンテンツエリア

細かいニーズに答える特別仕様
テーブルやコメント、商品説明エリア、タブなどユニークなデザイン要素にも対応しています。いくつかの利用ケースを想定した美しいデザインを使って、使いやすいウェブページを作成できます。

コピペ可能なサンプルレイアウト

ウェブページの項目ごとにデザインできるサンプル用レイアウトを活用しましょう。お好みの項目をコピペで並び替えるだけで、簡単にウェブページを作成できます。項目はヘッダーからフッターまで全て揃い、プロジェクトにあったレイアウトを表現できます。
すべての項目を確認する

参考レイアウト

あらかじめ作成された参考レイアウトを利用すれば、すぐにページ作成を開始できます。ランディングページからブログページ、ショッピングページなどが揃います。クライアントにプロトタイプを提案するときにも利用できる頼もしい味方です。

About Us

Landing Page

Contact Us

Blog Post

Product Page

Login Page

Pricing Page

Signup Page

Profile Page

Blog Posts

無料デモバージョン配付中

実際にこのキットがどのように利用できるのか、購入前にデモバージョンを試すことができます。このデモバージョンには、基本となるコンポーネントが揃っているので、見た目だけでなくコードの扱いやすさも体感できます。無料デモバージョンはGitHubよりどうぞ。
GifHub でデモ版を確認する

無料デモ版

  • 60 種類
  • 3 サンプル用ページ
  • close 特別カードレイアウト
  • close セクション項目
  • close プロトタイプ用PSDファイル
  • close プレミアムサポート

PRO版

  • 1000+  種類
  • 10 サンプルページ
  • check 特別カードレイアウト
  • check セクション項目
  • check プロトタイプ用PSDファイル
  • check プレミアムサポート

ウェブ制作をもっと手軽に。

format_bold

Bootstrap グリッド採用

Material Kit Proは、12カラムをベースとした、人気のBootstrap グリッドレイアウトを採用しているので、コーディングも楽々。

phonelink

レスポンシブ対応

Bootstrap フレームワークはモバイルファースのコンセプトで、あらゆる端末で美しく表示されるレスポンシブ対応です。スクリーン画面サイズに合わせて、レイアウトが自動で切り替わります。

access_time

制作スピードアップ

Material Kit Pro を利用すれば、制作時間を大幅に短縮することができます。Bootstrapをカスタマイズせずに、美しく使いやすいデザインを完成させます。

attach_money

コスト節約

デザイナーにゼロからデザインを依頼するとコストも気になるところ。このキットを利用すれば、比較的お求めやすい価格で、開発環境を整えることができます。

8,700ユーザー以上の実績

このUIキットは、91,500人以上のウェブデベロッパーに利用されており、142,000を超えるウェブプロジェクトに活用されています。

プレゼントの応募について

今回は、Creative Tim様のご好意で、クライアント案件などあらゆる商用プロジェクトにも対応できるMaterial Kit Pro デベロッパー・エディション($599 およそ66,000円相当)を、5名様にプレゼントします。

ステップ1 当選者の方にはDMにてお知らせ致しますので、まず当サイト公式Twitterアカウント@photoshopvipをフォローしてください。

ステップ2 以下の文章をコピーしてツイートすれば完了です。

プレゼント応募期間と発表について

日本時間2017年3月31日24:00までとなっています。

応募締め切り後、当サイトTwitterアカウント@photoshopvipより当選者の方にDMを差し上げます。当日中に連絡・当選の確認が取れない方は当選を無効とさせていただきます。

では、みなさまのご応募お待ちしております。