SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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から入手でき、無償メンバーでも利用できます。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

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

株式会社イノーヴWEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7012 2013/09/27 10:36

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング