sample2

レスポンシブなグリッドレイアウトのサイト20選


グリッドレイアウトとは、要素ごとや全体を線引して揃えるデザインのことです。
グリッドレイアウトと聞くと、まず最も有名なのは Bootstrap でしょう。
このグリッドレイアウトを用いることでより見やすいウェブサイトが実現できるとして注目されています。
そこで、今回はレスポンシブなグリッドレイアウトのサイト20サイトです。

 

IMJ Group / 株式会社アイ・エム・ジェイ

http://www.imjp.co.jp/

http://www.imjp.co.jp/

各項目の大きさを変えることでそれぞれを程よく目立たせている。
右サイドにメニューがあるのも Good。
使用されている画像は様々ですが、統一感がある。

 

キユーピー マヨネーズとその仲間たち

http://www.kewpie.co.jp/mayonnaise/

http://www.kewpie.co.jp/mayonnaise/

背景は薄いマヨネーズの色、
項目にカーソルを合わせるとマヨネーズ容器の蓋の赤色が表示されるなど、
Web サイトのデザインと商品のデザインの統一化が図られています。

 

Shinya Inamura – Web & Design & Illustration

http://shinyainamura.com/

http://shinyainamura.com/

画面いっぱいに項目を表示するタイプのデザイン。
左側のメニュー項目の幅がちょうどよく、
広告のタグのサイズに合っているので違和感がない。

 

アマナグループ

http://amana.jp/

http://amana.jp/

すべての項目において、四角形の角が取られているデザイン。
ページ背景色と項目背景色の色の違いがはっきりしており、見やすい。
画面左のメニューで表示方法を切り替えられる。

 

山根木材株式会社 福岡支店

http://www.yamanefukuoka.com/

http://www.yamanefukuoka.com/

各項目ごとの背景色が異なっているデザイン。
ただし、マウスオーバー時の色は統一されている。
四角で囲われた項目が並ぶ中、丸で囲まれた項目がアクセントになっている。

 

Super me inc.

http://superme.jp/

http://superme.jp/

各項目の大きさが異なっているデザイン。
一番大きな項目(スクリーンショット上は「GENTEMSTICK」の部分)は
閲覧ユーザーの注目を集めているだろう。

 

CONDENSE Inc.

condense-c.com

http://condense-c.com

タイルのように並ぶのはこの会社の実績などが表示されている。
一見統一感がなく、見づらいように見えるが
マウスオーバー時のアニメーションが優しい。

 

quadro

http://rmd.quadro-web.com/

http://rmd.quadro-web.com/

各項目の表示サイズは2種類。
項目とページの背景色は統一されていて、清潔感がある。
「all」「mens」などのタブによって表示を切り替える仕組みはスムーズでとても良い。

 

YOU CHOOSE

http://youchoose.camelstudio.jp/

http://youchoose.camelstudio.jp/

一見、すべての項目が正方形で囲われていると思われるが、
2つで1つの内容である場合がほとんどである。
背景色と各項目のジャケットの絵面がマッチしていて見やすい。

 

CHECK IT OR KYOTO

http://www.checkitorgo.com/kyoto/

http://www.checkitorgo.com/kyoto/

各項目によってオブジェクトのサイズが異なっている。
それによって見づらいかと思いきや、
「タイトル」「写真」「説明」「リンク」ですべて統一されているのでわかりやすい。

 

Concept Conception*

http://www.conceptconception.com/

http://www.conceptconception.com/

各項目のサイズは同じだが、一番トップの項目のサイズを調節することで
段違いに見せており、ただの碁盤の目のようなデザインにはなっていない。
モノクロ表示はシンプルで見やすく、項目を引き立たせている。

 

ARCPHILIA Inc.

http://www.arcphilia.co.jp/

http://www.arcphilia.co.jp/

スクリーンショット左側のメニューに工夫あり。
大画面では左側、タブレットなどの中画面では上部、
そしてスマホなどの小画面ではメニューボタンの中にしまわれる。

 

東京 デザイン事務所 サガ

http://www.sagainc.co.jp/

http://www.sagainc.co.jp/

項目にはこの会社がデザインした製品の画像などが並んでいる。
しかし、その画像の上に様々な色を被せることで
統一感あるデザインに仕上げている。

 

THE STABLES

http://thestables.jp/

http://thestables.jp/

すべての項目において角丸五角形の切り抜き画像が表示されている。
小さい画面で表示しても大体のレイアウトに変化はなく、
PC でもスマホでも、閲覧方法に違いがない。

 

一宮西病院看護部 | 社会医療法人 杏嶺会

http://www.anzu.or.jp/ichinomiyanishi/nurse/

http://www.anzu.or.jp/ichinomiyanishi/nurse/

小さい画面でもスクリーンショット左のメニューの配置や
大きさは変わらない。隣の各項目の配置が変更になる。
項目の画像サイズが変わらないため、深く考慮する必要がなく、管理が楽。

 

DRAFT

http://draft.jp/

http://draft.jp/

縦スクロールも横スクロールもない、1ページレイアウト。
「UPDATE」をクリック・タップすることで表示されるメニューは
様々な画面サイズに対応できるようにあらかじめ小さめのレイアウトになっている。

 

Publik:

http://publik.jp/

http://publik.jp/

いろいろなカードが一覧で表示されたようなデザイン。
こちらも各項目の配置が変わることでレスポンシブに対応。
同じく項目の画像サイズが変わらないため、深く考慮する必要がない。

 

Marble.co

http://www.marble-co.net/portfolio/

http://www.marble-co.net/portfolio/

アイテムの大きさによってオブジェクトの大きさも異なっている。
並び替えでレスポンシブに対応しているデザイン。
しかし色の工夫でとても見やすい。

 

NHKスタジオパーク

http://www.nhk.or.jp/studiopark/

http://www.nhk.or.jp/studiopark/

画面サイズに合わせて、項目の配置、項目のサイズの両方が変わるデザイン。
スマホの時でも各項目にタップしやすく、
PC の時でも使用感がよくて好きになる。

 

伊藤内科医院

http://ito-naika.net/

http://ito-naika.net/

スクリーンショットでは縦4列で項目が表示されているが、
この一列の幅、これがスマホの画面と同じ幅である。
つまり幅は変わらない。1画面に表示する情報量をうまく調節している。

 

最後に

これから色々な画面サイズを持った端末が皆さんの Web サイトに訪れることになると思います。
その時に

スマホユーザー「PC のやつじゃ見づらいよ〜」

なんて言葉は聞きたくありませんよね。
今からでも遅くはないです。
上に挙げた Web サイトを参考にして自分の Web サイトをレスポンシブに対応させてみてください。

Visiter の数も上昇するはずです。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Article女性らしいテイストのサイトを作るときのコツまとめ