【要注意】Chromeが"www"サブドメインを自動的に隠すようになった模様 | ソフトアンテナブログ

2018/09/07 280 users サブドメイン Chromium Chrome 要注意 模様

Googleは先日Chromeの最新版である「Chrome 69」をリリースしました。Chrome 69には、マテリアルデザインの導入や新しいパスワードパネージャーの追加など、Chrome 10周年を記念するのにふさわしいさまざまな新機能が追加されていますが、中には気をつけないと行けない変更も含まれているようです。 例えば今回Chromium... 続きを読む

魅力的なマテリアルデザインのコードスニペット10選 | UX MILK

2018/08/31 82 users UX MILK

JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 U... 続きを読む

ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素 - WPJ

2017/10/17 73 users マイクロソフト 堅牢 実装 既存 統一

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleの Material Design（マテリアルデザイン） など既存の言語を実装して、統一のとれた堅牢な... 続きを読む

GoogleカレンダーのWeb版がデザインを一新 | TechCrunch Japan

2017/10/18 93 users 一新 TechCrunch JAPAN ウインドウサイズ

事実上同じデザインを数年間続けていたGoogleカレンダーが 今日大きく模様替えした 。真新しいカラーパレットとGoogleのマテリアルデザインにマッチしたデザインスキーム、そして ―― もっと重要なのは ―― ブラウザーのウィンドウサイズに応じて自動調整されるレスポンシブ・レイアウトになったことだ。 このアップデートは単にペンキを塗り替えただけでなく、サービスを少しでも使いやすくするための機能改... 続きを読む

マテリアルデザインの概念を受け継いだ、マテリアルデザインライトとは | UX MILK

2017/10/16 97 users 概念 UX MILK UXPin Brafton Jerry

JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 今年のデザインのトレンドが、マテリアルデザインの表現であることは、間違いありません。 GoogleのAndroidをベースにしたデザイン手法であるマテリアルデザインは、当初モバイル端末向けのインターフェイスとしてスター... 続きを読む

コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ - PhotoshopVIP

2017/07/14 78 users PhotoshopVIP ナビゲーションメニュー HTML

Googleが2014年に提唱したデザインガイド「 マテリアルデザイン 」。 最近の新しいウェブサイト でも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー＆ペーストで手軽に マテリアルデザインを再現できるHTML/CSSスニペット をまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型... 続きを読む

「Google Chrome 59」が正式版に 〜ヘッドレスモード、APNG、フルページ撮影に対応 - 窓の杜

2017/06/06 55 users ヘッドレスモード 樽井 APNG 刷新 Webブラウザー

ニュース 「Google Chrome 59」が正式版に 〜ヘッドレスモード、APNG、フルページ撮影に対応 設定画面をマテリアルデザインへ刷新。30件の脆弱性修正も 樽井 秀人 2017年6月6日 08:56 「Google Chrome」v59.0.3071.86 設定画面をマテリアルデザインへ刷新 　米Google Inc.は5日（現地時間）、Webブラウザー「Google Chrome」の... 続きを読む

マテリアルデザインでやってはいけない72のこと（間違いチェックリスト）

2017/04/24 243 users 目次 ガイドライン チェックリスト ルール Google

マテリアルデザインでは、Googleにより 作り方のガイドライン がしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを72個、淡々と紹介していきます。 WEB制作、アプリ制作時のチェックリストとしてご活用ください。 この記事の目次 重要なルール カード ボタン フローティング操作ボタン 色の使... 続きを読む

Googleが提唱する「マテリアルデザイン」の普及をフォローするカラーツールが登場 - GIGAZINE

2017/04/07 76 users デバイス 提唱 Color Tool カラーパレット 声かけ

Googleでは2014年から新しいUX体系として、デバイスの違いを乗り越えて操作性に統一感を持たせ使いやすさを向上させた 「マテリアルデザイン」を提唱 。声かけだけではなく 統一サポートサイトとして「Material.io」を開設 し、情報共有や普及に努めています。このサイト内に、アプリにどんなカラーパレットを用いればいいのかを助ける新たなカラーツールが登場しました。 Color Tool - ... 続きを読む

0から分かるマテリアルデザインの作り方：基本概念とガイドライン

2017/04/02 297 users ガイドライン 基本概念 コンポーネント 目次 作り方

これからのデザイントレンドといえば「マテリアルデザイン」でしょう。これはGoogleが2014年〜提唱している考え方です。この記事では、マテリアルデザインの基本と作り方を総まとめしていきます。 この記事の目次 マテリアルデザインとは？ 作り方とルール 押さえておきたいコンポーネント マテリアルデザインをもっと学ぼう 1. マテリアルデザインとは？ マテリアルデザインにはいくつかの特徴があります。ま... 続きを読む

流行りのGoogleマテリアルデザインがすごい件 - LITERALLY

2017/04/01 865 users Literally ノンデザイナー すごい件 スゴイ はじめ

2017 - 04 - 01 流行りのGoogleマテリアルデザインがすごい件 今更だけど「マテリアルデザイン」がスゴイ。デザイナーだけでなくノンデザイナーもその考え方を知っておく価値があると思う。 マテリアルデザインは2014年〜Googleが提唱している考え方だ。主にアプリやWebサイトに採用される。Googleのサービスにはだいたいマテリアルデザインが採用されている。はじめの一步としては「マ... 続きを読む

デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ | コリス

2017/03/13 221 users スクロール 空白スペース 前提 テクニック テキスト

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニック... 続きを読む

はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ

2017/03/05 339 users UXエンジニア Tweet iOSアプリ フィード 悪い見本

2017 - 03 - 05 はてなブックマークiOSアプリはマテリアルデザインの悪い見本 デザイン/UX 主張/考え Tweet はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親... 続きを読む

ブラウザーメーカーのOperaが中国のテク企業コンソーシアムに$1.2Bで身売りか…すでに買収オファーを受領 | TechCrunch Japan

2016/02/10 153 users 憶測 指紋 ノルウェー 抄訳 ブラウザー

Android用1Passwordに指紋によるアンロック機能が実装、ルック＆フィールはマテリアルデザインに 【抄訳】 ブラウザーのメーカーOperaの未来に関して いろんな憶測が 飛び交っているが、それもついにやっと落着するようだ。今日（米国時間2/9）、このノルウェーに本社のある企業は、中国の消費者テク企業Kunlun TechとQihoo 360が率いるグループから12億ドルの買収オファーを受... 続きを読む

マテリアルデザインに合ったアイコンが4000個手に入るサイト「Nova」 ｜ ライフハッカー［日本版］

2015/12/11 64 users NOVA カメきち ライフハッカー アイコン ウェブサイト

カメきち  -  Webサービス , デザイン , 趣味     06:30 AM マテリアルデザインに合ったアイコンが4000個手に入るサイト「Nova」 「Nova」は マテリアルデザインに合ったアイコンが4000個手に入るサイト です。基本的には有料になりますが、350個のアイコンが無料でダウンロードできます。マテリアルデザインのウェブサイトを制作する際に使えますね。 以下に使ってみた様子を... 続きを読む

配色を考えるときに便利なサービスをまとめたサイト「UIPALETTE」 ｜ ライフハッカー［日本版］

2015/10/02 75 users UIPALETTE 配色 ライフハッカー フラットデザイン

「UIPALETTE」は配色を考えるときに便利なサービスをまとめたサイトです。マテリアルデザインやフラットデザインなどで使える配色パレットや、その他類似色を生成するサービスなどを使うことができます。 以下に使ってみた様子を載せておきます。 まずUIPALETTEへアクセスしましょう。左側にさまざまな配色に関するサービスが並んでいます。選択すると右側のページがそのサービスに切り替わりますよ。 このよ... 続きを読む

マテリアルデザイン用のカラーチャートが手に入るサイト「Material UI Colors」 ｜ ライフハッカー［日本版］

2015/09/19 51 users ライフハッカー カラーチャート カメきち コピー 趣味

カメきち  - Webサービス,デザイン,趣味  06:30 AM マテリアルデザイン用のカラーチャートが手に入るサイト「Material UI Colors」 「Material UI Colors」はマテリアルデザイン用のカラーチャートが手に入るサイトです。マテリアルデザインに合う色をすぐに探すことができるので便利ですよ。その場でカラーコードのコピーも行えます。 以下に使ってみた様子を載せてお... 続きを読む

配色をもっと楽に！色の便利ツール、テクニックをまとめたサイトHTML Color Codes - PhotoshopVIP

2015/09/03 63 users PhotoshopVIP カラーピッカー hex RGB 配色

デザイン制作において頭を悩ますひとも多い、配色。困ったときに色を選ぶ手助けをしてくれるツールやチュートリアルをまとめたサイト、HTML Color Codesを今回はご紹介します。 カラーピッカーで直感的に色を選んだり、人気のあるフラットデザインやマテリアルデザインから色を選択したり、HTMLカラーコードから選んだりと、さまざまな配色の選び方を提案してくれます。選択した色のHEXやRGB、HSL値... 続きを読む

ExpandJS - 多くのUIコンポーネントと役立ちメソッドを備えたJavaScriptライブラリ MOONGIFT

2015/07/19 90 users MOONGIFT Polymer UIコンポーネント 関数

最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提... 続きを読む

【CSS】Googleが公開したUI/UXライブラリ「Material Design Lite」を試してみた | unitopi - ユニトピ -

2015/07/10 225 users ライブラリ Material Design Android

Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material DesignAndroidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開され... 続きを読む

マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ - PhotoshopVIP

2015/07/09 149 users 重点 ランディングページ CSS ウェブサイト 見た目

数日前にGoogleは、マテリアルデザインの考えを取り入れた公式フレームワークフレームワーク「Material Design Lite」を公開しました。マテリアルデザインの見た目や操作性に重点をおいた、CSS，HTML、JavaScriptコンポーネントで、より手軽にウェブサイトやブログ、ランディングページなどを作成することができます。 今回は、Material Design Liteの基本的な使... 続きを読む

Google、マテリアルデザインWebサイト作成キットを無償公開 - ITmedia Mobile

2015/07/08 161 users ITmedia Mobile Google 無償公開 htm

Googleが、Android OSのデザインコンセプトである「マテリアルデザイン」のルック＆フィールを反映したWebサイトを構築するツールキット「Material Design Lite」をリリースした。 米Googleは7月6日（現地時間）、マテリアルデザイン仕様のWebサイトを構築するためのツールキット「Material Design Lite」を公開したと発表した。 基本的なCSS、HTM... 続きを読む

Googleのマテリアルデザインを使ったウェブサイトが作れる公式CSS/JS/HTMLコンポーネント「Material Design Lite」 - GIGAZINE

2015/07/07 163 users CSS JavaScript GIGAZINE 見た目 製品

Googleがモバイル向けOSの「Android 5.0 Lollipop」で採用し、同社の他の製品やサービスでも導入されている「Material Design(マテリアルデザイン)」は、見た目だけではなく使い勝手までも意識してデザインされたUXです。そのマテリアルデザインを使ったウェブサイトを作れるCSS/Javascript/HTMLコンポーネント「Material Design Lite」を... 続きを読む

マテリアルデザイン(Material Design)のcssやフレームワーク - webhack / ウェブ技術が好き

2015/06/28 248 users CSS レスポン フレームワーク Bootstrap ボク

2015-06-28 マテリアルデザイン(Material Design)のcssやフレームワーク ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポン... 続きを読む

グーグル公式のマテリアルデザイン作成の舞台裏ビデオ : ギズモード・ジャパン

2015/06/22 50 users ギズモード iOS グーグル公式 ジャパン グーグル

アート , デザイン , 動画 グーグル公式のマテリアルデザイン作成の舞台裏ビデオ 2015.06.22 11:30 グーグルもデザインに本気です。 2014年のGoogle I/Oでの登場以来、最近ではAndroid Mやウェブ、iOSのグーグルアプリなど幅広く採用されているマテリアルデザイン。そのマテリアルデザインとは一体何なのか、どう作られたのかを垣間見ることができるビデオが公開されています... 続きを読む