HPをスマートフォンに対応させる

最近、AndroidやiPhone、iPadなどのスマートフォンやタブレット端末が普及してきてますね。
それに伴い、それ専用のホームページを作成したり調整しなければならない需要が増えてきています。
レスポンシブWebデザインという選択肢が、別途携帯サイトやスマートフォン用に作られたHTMLではなく、パソコン用のHTML1つと任意の数のCSSだけで端末が変わってもデザインが最適化されたホームページを見ることができます。

そんな中、学習・独習や効率化を図る用途に最適なのが、「レスポンシブ・ウェブデザイン」に対応した、フリーのサイトテンプレートです。
書籍とWebから情報を収集していますが、あまりコレといったパンチの聞いた結果にヒットしていません。

かろうじて購入した書籍は、レスポンシブ・ウェブデザインについてなぞってくれた程度で、まぁ何とか基本的なところは把握できている感じです。
そんな中、海外のサイトですが、フリーのサイトテンプレートを配布しているサイトを見つけました。

 

35 Free and Responsive Website Templates

そもそも、「レスポンシブWEBデザイン」って？

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。
ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。

---

出典ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門

 

実際に画面で確認でき、デモページにて体感できるのがイイカンジです。
こういったフリーのサイトテンプレートを活用する上で気をつけたいのは、そのままをベースに変更作成していくと、着せ替え人形の如く、型にはまった面白みのないものが出来上がります。こういったやり方が間違っているというわけではないけれど、せっかくだからソースコードなどを見比べて参考にし、自分のオリジナルのデザインに反映させていきたいものです。

 

↓↓JazzyなAfro-Blueです♪！！(ﾟ∀ﾟ)
Madlib – Slim’s Return

 

Editor’s Note

5月に入って間もないのに、案件の前倒しで忙しくさせてもらっています。
先月中盤頃から、ホームページからお問い合わせをいただいており、徐々に個人事業者としてのリアルな手応えを感じています。
ホームページの新規立ち上げからリニューアル、販売促進のお手伝い、そして当社イチオシの営業代行/ディレクション代行まで、皆様のニーズに合わせたサポートを格安にてご提供させて頂いております。
お気軽に当ブログのフォーム、またはオフィシャルサイトよりご相談・お問い合わせ下さい。
さて、明日からGW後半戦です。
やり残しの無いよう、キッチリカッチリと進めていきましょう。