事例9:インフォザイン

株式会社 インフォザイン

可変グリッドレイアウトは、ワンソースで、スマートフォンからデスクトップまで様々な画面サイズに対応するサイトを実現するデザイン手法だ。Dreamweaver CS6 には、新機能として、可変グリッドレイアウトを簡単に制作できる環境が搭載された。本サイトのコンテンツをベースに、可変グリッドレイアウトのサンプル制作を担当した赤澤さんと加藤さんに、実際に作業の様子や使い勝手を伺ってみた。

マルチスクリーン互換サイト制作の敷居を下げる Dreamweaver CS6

-- 可変グリッドレイアウトは始めてだったとのことですが、初めてツールを使ってどんな印象だったでしょうか?

「Dreamweaver CS6 の可変グリッドレイアウト機能は、スマートフォン・タブレット・PCの 3 種類の画面に対応するレイアウトをデザインできます。初期設定から、Div タグの挿入、配置の指定まで、ツールがサポートしてくれるので、高度な知識は不要で、直感的にほぼマウスだけでデザイン作業が行えます」(赤澤)

「自分はツール内でマウスを使って Div 領域を並べるだけでよくて、実際のレイアウトはツールが生成する CSS に任せてしまえる点が楽だなと感じました。最初は使い方が分からず少し戸惑いましたが、とりあえず一度つくってみたところ、その後は簡単にマルチスクリーン対応のサイトがつくれるようになりました」(加藤)

「可変グリッドレイアウト機能では、スマホ、タブレット、PC とビューを切り替えながら、それぞれの画面のレイアウトを指定します。最初に各画面に配置するグリッドの数を個々に指定するのですが、今回のサンプル作成にあたっては、スマホはカラム数が 1 なのでグリット数を最小の 2、PC は元のサイトの 3 カラム表示時の比率がだいたい 3:3:7 だったのでグリッド数を 13 としました。タブレット版は、記事のコンテンツを大きく見せたかったので、PC 版と同じ列数としました」(赤澤)

起動画面

Dreamweaver CS6 の可変グリッドレイアウト機能はモバイルファースト

-- 具体的にサンプルを制作した手順を説明して頂けますか?

「CS6 の可変グリッドレイアウトでは、最初にスマホ画面のレイアウトを行います。Dreamweaver CS6 から生成される CSS も、スマホ向けの CSS がデフォルトとされていますので、今回の作成ではモバイルファーストを意識してコンテンツを配置していきました」(赤澤)

「コンテンツを配置するには、まず入れ物となる Div タグを挿入します。デザインビュー内で挿入したい位置をクリックしてから、挿入パネル内の可変グリッドレイアウト専用の Div タグをクリックすると、グリッド上に Div の領域を示す四角い枠が配置されます。あとは、通常の制作と同様に Div 領域内に必要なコンテンツを配置していきます。スマホの画面は 1 カラムなので作業は単純ですが、念のためライブビューに切り替えて表示確認を行います」(加藤)

スマートフォンレイアウト画面

-- その後にタブレットと PC 用の画面レイアウトを作成したのですね?

「タブレット画面では 2 カラムの配置とし、記事を左カラムに、ナビゲーションを右カラムに配置しました。Div 領域を表すボックスは、右辺を使って左マージン、左辺を使って幅の指定ができます。その際、指定の単位はグリッドが基準となるため、グリッド数を多めにして作った方が、位置も大きさも調整はしやすいと思います」(赤澤)

「Div タグは、新しい行の先頭に置くか、一つ上の行に置くかを指定できます。その指定には、Div タグを選択すると表示されるアイコンを使います。2 つの Div 領域が横に並べられる幅になっていれば、上に置く様に指定された Div タグは、前の Div タグの右側に配置されます」(加藤)

タブレットレイアウト画面

「PC 向けの画面では、表示幅も広いので 3 カラムの配置として、各コンテンツを配置しました。ナビゲーションの横にバナーを配置しています」(赤澤)

PCレイアウト画面

レスポンシブ Web デザインが容易に実現できるが、事前の設計は必須

-- Dreamweaver CS6 の可変グリッドレイアウト機能は、実際のクライアントへの提案にも使えそうですか?

「レスポンシブデザインは、幅を % で指定するため、レイアウトごとに各コンテンツが占める幅を計算するのに手間がかかります。表示がずれた際、間違いを見つけるのも面倒です。ところが、この機能を使うとそういった作業はツールに任せられるので、簡単かつ確実に実装することができました。これまで敷居の高いイメージがあったレスポンシブデザインも、これなら提案し易くなると思います」(赤澤)

「また、この機能を使うことで、レスポンシブデザインの理解を深めることができました。可変グリッドレイアウトの制作を経験したことのない方でも、直感的な操作で基本的なテクニックを利用することができるので、まずは学習が目的でも、是非試してみることをお勧めします」(加藤)

-- 何か制作時に注意した方が良いことはありますか?

「可変グリッドレイアウトのサンプルでは、デザインの参照元としたサイトと同じレイアウトは実現できていません。これは、可変グリッドレイアウト機能の制限によるものです。 具体的には、現在の仕様では、可変グリッドレイアウトを入れ子にすることが難しいという点があります。また、途中でグリッドの数を変更できないという点も気になりました」(赤澤)

「実際には、生成されたソースコードを直接編集すれば、今回のサンプルでも、参照元のサイトとほぼ同様のレイアウトの実現が可能です。ただ、今回は新機能の紹介が目的でしたので、デザインビューだけで作業を行った状態を公開しています」(加藤)

-- これから使い始める人に、何か一言お願いします

「Dreamweaver CS6 の可変グリッドレイアウトは、非常に便利だとは思いますが、どんなサイトでも構築できるわけではないので、この機能の特性を理解した上で、事前にしっかりと設計しておくことが大事になるかと思います。レスポンシブ Web デザインの基本的な考え方は必要だと思います」(赤澤)

「様々なデバイスへの対応は、Web 制作者にとって大きな課題となっていますが、Dreamweaver のようなツールが新しいデザイン手法に対応してくれれば、制作者だけでなく、サイト訪問者や運営者みんなの利益になります。今後、更にツールが進化することで、より制作し易い環境が実現されることを期待しています」(加藤)

関連記事 「可変グリッドレイアウト」機能の使い方

  • 株式会社 インフォザイン
    WEBマーケティンググループ
    赤澤 章一

  • 株式会社 インフォザイン
    WEBマーケティンググループ
    加藤 美樹

株式会社 インフォザイン

CMSがまだ普及していなかった2001年に、CMSパッケージ販売会社としてスタートしました。現在はCMSとともにデジタル教材を中心に電子コンテンツ分野にも事業領域を拡大しています。
株式会社 インフォザイン