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

ブレイクポイントとはなにか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、レスポンシブWebデザインを制作する時に必ず設定する、レイアウトとデザイン適用の境界線、すなわち「ブレイクポイント」についてご説明していきます。
講師:
03:28

字幕

このレッスンではレスポンシブ Web デザインを制作する時に必ず設定するレイアウトとデザイン適用の境界線、即ちブレイクポイントについて説明していきましょう。現代社会では掌サイズのスマートフォンから様々なサイズのタブレット端末ノートパソコン、オフィスで利用する大きなモニター公共施設で利用するデジタルサイネージのような大きなスクリーンまで多種多様な横幅の表示環境が存在しています。当然これら全ての画面1つ1つに対してWeb ページをレイアウトし直すというのはとても現実的な作業ではないので実際には閲覧環境の横幅を幾つかのグループに分け段組みやコンテンツの表示位置などを切り替えていくことになります。このどのウィンドウ幅をグループで扱いどこでレイアウトを切り替えるかというのがブレイクポイントです。レシポンシブ Web デザインをするデザイナーに幅広く使われているフレームワークBootstrap を例にしてブレイクポイントの指定を見ていってみましょう。Bootstrap の CSS の中身を見ていくと予めこの4つのブレイクポイントが指定されていることが分かります。つまり画面幅が 480px 未満の時はスマートフォン用768px 未満の時はタブレット用992px 未満の時は中位のスクリーン用そして 1200px の大きなスクリーン用というように4つのブレイクポイントを使ってレイアウトを切り替えることができるのです。 これら全てのブレイクポイントを必ず使わなくてはいけないかと言うとそんなことはありません。ご自分の作る Web サイトに最適なレイアウトのバリエーションだけを選んで用意すればよいのです。例えば、ウィンドウ幅が 480px 未満の時はスマートフォン向けそれ以上の時は伸び縮みするPC 向けのレイアウトというように、2種類だけ用意しておくという考え方もありえます。この場合は例えば画面解像度が高いタブレット端末ではこの PC 用のレイアウトが伸び縮みしてフィットして表示されるということになるでしょう。この先、今は想像もつかないようなサイズの端末想像もつかないような携帯の端末そういったもので Web サイトにアクセスする未来がやってくる可能性も高いのかなと思います。現時点では今ご紹介したような4種類ほどのブレイクポイントを作るのが多数派ではありますが将来の変化を見据えながら常に表示端末のトレンドを気にしておくようにしましょう。このレッスンではレスポンシブ Web デザインを制作する際に利用するレイアウト適用の境界線ブレイクポイントについて解説しました。

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

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

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

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

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

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