PhotoshopでレスポンシブWebデザイン!

レスポンシブWebデザインとはなにか

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、「そもそもレスポンシブWebデザインってなんだっけ?」という前提のお話を、ご一緒に見ていきましょう。
講師:
04:31

字幕

皆さん、こんにちは私は東京でフリーランスの Web デザイナーとして働く黒野明子と申します。このコースでは「Photoshop でレシポンシブ Web デザイン」と題してレシポンシブ対応の Web サイトのデザインカンプをPhotoshop で効率的に制作する方法を皆さんと一緒に学んでいきます。このレッスンではそもそもレシポンシブWeb デザインとは何だっけという前提の話をご一緒に見ていきましょう。さて、街を歩けば電車の中でもカフェでもスマートフォンやタブレットを使っていない人の方が少なく感じられる程の普及ぶりですが皆さんはどのように感じられていますか。総務省の平成 27 年版情報通信白書によるとスマートフォンは日本の全世帯の64 %以上の世帯で保有されているということです。20 歳代ではなんと 94.5 %30 歳代で 92.4 %と、90 %を超え40 歳代、50 歳代も 70 %を超えているとのこと。どちらを向いてもスマホを使っている人が目に入るというのも納得の調査結果です。それほどまでに普及しているスマートフォンですがPC 向けにレイアウトされたページをそのまま閲覧するのはなかなか見づらく使いづらいものです。 文字もボタンも小さすぎて読みにくくタップしづらい経験というのは色々な方がなさっているのではないでしょうか。この問題を解消するための手法は幾つかあります。例えばユーザーエージェントなどを利用して端末の種類を判別して予め PC 用とスマートフォン用に別々に作成しておいたコンテンツを振り分けて出力するという手法はよく見られます。これに対してレシポンシブ Web デザインというのは1つの HTML ファイルで様々な画面サイズの端末にレイアウトを対応させるという手法です。水などの液体は入れる器の形にぴったりフィットして自らの形を変えていきます。レシポンシブ Web デザインではページのレイアウトが入る器即ち、端末の画面サイズこれによってレイアウトが最適化されてぴったりフィットするという手法です。かつて、レシポンシブ Web デザインという概念を提唱したEthan Marcotte さんによるとそもそもレシポンシブ Web デザインというのは、この画面に映っている3つの要素を備えたものである、と定義されました。1つ目がフレキシブルなグリッドフレキシブルでグリッドベースのレイアウトというのは伸び縮みする格子状のグリッド内にコンテンツがレイアウトされているということです。 2つ目がフレキシブルな画像やメディアこれはレイアウトの中で利用された画像や動画なども画面幅に応じて伸び縮みするようにするということです。最後はメディアクェリです。メディアクェリというのはCSS3 に用意された機能で閲覧する端末の様々な条件に応じて適用させるスタイルを切り替える、変化させるものです。最近では多くの Web デザイナーがレシポンシブ Web デザインの手法を洗練させてきていますが基本としてはこの3つの要素について学んでいくと良いでしょう。このレッスンではそもそもレシポンシブ Web デザインとは、という概要について見てきました。ご自分もスマートフォンやタブレットなどのモバイル端末を活用されている方であればきっと身近に感じられるテーマなのではないでしょうか。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。