MEMOPATCH

膨大なコンテンツを美しく、レスポンシブで見せているWebサイトまとめ

  • このエントリーをはてなブックマークに追加

ニュースサイトやイメージギャラリー、ブログなどの情報量やコンテンツが多いWebサイトをデザインするのは大変ではないでしょうか。日々、情報の更新があるようなWebサイトはコンテンツを整理し、かつ見やすいようにレイアウトしなければなりません。そこで今回は「25 Beautiful Content Heavy Websites」で紹介されていた中から “膨大なコンテンツを美しく、さらにレスポンシブで見せているWebサイト” をいくつかピックアップしてまとめてみました!

House

http://house.pl/
大きなメインビジュアルがまず目に入るサイト。縦長長方形のブログ記事と赤い横長の長方形のプロモーション記事で構成されています。

Monocle

http://monocle.com/
写真や各記事のエリアの大きさが異なるWebサイトですがとても整った印象があります。

Esquire

http://www.esquire.co.uk/
写真の使い方が印象的なサイトです。写真にマウスオンするとその記事の詳細が出てきたり、吹き出しが伸びて詳細が出てきます。

Polygon

http://www.polygon.com/
ゲーム情報配信サイトです。サイトトップの上部にあるフィーチャー記事はスマホから見ると横にスワイプできるようになります。

Newsweek

http://www.thedailybeast.com/newsweek.html
日本でも発行されている雑誌、NewsweekのWeb版です。サムネイルの形がオシャレです。

The Gadget Flow

http://thegadgetflow.com/
こちらはおもしろいものがたくさん売ってるECサイトです。サイトが全体的にフラットでかわいい印象です。各サムネイルをクリックすると見れるローディング画面にはロゴが使われていてとてもかわいいです。

ReadWrite

http://readwrite.com/
白が目立つスッキリとしたサイトです。サイト上部ではサムネイルを大きく見せていますが、中盤からはサムネイルが小さくなりタイトルが強調されてリスト化されています。

Google Science Fair

https://www.googlesciencefair.com/en/2013/
Googleが開催しているサイエンスコンテンストのサイト。さすがはGoogle。フラットできれいなデザインで、写真をうまく使ってコンテンツを整理しています。

UGSMAG

http://ugsmag.com/
Pinterst風なUIで無限スクロールができるWebサイト。グレーとピンクと白の色使いでまとまっています。

True Digital

http://www.truedigital.co.uk/
こちらも上と同じくPinterst風なUIで無限スクロールができるWebサイト。オレンジのキーカラーでまとまっています。

以上です!
今回ご紹介したWebサイトのほとんどが文字より写真をたくさん使っている印象でした!写真で表示されることでコンテンツが大量にあっても圧迫感がなく、整理されているように見えるのでしょうか。みなさんのデザインの参考になれば幸いです!

(参考: 25 Beautiful Content Heavy Websites

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。