シブる
- 2014/1/9
- WEBデザイン
- この記事は約3分で読めます。
こんにちは。
今日は「レスポンシブサイト」について発信します。
– – – – – – – – – – – – – – – – – – – – – – – –
「レスポンシブサイト」とは、ウィンドウサイズ(基本的には)によって
レイアウト等が最適化されるサイトのことを指します。
サイトの横幅等が可変の「リキッドデザイン」に近いのかな?と思うと、
全然違っていて、横幅だけでなく、
コンテンツの順番や文字のサイズ、画像の表示非表示など、
サイト全体が環境に最適化されます。
画像のファイルサイズに気をつけないと、スマホでの閲覧時、読み込みに時間がかかる。
制作の難易度が高くなる等、
リスク(?)もありますが、
サイトメンテナンスが楽になる、SEOに有利など、間違いなく魅力的な技術です。
そんな「レスポンシブサイト」の中で、特に魅力的なサイトをピックアップします。
.
※以下のピックアップサイトを開いてみたら、ウィンドウのサイズを狭くしてみてください。
サイトが変化します。
.
目次
ステキなレスポンシブサイト
.
首相官邸ホームページ
天下の「首相官邸ホームページ」もレスポンシブ!
さすが。
.
女性のためのおひるねカフェcorne(コロネ)
オーソドックスなレスポンシブっぷりですが、サイトが めっさカワイイ。
.
F-career
http://fashion-career.jp/
3色のサークルの変化が面白い。というかコーディング大変そう。
どうやって実現しているのか気になる。
.
SAEY HEATING JAPAN
「ヒストリー」の4つのサークル、線でつながっていますが、レイアウトが変わっても線でつながったまま、というのは地味にコーディング大変かと思う。気になる。
.
THE STABLES
「家の形」に徹底的にこだわっているのが面白い。
.
スルガ銀行ANA支店
http://www.surugabank.co.jp/ana/
デザイン(要素の配置の仕方)が大胆。かつ大胆なままでスマホに最適化できている。
レスポンシブデザインでは、コーディングのことを考えて、消極的なデザインになりがちですが、
こういった成功例はとても参考になります。
.
パペティエール
スマホ版ではロゴの可愛らしさが より引き立ちますね。
また、サイト最下部のヤギが効いてます。
.
株式会社アジタス
http://azitas.co.jp/recruit2014/
CSSだけでなくJavaScriptでブロックを並べ替えていますね。
めちゃくちゃカワイイ。
.
– – – – – – – – – – – – – – – – – – – – – – – –
それでは またー。