マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEB制作

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

投稿日:2015年3月2日 更新日:

みなさん、こんにちは!
web初心者のKです!

この度、googleがモバイルフレンドリーな
webサイトのランクを上げるアルゴリズムの変更を発表しましたね!

http://www.itmedia.co.jp/news/articles/1502/27/news091.html

仕事柄色々な記事に目を通すように心がけていますが、
モバイルフレンドリー=レスポンシブではないにしても、
Googleがレスポンシブデザインを推奨していることから、
今後レスポンシブを要望される方は増えていくのではないかなと感じます。
そこで!本日は、素敵サイトレスポンシブの旅として、
レスポンシブサイトめぐりをしたいと思います。

まずは、こちら

01

http://responsive-jp.com/

このサイトは私がマーカネット株式会社に入社したての頃、
参考サイトとして先輩が教えてくれました!
サイズ違いで一覧になっており、とても見やすく、
サイトの特徴がわかりやすい構成になっています。

その他にも、

02

http://muuuuu.org/category/taglist/responsive

 

03

http://io3000.com/tag/responsive/

この2つは情報がよく更新されていて、
デザインの流れを掴むのにとても参考になっています。

また今回たまたま、とあるサイトで見つけた、
素敵すぎるレスポンシブデザインサイトもひとつピックアップしてご紹介。

04

http://roxik.com/cat/

とにかく押したくなる、見たくなる素敵サイトに感じました。

サイズによって変わる猫のお腹や動きから目が離せません。
サイトのトップがユーザーの心を掴むことが役割であるとするなら、
これは大成功です!がっつり心を奪われました。

さらに、その他に、このようなサイトも見つけました。

05

http://xn--u9j2hxddz1oc0072et8f.com/%E7%84%A1%E6%96%99%E7%89%88/

今はなんでも無料で本当に驚いてしましますね。
こちらはレスポンシブで使われやすい
「型」を勉強するのにはとても参考になるのではないでしょうか?

これからもたくさん良いサイトを勉強し、

よりお客さま・ユーザーに愛されるサイトづくりを目指したいと思います!

 

末筆ながら、マーカネット株式会社では、
お客さまのご要望に沿って様々なご提案をさせていただいております。
サイトの制作をご検討の方は、お気軽にこちらからご相談ください。

 

では、本日はこれにて。ドロン。

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

参考になるスマホサイト

皆さん・・・ こんばんは・・・・ webデザインを新人デザイナーKです・・・ 何故私がこんなに落ち込んでいるかというと・・・最近、5kgも太っ”#$#”$!!! ことではなく! 最近、スマホのデザイン …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …