こんぱすコーチの全方位日記

依頼を受けて新しいWebサイトの構築をしています。
実は一昨年から依頼を受けていたのですが、
ヨメさんが病に斃れるという不測の事態に見舞われ、
2年経った今も、まだほとんど構築できていません。

ただし、ここまでカットオーバーを引っ張っているのは、
家の中のできごとが影響しているだけではなく、
未経験の新しいWeb技術に挑戦しているからでもあります。

その技術とは、

「1つのコンテンツで、PCでもタブレットでもスマホでも
それぞれの最適なレイアウトで表示できる」

というものです。

これを『レスポンシブルWebデザイン』といいます。

タブレットやスマホといったデバイスが爆発的に普及し、
Webサイトをそれらでアクセスする機会が多くなっています。
そんな中、従来のWebサイトのデザインは
PC上で閲覧することを前提に設計されているため、
圧倒的にディスプレイが小さいタブレットやスマホで
そういったWebページを表示させると、
文字や画像がおそろしく小さくなってしまい、
いちいちピンチで拡大しないと判読できません。

そういった不都合を無くすために、
従来はデバイスごとにWebページを作り分ける、
なんてことをしていました。

でもそれでは、修正箇所が発生した際に、
すべての同一Webページを修正せねばならず、
全然スマートじゃありません。

そこでWeb技術の発展とともに考えられたのが、
ページ中の1つ1つのコンテンツをタイル状に作り上げ、
デバイスの画面サイズに応じて
レイアウトを自動組み替えする、というもの。

写真投稿サイト『ピンタレスト』の設計思想をヒントに
考案された手法です。

日本では、この技術を用いて最も評判の高いサイトは、
NHKが運営している『NHKスタジオパーク』のWeb。

PC上でも、ブラウザの表示サイズを可変させると、
レイアウトが実に小気味よくアニメーション風に
組み替えられていくんです。

これを実現する技術が『Masonry』という名前の
JavaScriptプラグインなのですが、
そもそもJavaScriptについて疎い僕は、
この『Masonry』の使用方法で数か月間大いに悩み、
昨日などはほぼ1日、PCと格闘していました。

で、ようやくコツがつかみかけてきました。

まだリリースするまでには
第2、第3のハードルが待ち構えているでしょうが、
気負わず、しっかりと作り上げていこうと思います。

【楽天ブックスならいつでも送料無料】現場でかならず使われているWordPressデザインのメソッド... 価格：3,024円（税込、送料込）