ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > Web Design LibraryのマテリアルスタイルのWebテンプレート

Web Design LibraryのマテリアルスタイルのWebテンプレート

投稿日:2015年08月21日

このチュートリアルでは、マテリアルスタイルのWebテンプレートをご紹介します。

Step1:はじめに

もしあなたがウェブデザイン業界にいるのであれば(この記事を読んでいるということは、おそらくそうなのでしょうが)、業界のこの最新の流行を見逃さなかったはずです。Googleのマテリアルデザインです。Googleトレンドを見てください。この表がマテリアルデザインの人気の高さを示していると思います。

Googleのマテリアルデザイン

私達も見逃しませんでした。それでは、マテリアルデザインのウェブテンプレートをご紹介します。



Step2:Googleデザインの構想

簡単に言うと、マテリアルデザインは科学技術の規範と伝統的なデザインの原理や共通ルールを組み合わせ、さらに改良したデザインのコンセプトです。(もう既にただのコンセプトでは無くなり、ガイドブックまであります)

このコンセプトが生まれた背景には、Googleの様々なプラットフォームでのユーザーエクスペリエンスを統一したいという思いがありました。まず最初にGoogle+のアプリのインターフェイスがあり、GメールやカレンダーといったGoogleの主要プロダクトの再デザインがあり、『合理的な余白と動きを用いた統一理論』とGoogleが呼ぶ考えに基づいて、作成されました。

新しいGoogleのデザインは大好評でしたが、中には見慣れたフラットスタイルと大差ないという人もいます。実際にはこれら2つには違いがありますが、基本的なことです。Googleはスキューモーフィズム(現実の動きや反射)の特徴とフラットデザインのミニマリズムを融合させ、素晴らしい結果を生み出しました。





Step3:マテリアルデザインの主な原理について

予期しなかった生き生きとした色

マテリアルスタイルのカラーパレットは私達の周りにある現実世界のものからアイデアを得ています。例えば、建築、運動競技場、路面表示といったものです。深い影、大胆な色相、鮮やかなハイライトなどが採用されています。

予期しなかった生き生きとした色

大胆で幾何学的な形

マテリアルでは形をシンプルで大胆なもの、シンメトリカルで一貫性のあるものに統一し、Googleの言葉で言えば、それらは『触感や物質の物理的品質にヒントを得た』とのことです。

大胆で幾何学的な形

生き生きとして大胆で興味をそそるイメージ

画像は喜びやコンテンツとの関連性、情報を表現するものでなくてはなりません。全ての写真やイラストはコンテンツとの関連がある必要があります。

生き生きとして大胆で興味をそそるイメージ

大型でボールド体のタイポグラフィ

Googleは引き続き、RobotoとNotoを標準書体として使用しています。あなたがどのようなマテリアルデザインのアプリを作る際にも、書体は読みやすく、大きくてダイナミックなものでなくてはなりません。

大型でボールド体のタイポグラフィ

一貫性

マテリアルデザインではタイポグラフィ、グリッド、スペース、縮尺、色、画像といった印刷ベースの要素がガイドとなり、階層や意味、フォーカスを生み出し、ユーザーを引き付けます。

Googleによると、視覚要素や構造、スペースを繰り返し用いることによって一貫性が生まれ、より良いユーザーエクスペリエンスへと導きます。特に、プラットフォームやスクリーンサイズ、環境といった枠を超えて一貫性を保てば、ユーザーエクスペリエンスはさらに良いものとなります。

現代のウェブデザインの最大の流行をご自身の手で試してみたければ、Androidやウェブのアプリ作成の手助けとなるガイドラインやルール、さらにはツールをGoogleがリリースをしています。

役に立つと思われるリンク
Material Design Icons
Material Design UI Kit


Step4:私達のストアにある新しいマテリアルデザインのテンプレート

私達のデザイナーは既にガイドの熟読を始めています。ここに集めたものは、彼らがGoogleデザインのアプローチを実現した最初の作品集です。

Web Design Storage WordPress Theme
Web Design Storage WordPress Theme

Travel WordPress Theme
Web Design Storage WordPress Theme

Travel WordPress Theme
Tools Store VirtueMart Template

Hotels Landing Page Template
Hotels Landing Page Template

Dating Landing Page Template
Dating Landing Page Template

マテリアルテンプレートはこれからも増える予定なので、どうぞご期待ください。



引用:Web Design Library 著者:AliceL 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング