シブる

こんにちは。

今日は「レスポンシブサイト」について発信します。

– – – – – – – – – – – – – – – – – – – – – – – –

「レスポンシブサイト」とは、ウィンドウサイズ(基本的には)によって
レイアウト等が最適化されるサイトのことを指します。

サイトの横幅等が可変の「リキッドデザイン」に近いのかな?と思うと、
全然違っていて、横幅だけでなく、
コンテンツの順番や文字のサイズ、画像の表示非表示など、
サイト全体が環境に最適化されます。

画像のファイルサイズに気をつけないと、スマホでの閲覧時、読み込みに時間がかかる。
制作の難易度が高くなる等、
リスク(?)もありますが、

サイトメンテナンスが楽になる、SEOに有利など、間違いなく魅力的な技術です。

そんな「レスポンシブサイト」の中で、特に魅力的なサイトをピックアップします。

.

※以下のピックアップサイトを開いてみたら、ウィンドウのサイズを狭くしてみてください。
サイトが変化します。

.

.

首相官邸ホームページ

http://www.kantei.go.jp/

首相官邸ホームページ_ 首相官邸ホームページ(1)

天下の「首相官邸ホームページ」もレスポンシブ!
さすが。
.

女性のためのおひるねカフェcorne(コロネ)

http://www.corne.jp/

女性のためのおひるねカフェcorne(コロネ)(1)_ 女性のためのおひるねカフェcorne(コロネ)

オーソドックスなレスポンシブっぷりですが、サイトが めっさカワイイ。
.

F-career

http://fashion-career.jp/

F-career -新潟からファッションで夢をつかむ -_ F-career -新潟からファッションで夢をつかむ -(1)

3色のサークルの変化が面白い。というかコーディング大変そう。
どうやって実現しているのか気になる。
.

SAEY HEATING JAPAN

http://saeyheating.jp/

SAEY HEATING JAPAN_ SAEY HEATING JAPAN(1)

「ヒストリー」の4つのサークル、線でつながっていますが、レイアウトが変わっても線でつながったまま、というのは地味にコーディング大変かと思う。気になる。
.

THE STABLES

http://thestables.jp/

THE STABLES ステーブルズ(1)_ THE STABLES ステーブルズ

「家の形」に徹底的にこだわっているのが面白い。
.

スルガ銀行ANA支店

http://www.surugabank.co.jp/ana/

スルガ銀行ANA支店(1)_ スルガ銀行ANA支店

デザイン(要素の配置の仕方)が大胆。かつ大胆なままでスマホに最適化できている。
レスポンシブデザインでは、コーディングのことを考えて、消極的なデザインになりがちですが、
こういった成功例はとても参考になります。
.

パペティエール

http://papeterie-kamiya.com/

パペティエール - 紙の仕立て屋さん(1)_ パペティエール - 紙の仕立て屋さん

スマホ版ではロゴの可愛らしさが より引き立ちますね。
また、サイト最下部のヤギが効いてます。
.

株式会社アジタス

http://azitas.co.jp/recruit2014/

株式会社アジタス採用サイト2014・2015_ 株式会社アジタス採用サイト2014・2015(1)

CSSだけでなくJavaScriptでブロックを並べ替えていますね。
めちゃくちゃカワイイ。
.

– – – – – – – – – – – – – – – – – – – – – – – –

それでは またー。

The following two tabs change content below.
Macbee

Macbee

Macbee

最新記事 by Macbee (全て見る)

関連記事

コメントは利用できません。

ピックアップ記事

  1. 2016-10-5

    毎回気になるテレビ朝日「仮面ライダー」の新ヒロイン!!!今回は今後期待のあの子!!!

    出典:http://www.tv-asahi.co.jp/ex-aid/  【テレビ朝日「仮面ライダ…

ピックアップ記事

  1. 2016-9-28

    アレンジ豊富!自宅で簡単おいしい!ジュースのような日本酒サングリア♪美肌効果も◎

    果物の季節がやってきました! 昨年ブームになった日本酒サングリア。 今年も梨だけでなく様々なフル…

ピックアップ記事

  1. 2016-11-8

    女性に嬉しい♪冷え性、生理痛にも効く、万能乾燥生姜の効果と簡単レシピ

    生姜好きガンボです!! でも生姜って買っても1個使い切るのに時間がかかりませんか? 特に1人暮ら…
ページ上部へ戻る
Top