第1回webのひみつ(レスポンシブルwebデザインとは?)

初めまして。
インターンシップ生の明瀨と申します。

今の世の中、色々な企業や個人で様々なウェブページのデザインのレイアウトがあります。
今回から私がその色々な方が作ってきたウェブページの中にどのようなレイアウトがあるかをとり上げてそのレイアウトに関することを1個ずつどのような利点などがあるかをまとめていきたいと思っています。

まず第一回として、レスポンシブルwebデザインについてや1個目の枠があれば参考例としてフレキシブル・レイアウト(FlexibleLayout)に関することについて自分なりにまとめていきたいと思います。
(レスポンシブルwebデザインについて)
これは、PCやタブレットなどの複数の異なる画面のサイズをWebサイト表示の判断基準として、ページのレイアウトやデザインを柔軟に調整できるデザインのことを示しています。
これを制作する方法として、スマホやPCなどのデバイス対して、各自にHTMLファイルを作成していく方法が一般的な作成方法として挙げられていました。
このページを作成する上でメリットやデメリットも存在するため、そちらについてもまとめると以下のような内容が主となりました。
(メリット)
<引用始め>
・現在多くの ブラウザによってサポートされている CSS3を使用しているため、汎用的である。より多くの人に見てもらえる。
・カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。
・ HTMLを分けるモバイルサイトでは、 デバイスの数だけ HTMLを増やしていかなければならないが、レスポンシブで制作すれば HTMLファイルは同一なので管理がしやすい。修正も1つの HTMLだけでよいので、モバイルサイトは古いままといった事態を防げる。
<引用終わり>
<引用元URL>
https://ferret-plus.com/2633

(デメリット)
<引用始め>
・PC用の HTMLコードや CSSも読み込むため、表示に時間がかかる。 CSSで画面に表示しないようにしても、読み込みは行われるため、 ユーザーが待ちきれなくなる恐れがある。
・画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。
・シンプルな ページであればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。
・PCサイトのテキストや画像が多すぎる場合、スマホ ページでは文字が溢れてしまうなどレスポンシブ化は難しくなる。
<引用終わり>
<引用元URL>
https://ferret-plus.com/2633

これらが主なメリット、デメリットとなっています。
これらを通して私は、デメリットが存在しますが、携帯やPCなど様々な端末で見れる点は多くの人々に見てもらえる可能性があるため、レスポンシブルwebデザインを制作していくことは重要なものだと感じました。

次にこのデザインの一部としての参考例としてフレシキブルレイアウトについて述べたいと思いますが記事の枠が超えるため、参考画像だけを提示しておきます。次回はこれらの説明や他のレイアウトに関して取り上げていきたいと思います。

(フレシキブルレイアウト参考画像)

(引用元URL)http://liginc.co.jp/designer/archives/6154

(参考記事)
<レスポンシブルwebデザインについて>
http://liginc.co.jp/designer/archives/6154

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー