マーカーネット株式会社

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

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

関連記事

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ https://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …