レスポンシブWebデザイン
レスポンシブWebデザインとは、ホームページ制作方法の一つで、
一つのHTMLファイルが、パソコン、タブレット、スマートフォンなど、画面のサイズの異なるのそれぞれの端末でアクセスした際に
それぞれに最適化されたページを表示させることができます。（ワンソース・マルチデバイス）
レスポンシブWebデザインで制作することのメリットとしては、
例えばお知らせを更新する際に、PC用ホームページとスマホ用ホームページの2つがある場合、更新作業をそれぞれ行う必要がありますが、
レスポンシブWebデザインは一つのファイル（ワンソース）で作られているので、更新作業も1か所行えば、PC用ホームページにもスマホ用ホームページにも適用されます。
しかし、良い面ばかりとは限らず、レスポンシブWebデザインで制作するためには、PC、スマホ、タブレットの3つのサイトを同時進行させるような複雑さがありますので、
綿密な計画が必要となり、実現できることの制約は多くなります。
一方で、レスポンシブWebデザインならではの表現や最新技術もどんどん開発されていますので、魅力的な表現ができる点においては、大変注目を集めています。
レスポンシブWebデザイン制作のポイント
グローバルナビの変形
レスポンシブWebデザインでサイト制作を行う際にポイントとなることの一つが、グローバルナビゲーションです。 PCサイトで表示できる横幅は、ワイドモニターなどを考慮すると、かなり横長で、1280px等となりますが、スマートフォンは縦長にした場合には320px程です。 サイズの違いもありますが、縦横比率の違いもありますので、どんなサイズに伸び縮みしても対応できるデザインにするのか？ サイズによって異なるデザインを分岐させて表示するのか？という選択肢があります。
レイアウトを分岐させる
Webデザインの中で強い印象を与えるものといえば「写真」ですが、レスポンシブWebデザインの場合は写真を上手に活用してそれぞれのデバイスで最適な写真サイズを確保したいものです。 綺麗で大きく見せたい写真が、横幅の制約のために小さくなってしまっては良さを表現しきれません。 画面サイズによって分岐させる仕様を取り入れて、スマートフォン等の小さな画面でも、見せたい写真は最大限に大きくレイアウトすることができます。
レスポンシブWebデザインサイト制作実績
制作のポイント
- タブレットおよびスマートフォンサイトの場合は、グローバルナビゲーションは右上のマークをクリックすると現れる形でコンパクトにまとめています。
- グローバルナビゲーションのメニューをクリックした際のサブメニューは、メガメニューを導入して、操作しやすい画面上部のエリアを有効活用しています。
- タイトル的なテキスト部分にはWebフォントを導入することで画面サイズが小さくなってもにじまない綺麗なフォントを再現しています。
- 情報を精査し、限られたスペースの中で必要な情報にたどり着けるように、レイアウトと動きを工夫しています。
※掲載できない実績が他にもございますので、詳しくはお気軽にお問い合わせください。
