[B! design][Google] yoshiwebのブックマーク

アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ

スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します）スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは

yoshiweb 2015/07/09

リンク

「ソフトウェアの素材とは何ぞや？」から始まったGoogleのマテリアルデザインができるまで

Googleのモバイル向けOS「Android 5.0 Lollipop」で採用され、同社の他の製品でも続々と導入されているのがマテリアルデザインというソフトウェアデザインです。GoogleがYouTubeで公開しているGoogle Designのチャンネルで、マテリアルデザインができるまでのメイキングムービーや、その概念の詳細を紹介したムービーを公開しており、マテリアルデザインができるまでを理解できる内容になっています。 Making Material Design - YouTube マテリアルデザインは、Androidだけでなく異なるプラットフォームでも活用できる可能性があるデザインのフレームワーク。マテリアルデザインを一言で表すのは、マテリアルデザインを作りあげたデザイナーたちでも即答に困るようで、単純な「OSのデザイン」ではないことが見ている側にも伝わってきます。マテリアルデ

yoshiweb 2015/05/31

リンク

[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO

Material design with Polymer Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。デモで Material Design の世界を体験してみようその前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。 Topeka (クイズアプリ) Paper Eleme

yoshiweb 2014/06/28

リンク

Google Web Designer - Home

Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different

yoshiweb 2013/10/01

リンク

GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中

ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel

yoshiweb 2013/06/15

リンク

Google画像検索で高解像度のロゴのみをザクザク見る

ロゴ制作時に使えるTIPSをご紹介。アイデア捻出とかでロゴをザーッと見たいとき、Google画像検索で検索ワードに「logo」とか入れて検索すると思います。そこに「filetype:svg」を追加してファイル形式を「SVGファイル」のみに制限することで、高解像度のロゴのみを検索できます。サンプルでも、SVGファイルって何でしょうか? SVGファイルってなんなのさ SVGフォーマットはJPEGやPNGなどのピクセル形式の画像ファイルとは違い、イラストレーターのようなベクターデータ。つまり何処までも拡大できます。なので正確には高解像度というのは間違い。 Webページにベクターデータを埋め込む用途を意識して開発されたので、中身はXMLで書かれてます。つまり普通にテキストエディタで開けば直接データが見えます。もちろん編集もできます。ウィキに掲載されてるロゴはSVGファイルの場合が多いです

yoshiweb 2012/12/09

リンク

Android デザインを訳してみた

Android Designというサイトがなかなか面白かったので訳してみました。アプリを作る上で気をつけるべき事を一般論とAndroid特有の事がそれぞれ書かれてあります。ようこそAndroid DesignへこれはAndroidアプリの優れたデザインをする方法を学ぶためのものです。クリエイティブビジョン目次始めに・クリエイティブビジョン・デザイン原則・UI概要スタイル・デバイスとディスプレイ・テーマ・タッチフィードバック・測定基準とグリッド・タイポグラフィティ・色・アイコンデザイン・文章の書き方パターン・NewAndroidでの新しい事・ジェスチャー・アプリの構造・ナビゲーション・アクションバー・マルチペインレイアウト・スワイプビュー・セレクション・通知・互換性・純粋にAndroid 開発用の部品達・タブ・リスト・グリッドリスト