webモックアップをモバイル上で見栄えの良い非常にレスポンシブなwebサイトに移行する方法を紹介します。
responsive-web-design-creative-cloud_1408x792

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

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

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

Creative Cloudにアセットをコピー

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

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

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

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

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

レイアウトのアイデアを見る

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

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

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

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

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

テキストとシェイプの追加

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でレイアウトをプレビューできます。

Photoshopでのアートボード

Dreamweaverで直接Photoshopドキュメントを参照する

サンプルサイトをダウンロードしてindex.htmlを開いてください。 Extractパネルを開き、Creative Cloud Assetsで保存したvermilion-responsive-layouts.psdをクリックして開きます。ALTを押しながらクリックして、各レイアウトのアートボードを表示します。

Extractパネルに表示された要素をクリックすると、そのCSS属性を表示してコピーし、必要に応じてペーストできます。「レイヤー」をクリックして、PSDの構造を表示します。フォルダーアイコンをクリックして、レイヤーグループを展開します。アセット抽出をクリックして、アートボードから画像を保存します。

様々なサイズのプロダクション対応の画像を抽出する方法については、アセットを一括抽出するをご覧ください。

注意: サンプルファイルを使って練習することができます。vermilion-responsive-layouts.psdを解凍して開き、Creative Cloudファイルに保存してください。

Dreamweaverで直接Photoshopドキュメントを参照する

レスポンシブなコンポーネントをwebサイトに追加する

Dreamweaver CC 2015では、レスポンシブなwebサイトを迅速に構築できます。視覚的なメディアクエリーのブレークポイントを使用して、あらゆる画面サイズに対応するレイアウトを作成します。青いバーをクリックして、768pxから991pxのレイアウトを設計します。

挿入パネルから直接Bootstrapコンポーネントをドラッグします。ライブビューをクリックし、DOMパネルフッターに移動します。挿入パネルを開き、ドロップダウンから「Bootstrapのコンポーネント」を選択します。「Grid Row with column」をクリックします。次に、 「前」を選択して、「OK」をクリックし、デフォルトの3列グリッドを承認してレスポンシブな画像ギャラリーを作成します。

Extractパネルでレイアウトから列の中央にギャラリー画像をドラッグ&ドロップします。Enterキーを押して画像を列に挿入します。.img-responsive.center-block.col-md-3などの標準的なBootstrapクラスを画像と列に追加することで、ダウンロードアセットの外観をカスタマイズできます。

この手順を他の2つの列で繰り返します。

レスポンシブなコンポーネントを追加する

レスポンシブレイアウトを視覚的に確認する

ライブビューでスクラバーをドラッグし、webサイトが様々なブレークポイントでどのように表示されるかを確認します。ドラッグに合わせて、レスポンシブなwebサイトが自動的にサイズ変更され、折り返されます。

別の方法として、緑、青、紫のメディアクエリーブレークポイントをクリックし、デザインが様々なブレークポイントでどのように適合するのかを確認する方法もあります。

メディアクエリーブレークポイントを使用して、各レイアウトのCSSを視覚的に変更できます。緑のブレークポイントをクリックし、オーバーレイdivを選択します。右クリックして「エレメントを隠す」を選択します。他の定義済みメディアクエリーをクリックすると、オーバレイdivはレイアウトに表示されたままとなります。

詳しくはレスポンシブなグリッドレイアウトの作成をご覧ください。

レスポンシブレイアウトを確認する
webサイトのプレビュー

モバイルブラウザーでwebサイトをプレビューする

デバイスプレビュー機能を使用して、モバイルデバイスでレスポンシブなデザインをプレビューおよびインスペクトします。デスクトップPCとモバイルデバイスが同じWi-Fiネットワークで接続していることを確認し、デバイスプレビューアイコンをクリックします。ポップアップが表示されます。プレビューするモバイルデバイスでQRコードをスキャンします。iOS、Android、またはWindowsデバイスで同時にプレビューできます。 デスクトップPCのブラウザーにURLをコピー&ペーストする方法やモバイルデバイスのブラウザーに入力する方法もあります。

詳しくは、モバイルデバイスのブラウザでプレビューするをご覧ください。

01/16/2018
このページは役に立ちましたか。
はい
いいえ