Make it with Creative Cloud

レスポンシブWeb制作を効率化(Webデザイン編)

複数のデバイスを同時にデザインできるPhotoshopのアートボードとデザインをリアルタイムにスマホで確認できるPreview CCの連携が亀山雄太のレスポンシブWebデザインを加速する

Webデザイナー亀山雄太も活用した、モバイル対応のレスポンシブなWebサイトをデザインする方法を紹介します。以下をダウンロードしてください。

  iPad用のComp CC

  iPhoneおよびiPad用のPreview CC

ダウンロード 練習用のサンプルファイル(ZIP、24 MB)

手順1/4(オプション)

Creative Cloud ライブラリにサンプルアセットをコピーする

このレスポンシブなレイアウトを実際に作ってみることができます。バーミリオンレスポンシブWebサイトライブラリのアセットを使用してください。「Creative Cloudに保存」をクリックして、ご自分のアカウントにライブラリをコピーすれば、Adobe Comp CCやPhotoshopから直接アセットにアクセスできます。

注意:ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。お持ちでない場合はAdobe IDを取得してください。

手順2/4

レイアウトのアイデアをComp CCで作る

iPadでComp CCを開き、「+」をクリックして新規プロジェクトを作成します。「新しい形式」を選択し、「レスポンシブなレイアウト」という名前を付けます。幅には1280pt、高さには1500ptを入力し、「形式の保存」をタップして、新しいレイアウトをタップして開きます。

画像を挿入する箇所にXを描画します。描画ジェスチャーに従って、描画内容がオブジェクトに変換されます。画像プレースホルダーをタップし、画面下部のグラフィックアイコンをタップします。「マイライブラリ」をタップしてバーミリオンWebサイトライブラリを選びます。正しい画像をタップしてプレースホルダーに挿入します。1回タップすると画像が置換されるか、フレームの位置を変更できるようになります。2回タップするとフレーム内で画像をサイズ変更できます。

この手順を繰り返して、Webサイトのレイアウトを作成します。

ヒント:画面上部にある歯車アイコンをタップすると、描画ジェスチャのヘルプが表示されます。

手順3/4

レイアウトにテキストとシェイプを追加する

ヘッドラインのテキストを追加するには、長方形とドット(.)を描画します。複数行のテキストを作成するには、複数の線を引いて、ドット(.)を描画します。長方形を描画し、Webサイトのフッターとバナーオーバーレイ用のベクターシェイプを作成します。描画ジェスチャに合わせて、描画内容がコンポーネントに変換されます。

フッター用の長方形をタップし、アイコンをタップして、そのカラーまたは不透明度を変更します。テキストフレームをタップしてからテキストアイコンをタップして、入力のスタイル設定を行います。

ヒント:画面上部にある歯車アイコンをタップすると、描画ジェスチャのヘルプが表示されます。

終了したら、「送信」をタップし、「Photoshopに送信」をタップします。

手順4/4

Photoshopのアートボードでレスポンシブなレイアウトを作成する

モバイルアプリやWebサイト用の画面をデザインするためのテンプレートとしてCompのレイアウトを使用します。Photoshopが開いている場合、編集可能なPhotoshopドキュメントとしてCompが開きます。 

Compからのレイアウトのデザインを終えたら、レイヤーパネルのレイヤーをすべて選択します。レイヤーパネルのオプションの「レイヤーからのアートボード」を選択します。アートボードに1280px-Webという名前を付けます。

レイヤーパネルのオプションから「アートボードを新規作成」を選択します。幅には768px、高さには1830pxを設定します。アートボードに「768-Tablet Design」という名前を付け、「OK」をクリックします。320-Mobile Designアートボードを作成します。幅には320px、高さには2300pxを設定します。
 
レイヤーパネルを使用して、1280px - Webアートボードのレイヤーを他のアートボードにコピーし、デバイスのレイアウトごとに必要に応じて要素を操作します。ファイルを「vermilion-responsive-layouts.psd」という名前で保存します。

ヒント: Photoshopの関連アプリであるAdobe Preview CCを使用すれば、iOSでレイアウトをプレビューできます。

Dreamweaverを使用した効率的なレスポンシブWeb制作。エクストラクト連携でPhotoshopカンプから直接コードを生成、標準搭載のBootstrapでレスポンシブWeb制作工数を削減する手順を解説します。

新井さくら


亀山雄太

亀山雄太 / yuta kameyama
RADICAL

1984年岐阜県生まれ。デザイン専門学校卒業後、2005年にRADICAL入社。グラフィックを中心に広告制作に携わり、現在はWebの企画・デザインを中心に担当する。
RADICALの作品 ›