レスポンシブWebデザイン2

レスポンシブWebデザインについて、続きです。

 

レスポンシブWebデザインでは、以下のような動きをするのが標準的です。

http://www.starbucks.com/

スターバックス

cssのフローで各サブコンテンツの位置が変わります。

幅の割合に従って画像や文字テキストのサイズも変えます。

さらに、UIも変わります。

デスクトップでは画面トップにメニューが出ていますが、モバイルでは右上にあるアイコンをクリックしないとメニューは出ません。

また、キービジュアル画面のサブメニューも小さなボタンに変わっています。

 

そのようにUIを適切に変化させる事で、さらなる利便性を追求します。

 

そして、「モバイルファースト(Mobile First)」という考え方があり、デザイン上関連してきます。

1.GROWTH=OPPOTUNITY
一般的にスマホからのアクセスが急増。Googleマップの利用者のうちの40%がスマホなどモバイル端末からのアクセス。

2.CONSTRAINS=FOCUS
制約=集中 モバイル端末は、PCに比べてスクリーンサイズ小さいので無駄なコンテンツは削ぎ落とされます

3.CAPABILITIES=INNOVATION
機能=能力 モバイル端末の機能、たとえばモーションセンサー、端末の傾きや移動時の加速度によって表示や動作を変えられます。

 

このようなモバイルの特性から、まずモバイル端末向けに作成する方が良いという考え方です。

 

Posted in

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">