新たなwebデザイン技術(レスポンシブ)に戦慄

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

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

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

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

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

実際に見てびっくり

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

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

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

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

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

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

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

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

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

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

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

2017年追記

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

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

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

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

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

スポンサーリンク

フォローする

関連記事

デベロッパーツール

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

英語サイト

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

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

記事を読む

富士通LIFEBOOK AH53/M

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

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

記事を読む

キースワップ

キーボードのキー機能を変更できるソフト「KeySwap」で「無変換」を「F5」に

ページの再読込をしたいとき、「F5」キーが遠くて不便でした。そこで、「KeySwap」というソフトを使い、「無変換」キーに「F5」機能を割り振ることに。

記事を読む