ネットスクール・サイトをスマホ対応に改造しました

レスポンシブ・ウェブデザインの概念で、私のサイトを、スマートフォンでも見やすいサイトに改造しました。レスポンシブ・ウェブとは見る側のメディアの特性(主にモニターの横幅のサイズ)に応じて、レイアウトや写真の大きさ、情報量を調整できるサイトの事です。

スマホで、PC向けに作られたサイトを見ると、やたら小さくて、拡大・縮小・スクロールを繰り返さないと見られないですよね。ですが、この改造をして、スマホでも、ほぼこの操作をしなくても見られるようにしました。

私は「ステンドグラス達風」という、いわゆるメイン・サイトとは別に、「ネットスクール達風」という無料ステンドグラス教室サイトを運営していますが、今回改造したのは、後者です。ステンドグラスを作る時、手元にスマホを置いて、サイトを見ながら作業するというシチュエーションが、これからどんどん増えていくと予想したからです。現に、弊サイトのアクセス解析を見ると、iphoneなどのスマホからアクセスしている方が10%を超えています。

レスポンシブ・ウェブデザインは、サイトを閲覧しているメディアに応じて、CSSを振り分ける技術で、HTMLファイルは1個(共通)で済むのが特徴です。ですが、専門的なことは割愛します。私の場合、未だにWindowsのメモ帳でタグ打ちしてサイトをこしらえているので、数百ページに及ぶサイトの改造は難儀でした。と言っても、サイト制作は最大の趣味なんですが。

で、出来上がったトップ画面が以下です。私は、Android2しかもっていないので,テストが不十分です。もし、なにか不具合をみつけましたら、是非教えてください。現在、分かっている問題点は、会員専用コンテンツ内の動画がAndroid2では見られないということです。これは現時点では原理上、簡単には治らないそうです。

ネットスクール達風 http://www.tappu.com/ns/index.html

PCで見たトップページ

PCで見た時のトップページ。横3列レイアウトで、表のような目次も表示されています。

スマホで見た時のトップページ

スマホで見た時のトップページ。幅390pxに固定し、縦1列表示、目次も非表示になります。

ブログのランキングに参加しています。ぜひワン・クリックお願いします(励みになりますので)。
にほんブログ村 美術ブログ ガラス工芸へにほんブログ村

コメントは受け付けていません。