新たなwebデザイン技術「レスポンシブ」に戦慄~画面サイズに応じてデザインが自動的に変わる

シェアする

webデザイン レスポンシブ

私はウェブデザイナーでもなんでもありませんが、自分のサイトの面倒は自分で見なければいけないので、サイトを作るのに必要な技術の情報は最低限押さえています。

(それでも、最先端のものにはまったくついていけていませんが……。必要に迫られたときにどうにかします。)

スポンサーリンク

レスポンシブとは

そんな私が最近よく目にする謎のキーワードが「レスポンシブ」。レスポンシブなデザインがどうたらこうたら、レスポンシブ対応がどうのこうの……。

レスポンシブってなんじゃらほい。ちょっと調べてみたところ……。

見る人の画面サイズに応じて、読みやすいようにデザインを自動的に切り替えていく技術のことらしい。(参考:レスポンシブwebデザインとは

実際に見てびっくり

事例として挙げられていた「3200tigers」というサイトを試しに見てみたら、ヒェ~

画面サイズを小さくしていくとそれに合わせてパッパッとデザインが切り替わって「小さい画面対応」のサイトになっていく。

↑画面サイズ1200px(デスクトップPC程度)ではこの表示だったものが……。

↑画面サイズ480px(スマートホン程度)ではこの表示に。

の、の、の、のわ~~っ。ほわ~っっ!!

ついていく必要あり?

これだったら確かに、デスクトップPCで見る人にもスマートホンで見る人にも便利だよね。で、で、でもちょっと待ってよこれどうしようオラついていかなければいけないんだろうか。

う~ん、でも……。これ、やろうとしたらけっこう大変でしょ? で、大変な思いをしてやってみた頃に時代の潮流が変わって新しいデザイン手法が出てきていたらどないするんやという話ですよ。

ガラケー向けサイトが花盛りだった過去

私がマクロビオティック羅針盤を作った2007年~2008年頃はまだまだパソコン向けサイトが主流で、携帯電話(ガラケー)向けのサイトを用意した方が良いとか、そんな話が花盛りでした。

それがたったの五年やそこらでこの変化。ウェブデザイン界は変化が早すぎるんや! といつも思います……(変化があるのは良いことですが)。

とりあえず「レスポンシブ」という考え方を知ったので、頭に入れておきます。

どういう風に実装するのかしないのか……もう少し様子を見て考えます。個人的に一番望ましいのは、スマートホンの画面サイズがデスクトップPC並になってくれることなのですが……それはないですよねえ~(笑)。それだと「タブレットPC」とかになりますもんね。

追記:レスポンシブも当たり前の世界に

上記記事を書いてから四年……。

今では、レスポンシブウェブデザインというのも当たり前になりましたよね。

グーグルが「モバイルフレンドリー(スマホで見たときにスマホのサイズに合わせた表示のサイトになっている)じゃなきゃ検索結果の順位下げるよ」って言わなければ、ここまで浸透しなかったかなとも思うのですが。

それで、サイト運営者であればわかると思いますが、現在は「SSL化」ですよね「SSL化」(泣)。「https」から始まるアドレスにしてセキュリティーを高めろってやつです。

これもねえ……なかば強制的な雰囲気がありますね。ついていくしかないんだろうなと思います。

スポンサーリンク

シェアする

フォローする

関連記事

デベロッパーツール

スマホからのブログの見た目をPCで確認できるChromeの機能が便利

先月末、当ブログをスマホ対応させました。しかし私はスマホを持っていないので、実際の見た目を確認できません。そこで活用したのがChromeの「スマホでの見た目チェック機能」!

記事を読む

Chrome(クローム)がエラーで新しい困り顔イラスト発見

Chrome(クローム)でスマホでのサイトの見た目をチェックしていたら、エラーが起きてページが表示されなくなりました。そのとき、今まで見たことのない困り顔イラストが!

記事を読む

パソコンが重たいときにChrome(クローム)を立ち上げようとしたら出てくる妙なイラストの謎を解く

スマホでのサイトの見た目をチェックしたいときに便利なブラウザChrome(クローム)。しかしこれが、パソコンが重たいと「応答がありません」となる。そこで表示される妙なイラストについて考えてみました。

記事を読む

いずれサイトを作りたいという読者さんからのメール~サイト作りの思い出

読者さんから「いずれサイトを作りたい」というメールをいただきました。サイト作りは面白いですよね。

記事を読む

自サイトに接続できない、表示もできないで全身から血の気が引く~レンタルサーバーのメンテナンスのせいだった。

サイト記事に使う画像ファイルをFTPソフトでアップロードしようとしたらエラーで接続できず。パソコンの故障を疑いましたが、結局、サーバーメンテナンスが原因でした。サイトも表示されなくて焦りました。

記事を読む

新サイト「玄米・ごぼう汁基本食健康法」オープン

新サイト完成まではその他コンテンツの更新頻度が下がることについてのお知らせ

オリジナル健康法を紹介するサイトを作成中です。そのサイトが完成するまで、ブログ更新以外のコンテンツ更新が滞ることをお知らせします。

記事を読む

コラムがボツになるとき~母に原稿を読んでもらい、反応を見る

コラム記事を書いたら、サイトにアップする前に、必ず母に読んでもらって反応を見ます。反応が思わしくなければ、書き直しか、ボツにします。

記事を読む

英語サイト

英語のウェブサイトは字が小さすぎる~フォントサイズを大きくしてもまだ小さい

英語で書かれたウェブサイトは文字が小さすぎると前から思っていたのですが、フォントサイズを変更できる英語サイト(yahoo.com)があったので大きくしてみました。しかし……。

記事を読む

ヘッドホンの耳あてスポンジが取れた~オーガニックコットンパフを貼って代用

ヘッドホンの耳あてが片方取れたので、代わりにオーガニックコットンパフをあてがいました。

記事を読む

富士通LIFEBOOK AH53/M

富士通のノートパソコンをアウトレット(未使用・未開封・旧モデル)でお得に購入【母のインターネット1】

退職した母が自由にインターネットをできるようにノートパソコンを買うことにしました。VAIO亡き今、選んだのは日本製にこだわる富士通! アウトレットでお得に買えました!

記事を読む

パナソニック ブルーレイディスクパナソニック ブルーレイディスク

パソコン内の画像をブルーレイディスクに移す~大きいサイズのままたくさん保存できて便利

デジカメで撮った写真を、サイズ縮小せず保管したい場面が増えてきました。DVDだとすぐに容量いっぱいになってしまうため、思いついたのがブルーレイディスクへの移動!

記事を読む

スタートレック

使いどころのわからない手の絵文字は、映画「スタートレック」の「ヴァルカン式挨拶」だった

サイト上で使える絵文字を提供してくれている海外サイト(フォントオーサム)に、新しい絵文字が追加されました。その中に意味のわからない手の絵文字を発見。何だこれは(笑)。と思っていたら…。

記事を読む

パソコンが重たい母にディスククリーンアップ方法伝授

母の職場のパソコンが重いというので、ディスククリーンアップの方法を教えました。

記事を読む

マウスパッドリストレスト

マウスパッドをリストレスト(クッション)つきに買い替えて、マウス操作時に手首の付け根が痛くなくなる~【母のインターネット5】

退職後、インターネットを楽しんでいる母。しかし、マウスパッドが平らなため、手首の付け根が痛いのだそう。そこで、低反発ウレタンの手首置きがついたマウスパッドを新規購入。

記事を読む

同じカテゴリの記事をもっと見るサイト作成」の記事をもっと見る
運営者紹介

健康探究ブログ」運営者のです。

生まれつき「卵、肉、牛乳」の食物アレルギー持ちでアトピー性皮膚炎だったため除去食や自然派の食材で育ちました。

ですから食べたものレビューは基本的に自然派・無添加系のものが多いです。

買ったものレビューは自分が実際に選んで購入して使ってみた感想を紹介しています。

お勧めできないと思ったものは記事にしていません。

読んで下さった方に必ず何かしらのプラスがあるようにという志で記事を書いています。

サイト開設15周年を迎えました。

北海道旭川市在住。お茶の水女子大学卒業。

中学・高等学校教諭一種免許状(国語科)所持。

管理人のプロフィール詳細
運営サイト一覧

マクロビオティック羅針盤マクロビオティック羅針盤…マクロビオティックの理論・レシピ

玄米・ごぼう汁基本食健康法玄米・ごぼう汁基本食健康法…マクロビオティック卒業後に確立したオリジナル健康法

大相撲春夏秋冬大相撲春夏秋冬…遠藤関の取り組みを中心に応援

自宅浪人の夜明け自宅浪人の夜明け…自宅浪人を成功させるためのヒント集

金沢・福井旅行記金沢・福井旅行記…平泉寺白山神社参拝を中心にした旅行記

伊勢神宮 御垣内特別参拝の旅伊勢神宮 御垣内特別参拝の旅…伊勢神宮参拝を中心に、ホテル、グルメ紹介

北の極上グルメ北の極上グルメ…道北の禁煙レストランレビュー

アニメときどき映画…進撃の巨人、鬼滅の刃等のレビュー