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

コンポーネント制作の考え方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、レスポンシブなWebサイトのレイアウトの中で利用する個々のパーツ、すなわち「コンポーネント」を作るときの考え方について、ご紹介していきます。
講師:
03:47

字幕

このレッスンではレスポンシブなWeb サイトのレイアウトの中で利用する個々のパーツ即ちコンポーネントを作る時の考え方について紹介していきます。レスポンシブな Web サイトを制作する時には伸び縮みするグリッドの中に個々のパーツつまりコンポーネントを収めていくことになります。この時それぞれのコンポーネントを伸び縮みしない状態で作ってしまうとどうなるでしょうか。こちらは予め私が作っておいた伸び縮みしないコンポーネントです。一見レイアウトとして成立しているように見えますがウィンドウの幅を変えると、このようにこのコンポーネント同士の空きが非常に広くなってしまったりもしくはウィンドウの幅を狭めると左側に寄った状態になってしまいます。また、違うダメパターンも見てみましょう。こちらは伸ばすと崩れるコンポーネントです。このような状態のときは一見きちんとできているように見えますがウィンドウの幅を広げるとこのイメージとテキストの間が不自然に空いてしまいます。そしてもっと縮めるとカラム落ちを起こしてしまいもっと縮めると、今度はテキストが右側に寄ってしまった状態になります。今見てきた2つの例のようにウィンドウの幅の変化を考えずに作ってしまったコンポーネントですとレイアウトに不自然な空きができたりもしくは崩れてしまうということもあり得ます。 これを避けるためには、それぞれのコンポーネントをデザインする時横幅が変わっても追随してくる伸縮するレイアウトを作っていきましょう。では OK なパターンを見ていきましょう。似たような4つのカラムがありますがこちらはウィンドウのサイズを変更してもテキストの横幅だけが変わる形になっています。そしてウィンドウを狭めていくと今度は縦方向にカラムが並びますがきちんと左右いっぱいいっぱいにコンテンツがフィットしているので見栄えがとても良い状態になっています。このように常に横方向に伸び縮みする設計でコンポーネントを作っておけばウィンドウ幅の変化によってカラムの並び方が変化していく中でもレイアウトが破綻しにくくなります。Photoshop の画面に移って見てみましょう。Photoshop でデザインカンプを作っていくとついついコンポーネントを固定幅で考えてしまいがちですが常にこのコンポーネントは横方向に伸び縮みが可能かスマートフォンでの閲覧時に1カラムになってもデザインが成立するかということを念頭におきながら作業を進めていきましょう。ここまでレシポンシブな Web サイトの部品であるコンポーネントを作るときの考え方についてお話ししてきました。

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

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

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

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

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

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