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

スマートフォン向けレイアウトを調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopのアートボード機能を使って、PC向けのデザインから複製したものを、スマートフォン向けに調整していく方法についてお見せしていきます。
講師:
09:18

字幕

このレッスンでは Photoshop のアートボード機能を使ってPC 向けのデザインから複製したものをスマートフォン向けに調整していく方法についてお見せしていきます。今ご覧頂いている画面ではPC 向けにレイアウトしたアートボードを複製してアートボードのサイズだけiPhone 6 にフィットするように変更した状態です。この状態のままですとガイドラインもPC 向けのまま残ってしまっていますし内容も PC 向けになっていますのでこれをスマートフォン向けに変更していきたいと思います。まずはガイドラインの変更です。レイヤーパネルを開いてこの SP スマートフォンのアートボードが選択されている状態でメニューバーの「表示」>「新規ガイドレイアウトを作成」をクリックします。この時注意したいのは1番下にある「既存のガイドを消去」にチェックを付けておくことです。こうすることによって元々あった PC 向けのガイドを消して新しいガイドを引くことができます。そして「ターゲット:選択したアートボード」今 SP を選択していますのでこちらを使います。そしてスマートフォンの時はPC の時に 12 個横並びになっていたカラムが縦1列に並びます。 ということは、カラムは1つで結構です。列のところを「1」にしておきます。そして OK をクリックすると左右に 20px ずつ空きがあって1カラムというガイドを引くことができます。では画面を拡大して少し作業を進めていきましょう。まずは移動ツールで右クリックをしてロゴマークを先程作ったガイドに合わせます。そしてロゴマークの下にあるこのタグラインこちらのフォントサイズを変更しましょう。文字ツールでこちらのタグラインを選択するとサイズが 12px であることがわかります。しかし、iPhone 6 はレティナディスプレイですので2倍のサイズで文字を指定しておく必要があります。今 12px で指定されているということは実際には 6px になってしまうので20 にしておきましょう。実際 10px になるように数値を20 にしておきます。そして移動ツールで上下に動かして改行しておきましょう。あとで、こちらは内容を編集しても良いかと思いますしスマートフォン用には非表示にするという選択もあるかもしれません。次は、メインの写真を大きさ変更してみましょう。写真の上で右クリックしてmain-image を選択します。 こちらのレイヤーを見てみるとレイヤーマスクされていますのでこのレイヤーマスクサムネイルのリンクを外します。そして中の写真だけを選択して自由変形Command+Tもしくは Ctrl+T でバウンディングボックスを表示させて大きさを変更します。スマートフォンの時も横幅いっぱいいっぱいにこの花の写真が表示されるように調節をします。次にレイアウトを変更したいのはPC の時に4つ並んでいたコンポーネントをスマートフォンの時は2つ並びにしたいという部分です。こちらをやってみましょう。フッターですとかこの資料請求のボタンですとかは一時隠してしまいます。こちらを非表示にして次に3つ目のコンポーネントも隠してしまいます。そしてこの1つ目と2つ目のコンポーネントを同時に選択して移動させます。ここでガイドをあと2本足した方が良さそうなことに気づきました。ここは2カラム並びますので真ん中に 30px の隙間が空いたガイドを追加しておいた方が作業しやすい為です。では、もう一度「新規ガイドレイアウトを作成」から今度は列の数を2にして間隔を 30左右のマージンはそのままにしておきましょう。このように真ん中に 30px の間隔がある状態でガイドが引かれたので OK します。 そしてコンポーネントを移動させます。あとは、文字サイズを変更したりタイトルの所が 21px になっていますがこれは 2 で割ると 10.5 になってしまいます。少し小さ過ぎるので30 にしておきましょう。すると、見出しのところは半分に割って 15px になります。もう少し拡大してこの下線部分、こちらを横方向に伸ばします。先程作ったこの真ん中のガイドラインに合わせます。次は本文のテキストサイズも変更しましょう。まずは横幅をガイドにフィットさせてそれからフォントのサイズ変更です。20px に指定することによって実際に iPhone で見た時には10px の大きさになるように指定します。それから行送り line-height も変更しましょう。文字パネルを開いてline-height 1.3 に相当する数値に指定したいと思います。20px の 1.3 倍は 26と指定しておきましょう。これでフォントのサイズが 20pxつまり半分にして実際には 10pxそして line-height が実際には26÷2 で 13 になるような指定をしておくことができます。それから移動ツールでこちらの丸くくり抜かれている写真もこのカラムのセンターに寄せておきましょう。 ここまで見てきたようにスマートフォンのデザインをPC のデザインと関係なくゼロから作るよりもPC で作った素材を基に作り直していく方が非常に効率的でさらにデザインを統一させることができます。ここでコンテンツを変更する時にBootstrap で実際落とし込んでいったらどのようにカラムが動く、ですとかテキストのボックスの横幅を変更した時に折り返しが増えて高さが伸びてしまう、とか実際 HTML 上でどのようにコンテンツが変化していくかということを意識しながらデザインすることが重要です。以上、このレッスンではPhotoshop のアートボード機能を使ってPC 向けのデザインから複製したものをスマートフォン向けに調整していく方法についてご説明しました。

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

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

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

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

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

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