カテゴリー別アーカイブ: UI/UX

レスポンシブデザインとページサイズとvisibility:hiddenについて

Web制作の現場において、画像やリッチコンテンツのサイズなどは気にされることが多いのですが、ブロードバンドの普及によって、Webページ自体のサイズが気にされることはあまりないかもしれません。

数キロバイトの違いは、もはやあまり気にする必要はないでしょうが、最近ではプラットフォームの多様化からレスポンシブデザインなる同一コンテンツを利用したサイト設計なども顕著になってきました。

ただレスポンシブデザインを採用するにあたってどうしても、気になっていたのが、Webページ単体の文章量やサイズについて。

例えばインラインで画像を読み込んだりしていた場合、レスポンシブデザインではページ容量が変わることを目的としていた場合、例えばvisibility:hiddenなどで非表示にしても、実際のサイズ容量は変わりません。
ちなみにhead内の記述やコメント、css指定も当然加算されます。

ということはどういうことかというと、レスポンシブデザインは非常に手間がかかるわりには、成果に見合いづらい面があるということです。

確かにフラットデザインやグリッドデザインなどの矩形と背景色だけの淡泊なサイトであれば、有効度は高いわけですが、結局、各端末ごとのcssファイルを都度用意する可能性があり、画像をふんだんに使用しているサイトやJQueryを利用したりして、直接imgタグで画像を読み込んでいる場合などは、逆にモバイル端末などに対してよろしくないWebページになっていきます。

なので、レスポンシブデザインを使用する場合は、画像などの重たいサイズのものはすべてCSSで切り替える必要があり、ソースコード上にはインラインでパソコン用サイト向けに記述されたページサイズが大きくなる記述は、極力皆無なソース構造になっていきます。

たしかに、PHPやJavascriptなどでアクセスするプラットフォームによって実行される記述などを制御することで、回避できますが、管理や表示確認作業が複雑化して、静的サイトよりも動的な特性が強くなるため、参照元を同一化するということは理想的ではあるけれども、より簡素なWebサイトのみに適しているのではないだろうか。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。

Windows8-Style UIとは-Modern UI

あるWebサービスを利用しようとしたら、

『本コンテンツはWindows 8-style UIに対応していないため、デスクトップでのご利用を推奨しております。
もしWindows 8-style UIでご利用中の方は、画面右下の「ページツール(スパナマークのアイコン)」より「デスクトップで表示する」を選択いただくことでデスクトップに切り替えることができます。』

と表示された。

Yahoo! JAPANヘルプセンターには以下のような記述が

『Windows8で映像などが正しく表示されない(Windows 8-style UIでご利用の場合)
Windows8のWindows 8-style UIをご利用の場合、Yahoo! JAPAN内の一部のコンテンツ(または、他社の映像コンテンツなど)が対応していないため、正しく表示されないことがあります。
その場合は、「デスクトップ」での利用を推奨しています。
画面右下の「ページツール(スパナマークのアイコン)」で「デスクトップで表示する」を選択し、「デスクトップ」に切り換えてご利用ください。 』

Windows8 Style UIとは、マイクロソフトが作り出したユーザーインターフェースで、もともとのコードネームは「Metro」とされていたが、商標上の問題からか、2012年8月から「Modern」とされている。

Modern UIは、スイスのクラシカルなデザインを基にされていて、Webサイトに類似するデザインが使用されることがあるが、そのようなデザインはフラットデザインといわれる。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。