SHOEISHA iD

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

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

Adobe Developer Connection(AD)

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

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

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

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

レスポンシブWebデザインとは

 レスポンシブWebデザイン(以下RWD)は、Webサイトを多様化するデバイスに対応する術として注目を集めている制作手法です。閲覧環境のサイズごとに表示を切り替える事が可能で、ワンソースのHTMLでマルチデバイスのソースを管理することができるため、多くのサイトで導入がはじまっています。

レスポンシブWebデザインの特徴

 RWDではCSS3のMediaQueriesという技術を利用し、解像度やサイズごとに適用するCSSを切り替えることで、閲覧環境ごとに表示の切り替えができます。

 具体的には下記のように、CSSファイル上でブレークポイントと呼ばれる解像度やサイズごとの分岐点を設定し、その中に個別のスタイルを記述していきます。下記は480px以下の閲覧環境のための記述例です。

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0;
    }
}

 このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。

レスポンシブWebデザインのメリット・デメリット

 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。

 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。

RWDのメリット

  • デバイスごとに切り分けず1つのHTMLファイルで管理可能
  • スタイルを共有してテイストの統一性をはかりやすい
  • リダイレクト処理が不要
  • URLが統一される
  • サイズの範囲で決めるためデバイスの多様化への対応が容易

RWDのデメリット

  • 大きい容量の画像がモバイルでも読み込まれてしまう
  • デスクトップサイトの構成に影響されてしまう
  • 共有しているスタイルの変更の影響を受けやすい

Adobe Edge Reflowとは

 こうしたRWDやインタラクティブなWebサイトのニーズが高まる中、ここ数年でWeb制作の手法は大きな転換期を迎えています。静的画像でデザインをして確認してもらうというワークフローでは意思疎通も難しく、あとになって認識違いのトラブルを起こしやすいと思います。

 Edge Reflowは直感的な操作と細かい数値調整を組み合わせた、RWD向けプロトタイピングツールです。現在プレビュー版がリリースされたばかりですが、モックアップ作成ツールとして申し分ない機能を備えています。高速にプロトタイピングを行うことによって、初動での認識合わせはもちろん、プロジェクトの指針共有も容易にできます。

 Edge Reflowの主な特徴として下記のようなものがあります。

  • GUIで直感的にdivブロック、テキスト、画像要素の配置が行える
  • プロパティパネルで細かいCSSの調整が可能
  • 柔軟なグリッド調整が可能
  • モジュールごとにCSSスニペットが生成される
  • 任意の幅でMediaQueriesのブレークポイントを設定可能
  • ブレークポイントごとの要素の表示非表示が可能
  • Adobe Edge Inspectとのリアルタイム連携が可能
  • Adobe Edge Web Fontsとの連携が可能
  • モバイルファーストかデスクトップファーストかの両アプローチに対応(後述)
Adobe Edge Reflow起動時の画面
Adobe Edge Reflow起動時の画面

 まだプレビュー版ですが、モックアップ作成後のワークフローにも組み込めるような仕組みがいくつも用意されており、実際の制作との親和性が高いことが伺えます。次項ではCSSフレームワークのグリッドに合わせてreflowファイルを作成してみたいと思います。

次のページ
CSSフレームワークに合わせてプロトタイピング

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング