マーカーネット株式会社

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

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

関連記事

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …