先週、店のHPをリニューアルしました。
リニューアルの目的は、完全レスポンシブ対応！
レスポンシブ対応って何のこっちゃ分からん人もいると思います。
アメブロなどのブログシステムを使っている方には関係のない話ですが、中には興味がある人がいるかもしれないので説明してみます。
レスポンシブ対応とは？
これは、スマホ・タブレット・パソコンと、どのデバイスで見ても(ほぼ)同じデザインで見られるように対応することです。
スマホ・タブレットとパソコンは操作系が違い、3種それぞれ、画面のサイズが違います。
ホームページを一から作ったことのある方なら分かると思いますが、一つのHTMLだけで3つの機器に対応させるのは大変なんです。
今回のリニューアル前のHPを作った2012年当時も、自分なりに調べて工夫して、パソコンとスマホの両方で見やすくなるように設計しました。
その方法は、ブレイクポイントというものを設定して、モバイル用とパソコン用2種類のCSSを書いていました。
この作業には、とんでもない時間を費やすことになり、仕事の合間の作業だったので、数か月を要することになりました。
それから年月が経ち、ワタシのような素人が使えそうなBoostrapというWEBフレームワークがあることを知りまして、一昨年、もう一つ管理しているHPのリニューアル作業を行いました。
Boostrapを使えば簡単にレスポンシブ対応のHPが作れるという情報をあてにして作業を進めたものの、まったく簡単ではなく、HP作りの新しい言語を一つ覚えるような大きな山がありました。
その山をヘトヘトになり上った結果、最低限の知識を頭に入れたので、今回、店のHPのリニューアルを行いました。
しかし、この手のものには必ずあるバージョンアップにより、覚えることが多くなっていて困りました(^▽^;)
では、パソコンとスマホでどのように表示されるのか、比べてみましょう。
旧ホームページのパソコンサイト
旧ホームページのスマホサイト
ご覧の通り、スマホページはデザインに問題がありました。
これを何とかしようとしても、一筋縄ではいきませんでした。
一方を修正すると、他方のデザインが崩れることの繰り返しで、そのうちさじを投げてしまったのです。
で、今回、新たに作ったHPはコチラです。
新ホームページのパソコンサイト
新ホームページのスマホサイト
スマホ用は、右上にハンバーガーメニューが表示され、スッキリしたデザインになりました。
このように、モバイルサイトとパソコンサイト、サイズの違うデバイスでも(ほぼ)同じようにデザインされるようにするのがレスポンシブ化というのです。
2001年にレスポンシブの概念はなかった
レスポンシブという概念は、ワタシがHP作り始めた2001年頃にはありませんでした。
のちにガラケー対応がありましたが、これは日本だけの発展だったので、世界的に広がることなく、そろそろ姿を消すことになりそうです。
ガラケーの次に出てきたスマホ。
スマホが出てきた当初、HP制作会社も苦労したようで、その過渡期は、スマホで見ているのにパソコン対応のデザインしか表示されず、見にくいものがたくさんありました。
今でも調べ物をしていたら見かけることがありますよね。
今でこそ大手企業のHPはスマホ対応となっていますが、一部上場企業でも、ずいぶん遅れていたことがあったのも事実です。
ホームページとブログの違い
最後にHPとブログの違いを書いておきましょう。
ブログは『動的ページ』
HP(ホームページ)は『静的ページ』
という言われ方をします。
正確な意味ではないものの、『動的ページ』、『静的ページ』というものは、アメブロなどのトップページと、HPのトップページの違いを頭に浮かべると、言葉の意味を理解してもらえるかもしれません。
多くのブログでは、トップページには新しい記事が出てくるはずです。
一方のHPのトップには、(内容を変えない限り)いつも同じ内容が表示されます。
こんなことから、ブログが【動】でホームページが【静】と言われているようです。
どちらが良いというものではなく、それぞれの役割分担があるので、それに沿った作り方をしていくのがベストなんだとワタシは考えています。
しかし、アメブロやFC2などのブログサービスではなく、ワタシも使っている『ワードプレス』では、【動】と【静】の両方のページを作ることが出来るので、最近は境目と言いますか、区別がつきにくくなってきました。
このブログを書く前に、店のHPを作り始めたのはいつだったのか調べてみました。
確実なことは分からないのですが、2001年に書いたものが出てきたので、遅くとも2001年には始めていたようです。
今年が2019年なので、18年前に取り組んでいることになります。
こののち、あと18年経ったら、今は無い、まったく新しいデバイスが出来ているのでしょうね。
以上
東大阪の理容室
オーパス21の前田でした
コメント