Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/27 14:00
目次

Edge Inspectで実機とリアルタイム連動

 Edge Reflowでは、Edge Inspectと連動してプレビューが可能です。Edge Inspectはモバイル対応には欠かせないツールになってきており、モック作成からリアルタイムで連動できることはかなりのメリットと言えます。Edge Inspectをダウンロードしていない方は、まずは体験してみることをおすすめします。

 Edge Inspectと連動させるには、右下のInspectボタンをクリックします。Edge Inspectを起動した状態であれば、下図のようなパネルが現れますので、ONにすれば連動しているデバイスがパネルに表示されます。

Edge Inspectを起動した画面
Edge Inspectを起動した画面
デバイスとつながった状態
デバイスとつながった状態
Edge Inspectを起動していない画面
Edge Inspectを起動していない画面
デバイスとリアルタイムで連動可能
デバイスとリアルタイムで連動可能

Edge Reflowで生成したCSSをサイトに反映する

 現時点ではEdge Reflowはファイル生成の機能は付いていませんが、CSSのスニペットを取り出すことが可能です。Edge Reflowを起動してプレゼンするのも1つの手ですが、ある程度ReflowでプロトタイプができたらHTMLファイルへ移植していきます。

 サンプル用のHTMLテンプレートを用意しましたので、そちらに貼りつけてモックを完成させてみましょう。

  • HTMLサンプル(記事上部のリンクからダウンロードできます)

 貼り付ける際の注意点として、実際のファイルではCSSフレームワークをベースにして作成するため、レイアウトに関するスタイルは除外してペーストします。実際に貼りつけてから微調整すると良いでしょう。

 現時点ではEdge Web Fontsを指定したスタイルに関しては、そのままペーストしても使えませんでした。移植するには下記のようにfont-familyで分けることで動作しました。

Reflowから抽出したスタイル
font: open-sans-condensed 1.6em 100;
調整したコード
font-family: open-sans-condensed;
font-size: 24px;

 また、フォントをscriptタグで読み込む必要がありますので、下記のコードをhead内に追加します。Edge Reflowのプレビューのソースを確認するとheadに読み込んだフォントのコードが記述されているので、そちらからペーストするのが早いかもしれません。

<script src="http://use.edgefonts.net/open-sans-condensed.js"></script>

Edge Reflowを活用するメリット

 RWDやモバイルサイトの制作では、実際どういうフォントサイズで閲覧可能なのか、ファーストビューは実際どこまで入るのかなど、実機で見てはじめて実感できる部分が多く、チームでの認識合わせもまばらになりがちだと思います。

 GUIベースで作ったデザインをEdge Inspectで複数の実機と同期して確認しながらモックを作成できるメリットは、チームの意識合わせや、初動プロセスのいくつかが省略可能となり、コストカットにもつながるのではないでしょうか。

 まだプレビュー版ということで細かいバグは否めませんが、特性に慣れてしまうとスケッチツールとしてラフに使う分にも有用であると考えています。エディタとの連動やより細かいCSSの設定項目、要素のバリエーションなどが増えてくれば、大分実用的なツールとなる可能性を秘めていると感じました。

 Adobe Maxの日本語サイトは、実際にEdge ReflowとDreamweaverの連携で製作されているようです(ぜひブラウザの横幅を可変してお確かめください)。ある程度親和性を保てるようにワークフローを組み立てられれば、今からでも有用なツールになるかもしれません。このツールは新しい体験を伴うため最初は少し戸惑いますが、慣れてしまえば高速に制作が進めるための良いツールになると感じます。

 本記事は、Adobe Edge ReflowのPreview版の内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Edge Reflowは現在Adobe Creative Cloudから入手でき、無償メンバーでも利用できます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5