Web Designing 2013年3月号に執筆しました

Web Designing（マイナビ）2013年3月号の特集記事「レスポンシブWebデザイン テンプレートレシピ」に執筆させていただきました。1年半ぶりの執筆です・・・

イントロの「レスポンシブWebデザインという潮流」とそれに続く「オーソドックスな2カラム構成のレイアウト」の計8ページほど書いています。

記事の内容は、レスポンシブWebデザインのテンプレートを作成し、その詳細を解説するというものです。基本テンプレートと合わせ、8種類用意したので、制作の際にいろいろ活用できるかと思います。

オーソドックスな2カラム構成のレイアウト

• 画面幅いっぱいのメインビジュアルをスライダにする1
• 画面幅いっぱいのメインビジュアルをスライダにする2
• ナビゲーションを開閉式にする1
• ナビゲーションを開閉式にする2
• ナビゲーションを開閉式にする3
• 下層ページとして使いやすい3カラム構成のレイアウト
• レスポンシブWebデザイン対応の表組み

私が執筆した部分以外にも、参考になりそうな記事やテンプレートがたくさん載っています。

画像ギャラリー向けのグリッドレイアウト

• グリッドレイアウトを縦並びのリストにする
• 左サイドバーにメニューを付加する
• メニューをセレクトボックスにする
• 「Fluid Grid」「Fluid Image」を使ったレイアウト

「モバイルファースト」で考えるシングルカラムデザイン

• グローバルナビをスライドイン表示にする
• 無限スクロールでコンテンツを読み込む

レスポンシブWebデザインは、制作に手間がかかることがデメリットのひとつとして挙げられます。WordpressテーマやBootstrapといったレスポンシブWebデザイン対応のテンプレートやフレームワークがその解決の糸口になると考えていたのですが、ちょうどそのときにWeb Designingさんから企画のお話しをいただきました。

レスポンシブWebデザインをこれから勉強しようという方にも、実際に構築しようという方にも参考になると思います。

ぜひ読んでみてください。