『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

STEP 3：スクロール値でアニメーションさせる スクロール値の取得と、奥行きのあるコンテンツの作成ができたので、いよいよアニメーションをさせてみよう。 今回のデモでは、1画面の高さをheight: 100%; とし、スクロール値が#sectionの半分に達したときに「.card」のrotateXが0になるようにする。具体的には、以下の計算式で求めた値を変数rotateXに代入する。 変数rotateXの値をtransformプロパティのrotateX関数の引数に渡すことで、スクロール量に応じたコンテンツの変形が実現する。なお、rotateXの値がマイナス値になると「.card」が逆向きに変形してしまうため、値が0を下回ると0を代入して変形を止めている。 ■ソースコード（HTML） <div id="wrapper"> <div id="section" class="inner red"

2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ

グーグルが発表した、次期Android OS （通称Android L）向けの新しいデザイン原理「Material Design」の使い道や使い方について、背景にある思想やWebデザインへの影響を紹介します。 普及の鍵を握るSDKとPolymer Material Designは、次期Android OS（通称 Android L）のデザイン原則として、Androidデバイスで動くアプリやサービスへの適用が求められています。Androidの場合、iOSのようにプラットフォーム側がアプリ提供側を審査しないので、基準が示されるだけでは普及のきっかけがありません。 グーグルはこの問題点を、Material Designのデザイン原則を盛り込んだSDKの提供で克服しようとしています。 SDKの仕様に沿ってアプリやサービスを開発すれば、半ば自動的にMaterial Designの原則に沿ったUIが構

インストールからコンポーネントを一つ出力まで 概要 Material Designとは… Material Designは、プラットフォーム間で統一したGUI・インタラクションをユーザーへ提供するために作られたGoogleのデザインガイドラインです。 Polymer.jsとは… Polymer.jsは、ブラウザへの実装が待たれるWeb Components APIを先行して実行するために開発・提供されているPolyfillライブラリの一つです。 Web Componentsの恩恵 Web Componentsは、GUIの部品をカプセル化し、再利用しファンクショナルな実装を目的としたAPIの一つです。現在、ウェブアプリケーションの多くは似たような実装方法で一部カプセル化を行っています。例えばMVWフレームワーク Angular や Vue , BackboneやEmberの設計方法に近いです

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

話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう 佐藤歩（株式会社サイバーエージェント） この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Material Designという視覚的言語 Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。 それを実現するため、伝統的なグラフィックデザインとテク