Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Adobe Edge Reflowで作るレスポンシブデザイン向けプロトタイプ入門

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/02/25 14:40

 本稿では、レスポンシブWebデザイン向けのプロトタイプ作成ツールとして、「Adobe Edge Reflow CC(Preview)」の基本的な使い方を紹介します。

目次

 なお、本稿はAdobe Edge Reflow CC(プレビュー版)を元に執筆したものです。今後の開発において、機能や操作方法が変更となる場合があります。あらかじめご了承ください。

対象読者

  • レスポンシブWebデザインのブラウザで動作するプロトタイプを作りたい方
  • CSSでビジュアル要素の作成をしたい方
  • Adobe Edge Reflowの概要を知りたい方

必要な環境

 Adobe Edge Reflowは、Adobe Creative Cloudを通じて提供されており、無償メンバーシップでも利用できます。

Adobe Edge Reflowとは

 マルチデバイス対応のWeb制作テクニックの一つとして「レスポンシブWebデザイン(RWD:Responsive Web Design)」が注目されています。これは、PC、タブレット、スマートフォンなどの各デバイスに、単一のHTMLファイルで対応することができるテクニックです。

 今回紹介するAdobe Edge Reflowは、このレスポンシブWebデザイン作業を効率化するツールです。

 本稿では、簡単なプロトタイピングを作成しながら、Adobe Edge Reflowの基本的な使い方を紹介します。

レスポンシブWebデザインのワークフロー

 従来のサイト制作ワークフローでは、画面設計後、デザイナーがPhotoshopのようなグラフィックソフトで静的なデザインカンプを作成し、それを元にHTMLやCSSのコーディングをするのが一般的でした。

 しかし、レスポンシブWebデザインのサイト制作において、デバイスごとに複数のデザインカンプを作成していては、時間と手間がかかりすぎてしまい非効率です。そこで、レスポンシブWebデザインのサイト制作では、簡単なワイヤーフレームのみ作成し、後は、コーディングと検証を繰り返しながら制作を進めるのが一般的な流れとなっています。

 この方法は「Designing in the Browser」と呼ばれ、デザインカンプを作成せずに、直接ブラウザでデザインしていくという意味で使われています。早い段階でブラウザで動作するWebサイトの素案を作成することで、手戻りを抑え、各デバイスのデザインや検証を同時進行できます。

図1 Web制作ワークフローの違い
図1 Web制作ワークフローの違い

デザインカンプとプロトタイプ

 グラフィカルなデザインカンプは、クライアントに提示する説得材料として有効ですが、静的なデザインカンプでは実際の動きを確認することはできません。レスポンシブWebデザインでは、従来のデザインカンプに代わるものとして、プロトタイプを作成し、画面サイズの異なる各デバイスに応じてレイアウトが変化する様子を検証したり、クライアントにプレゼンしたりするのが一般的になってきました。

 プロトタイプとは、ボタンのマウスオーバーやプレス時それぞれの状態の見た目の変化や、ナビゲーションによるページ遷移など、操作感やサイト内の動線を確認できる状態のものです。操作感を確認することがプロトタイプの主たる目的のため、グラフィカルなデザインは施されないケースも多々あります。このプロトタイプを作るのに便利なツールがAdobe Edge Reflowです。

他のWeb制作ツールとの違い

 Web制作の業界標準ツールとしては、AdobeのDreamweaverがありますが、これは高性能なWebオーサリングツールです。完成したWebページを作るのに適しています。対して、Adobe Edge Reflowは、実際のWebページを作るのではなく、あくまでもブラウザで動作するプロトタイプの作成に適しています。画面サイズの異なる各デバイスで、どのように表示されるかを確認しながらデザイン作業を進めることができます。Edge Reflowには、Dreamweaverのようなコードを記述する機能はありませんが、その後の行程でデザインを実装するために、Edge ReflowからCSSコードの抽出ができるようになっています。

 同じくAdobeのFireworksもプロトタイプやワイヤーフレームの作成に適したツールの一つですが、これはグラフィックベースのデザインツールです。作成したボタンやアニメーションなどは画像として書き出されます。一方のEdge Reflowは、CSSベースのデザインツールです。レイアウトやボタンなどのパーツはCSSベースでデザインされます。後述のブレークポイントを定義することで、各デバイスでの挙動を確認しながらデザインできます。


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

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

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