SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブデザインのレイアウトパターンと実装方法

こんにちは、レスポンシブデザインに代わる開発手法を提供するJSライブラリ「alter.js」開発チームの田中です。

Webサイトをレスポンシブで制作する際に参考になるレイアウトの考え方や参考サイトをまとめました。

レスポンシブデザインについてあまり知らない方やレスポンシブの実装パターンを増やしたい方は是非参考にしてみてください。

レイアウトの基本的な考え方が分かるサイト

レスポンシブウェブデザインパターン

google

https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ja

Googleが公開しているドキュメントでレスポンシブのレイアウトパターンについて紹介しています。レスポンシブレイアウトをMostly Fluid、Column drop、Layout shifter、Tiny tweaks、Off canvasの5つのカテゴリに分けて説明しています。

レイアウトの基礎的なパターンが書かれていますので、まだ目を通していない方はぜひ参考にしてみてください。

5つのパターンのデモを試すことが出来たりソースが公開されていますので、今まで知らなかったパターンがある場合は試してみると理解が深まります。

レイアウトの実装方法が分かるサイト

Responsivedesign.is

ResponsiveWebDesign

https://responsivedesign.is/patterns/

レスポンシブデザインのレイアウトパターンをいくつか紹介しています。

Googleが公開しているドキュメントでも紹介があった5つのパターンについても説明しており、より実践的な内容となっていますので詳しく知りたい方は参考にしてみてください。

その他にもカレンダーのレイアウトパターンやデータテーブルのレイアウトパターンなど他にはあまりないものが紹介されています。

Responsive Patterns

ResponsivePatterns

https://bradfrost.github.io/this-is-responsive/patterns.html

レイアウトはもちろんナビゲーション、画像、動画、地図、テーブル、フォーム、タブ、カルーセルなどのコンポーネントのレスポンシブデザインのパターンも紹介しています。

レスポンシブのレイアウトパターンのほぼ全てがこちらで確認できるといってもよいくらい多種多様なパターンが揃っています。レスポンシブデザインについて学習中の方はぜひ参考にしてみてほしいサイトです。

他のサイトとは違い、デザインを確認する際は自身でブラウザのサイズを変更したりする必要があるので少し手間がかかるのが難点です。

レスポンシブデザインの確認方法は以下のブログ記事でも紹介していますので、分からない方は参考にしてみてください。

レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方

実際のレスポンシブデザインで作られたサイトを見てみよう

レイアウトのパターンと実装方法については、上記で紹介したサイトで参考になるものが多いかと思います。しかし、いざ構築しようと考えると悩ましいのがデザインです。

そういった方にはレスポンシブデザインで作られたWebサイトを集めたギャラリーサイトを見ることをお勧めします。

実際のサイトを見ることで、デザインのアイデアの参考になったり、よく使われるレイアウトの流行などが分かります。

まとめ

Webサイトをレスポンシブで制作する際に参考になるレイアウトを紹介しました。Webのデザインを考える際にレスポンシブではどういったレイアウトが可能なのか、これらのサイトを読んで把握しているとサイト制作の際に役に立ちます。

弊社が開発した「スマホのサイト制作。PCは自動変換 | alter.jsでは、スマートフォンサイトを作るだけで自動でPCサイトに変換してくれます。

Page Top