Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
マテリアルデザイン#3 Card, Chips, Tabs - Qiita
マテリアルデザインのコンポーネントのうち、 Card Chips Tabs の３つについて簡単にまとめる。 各コンポーネントがどういう目的で使われ、利用するときに気をつけるべきことはなにかを理解するためのメモ。 デザイナーさんが上げてきたデザインがマテリアルデザイン的に正しいかをチェックできるくらいの基礎知識を身につけることが目的。 カードは固有の関連する情報をまとめた一枚の紙であり、写真、テキスト、単一の対象へのリンクなどで構成される。 カードは、より複雑で詳細な情報への エントリーポイントとして用いられることが多い。 カードは一定の幅と様々な高さを持つ。 カードはフリップして背後に情報を表示するといったことはできない。 Fig 1. カードの利用例 使い方 カードは 異なるタイプのオブジェクトから構成されるコンテンツを表示するのに便利な手段である。 また、似たようなオブジェクトでも、
マテリアルデザイン#2 Subheaders, Switches, Snackbars & toasts - Qiita
マテリアルデザイン#2 Subheaders, Switches, Snackbars & toastsAndroid マテリアルデザインのコンポーネントのうち、 Subheaders Switches Snackbars & toasts の３つについて簡単にまとめる。 各コンポーネントがどういう目的で使われ、利用するときに気をつけるべきことはなにかを理解するためのメモ。 デザイナーさんが上げてきたデザインがマテリアルデザイン的に正しいかをチェックできるくらいの基礎知識を身につけることが目的。 サブヘッダー（Subheaders）は、リストやグリッドで表示されているコンテンツをいくつかのセクションに分けるために利用される特別なタイルである。 主にリスト、グリッド、メニューの３パターンに分類される。 また、スクロールした時にサブヘッダーは画面の上側に固定される。 さらにスクロールして次のサ
マテリアルデザイン#1 Menus, Dialog, Pickers - Qiita
マテリアルデザインのコンポーネントのうち、 Menus Dialog Pickers の３つについて簡単にまとめる。 各コンポーネントがどういう目的で使われ、利用するときに気をつけるべきことはなにかを理解するためのメモ。 デザイナーさんが上げてきたデザインがマテリアルデザイン的に正しいかをチェックできるための基礎知識を身につけることが目的。 複数のアイテムのリストを一時的に表示するマテリアル。 使い方 Menusはボタンを押すなどのアクションを行った時に一時的に表示され、ユーザーがMenusの持つ複数のアイテムからどれかを選択することを促す。 あくまでオプション的な選択肢の提供に用いるコンポーネントであり、アプリ内での重要度の高いものに利用すべきではない。 アプリ内の主要なナビゲーションには用いるべきではない。 ラベルは出来る限り単語か短いフレーズで簡潔に。 画面に入りきらない場合は内部で
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Designが解決するAndroidのデザイン的課題 (1/2)