Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

CSSフレームワークとは

 Webサイト制作では、よく利用されるレイアウトやUIを使いやすい形でフォーマット化して配布されているものが多くあり、一般的にCSSフレームワークと呼ばれています。RWDに対応しているものも多く、グリッドシステムが採用されています。

CSSフレームワークの一例

CSSフレームワークにグリッドを合わせる

 本稿では、Edge ReflowのグリッドをThe 1140px CSS Grid System(以下cssgrid)のグリッドに合わせて設定を行っていきます。

 cssgridのブレークポイントは、シンプルに768px以下で切り分けているのみです。まずはEdge Reflowで768pxのブレークポイントを設定します。

 ブレークポイントは右上の+ボタンで追加可能です。

 cssgridのグリッドシステムでは12カラム構成、各カラムのmargin-rightが3.8%になっています。Edge Reflowのグリッドシステムではカラムごとに左右個別の余白を設定することはできないため、3.8%を割って左右に1.9%ずつ余白を持たせることにします。

 Edge Reflowでグリッドを選択するとLayoutパネルでGrid Optionsが表示され、ColumnsとGuttersの項目でそれぞれ設定が可能になります。下図はColumnsを12、Guttersを1.9%に設定した例です。

 Gutterはカラム間の余白のことです。外側にもGutterを設定したい場合は、Show Outer Gutterをオンにします。

オブジェクトを配置

 簡単なレイアウトを作ってみましょう。配置できるオブジェクトは下記の3つです。

  • ボックス
  • テキスト
  • イメージ

 ボックスはdivブロックです。headerやmoduleブロックなど、要素のまとまりはこのボックスの中に入れ子にして管理します。下図はヘッダー、グローバルナビ、メインビジュアル、3ブロックのコンテンツ、フッターのボックスを配置したものです。メインビジュアルはイメージオブジェクトで配置しています。画像はレスポンシブな状態で配置されます。


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

著者プロフィール

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

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

バックナンバー

連載:Adobe Developer Connection

もっと読む

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