ダウンロード サンプルファイル (36.3 KB)
デザインのプレビュー
制作中にもカンバスハンドルを移動するだけで、デザインを確認することができますが、「Tab」キーを押すとプレビューモードになり、グリッド表示のない状態のデザインを確認できます。また「F12」を押すと、ブラウザで表示できます。さらに、Adobe Edge Inspectと連携すれば、実機でのリアルタイムなプレビューが可能になります。
その他のデバイス用デザインとページ遷移
さて、デスクトップ用のデザインが完成したら、カンバスハンドルをtablet領域に移動させて、タブレット用のデザインをしていきましょう。と言っても、また新しくオブジェクトを配置してデザインするわけではなく、すでに配置されているオブジェクトの配置を変えたり、スタイルを変更するだけです。同じく、モバイル用のデザインも、カンバスハンドルを520px以内に移動させて、デザインしていきます。
Adobe Edge Reflowでは、画面右上のページアイコンをクリックし複数のページを作成することができます。まず、画面下のDOMバーに表示されている「Page1」をダブルクリックしてページ名を付けます。ここでは「contact」というページ名を付け、これをコピーして「thanks」ページを作成しました。
ヘッダやフッタなどの共通要素を消去して、新たに送信完了後のページを作成します。
ページアイコンをクリックしてcontact画面に戻り、送信ボタンのオブジェクトを選択後、画面左のButtonオプションにあるリンクアイコンをクリックしてthanksを選択します。
プレビューモードやブラウザでプレビューすると、送信ボタンをクリック後、完了画面に移動することを確認できます。
まとめ
Adobe Edge Reflowはプレビュー段階にあり、まだ完全ではありませんが、最初の設定をきちんとすれば、割と直感的に扱いやすいと感じました。サイズ変更可能なデザインカンバスでCSSをベースに作成するという新しい感覚のツールです。マルチデバイス時代の新しいツールとして、どのような進化をしていくのか非常に楽しみでもあります。
参考資料
この記事は参考になりましたか？
既に会員の方はを行ってください。
- Adobe Developer Connection連載記事一覧
-
- Adobe Edge Reflowで作るレスポンシブデザイン向けプロトタイプ入門
- Photoshop Generatorプラグインの作り方
- 外部ツールと連携しやすくするPhotoshopの新機能「Generatorテクノロジー」と...
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト 宮本麻矢（ミヤモト マヤ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
