公開：2012.06.17 / 最終更新：2013.09.17

デザインソフト

[Å] Dreamweaver CS6新機能「可変グリッドレイアウト」制作に役立つサイト/チュートリアルまとめ

こんにちは、リキッドデザインを勉強し始めたアカメ（@mk_mizuho）です❦ Dreamweaver CS6には新しく可変グリッドレイアウトという機能がつきました。どういうことかと言うと1つのソースでパソコン、タブレット、スマホの各デバイスで異なるデザインを見せられるようになったということです。使い始めの私が現段階でグリッドレイアウト制作に良さそうなサイトをまとめました。

Web制作者は知っておきたいwebサイトのレイアウト7選

» Web制作者は知っておきたいwebサイトのレイアウト7選│Design Spice

▲グリッドレイアウトを始め様々なWebサイトのレイアウトの用語を解説しているサイト。レイアウトの意味を確認するのに良い。

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

ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門

▲レスポンシブデザインを学ぶにあたって読んでおいて損はない記事の1つ。

スマホ対応の新潮流「レスポンシブWebデザイン」とは？

ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

▲レスポンシブWebデザインの基本的な作り方が書いてある。IE8以下のメディアクエリーの対応法や画像のサイズ指定の方法などが書いてある。Dreamweaver新機能とは直接関係ないが、知っている必要がある内容。

Webサイトの互換化とは – Adobe HTML5 特設サイト

▲レスポンシブなデザインにすることによってデバイスによってどう見え方が変わるのかを超簡単に説明しているサイト。

Adobe TV 可変グリッドレイアウト

可変グリッドレイアウト | Learn Dreamweaver CS6 | Adobe TV

▲Dreamweaver CS6新機能「可変グリッドレイアウト」をこれから使う人は最初に見ると良いムービー。日本語で尚且つ10分程度なので気軽な気持ちで見ることが出来るのでは？

Dreamweaver CS6で作るレスポンシブWebデザイン（約50分のロングチュートリアル）

ADC MEETUP ROUND 05 SESSION2 Dreamweaver CS6 で作るレスポンシブWebデザイン | ADC MEETUP ROUND 05 HTML5 Design Tools | Adobe TV

▲約50分のチュートリアルムービー。見応え充分。日本語なのもかなりありがたい。

サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」

サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう（4/6）：CodeZine

▲個人的には静的サイトでは使い方が1番わかったサイト。基本的使い方や効率的Dreamweaverの使い方なども記載されていた。

Adobe「可変グリッドレイアウト」機能の使い方

「可変グリッドレイアウト」機能の使い方 | ADC – Adobe Developer Connection

▲Adobe公式サイト。こちらも実際に例を使いながら使い方を説明。縦スクロールで内容が1ページに収まっているので読みやすい。

YouTube「[Dreamweaver CS6: 新機能] 可変グリッドレイアウト」（英語）

▲言語は英語であるが、やり方の説明なのであまり関係ない。一応、字幕も出る。新しいことを始める時はとりあえず情報を集めることが重要となるので、このたび掲載。

可変グリッドレイアウトデザインを見たい方は

可変グリッドレイアウト（リキッドレイアウト）のサイトやWordPressのテーマなど集めました | 52ページ | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

可変グリッドレイアウトなWebデザイン集めてみました | webOpixel

レスポンシブに関するニュース

GoogleはレスポンシブWebデザインを推奨 – F.Ko-Jiの「一秒後は未来」

その他ツール

グリッドデザインのHTML/CSSを簡単に作れるサイト「3×4 Grid Builder」 : ライフハッカー［日本版］

最後に

この先、もうすでに？パソコン用のサイトが作れるのは当たり前。タブレットやスマホに対応出来ないWebデザイナーはおさらばとなってきそうな風潮。時代に取り残されないためには常にアンテナを張っておくことは重要。且つ貼ったアンテナがキャッチしたことをどんな形であれアウトプットすることが大事なのでは？と個人的には思う。人に話すでも紙に書くでもブログに残すでも…自分の頭で考えることにより初めて自分のモノになる。果たしてグリッドデザインが良いのかは正直私にはわからないが、まずは第一歩踏み出してみる。ではではー最後まで付き合って下さりありがとうございました。@mk_mizuhoをよろしくお願いします。