Emotion Wave Tech Blog

福岡にあるエモーションウェーブ株式会社のエンジニアが書いています。

こらからのWebトレンド

f:id:devew:20190320175206j:plain

ここ最近、Web業界はものすごい盛り上がりをみせ、どんどん新しいスタイルが生まれおり、 新しいトレンドを取り入れるのは必要不可欠になっています。 そこでウェブデザインのトレンドを少しまとめてみた。

1.トレンド

・モバイルファーストデザイン モバイル端末に合わせてコンテンツ考えるデザイン

・パララックスデザイン 複数のイメージ画像のスクロールするスピードを調整することで、立体的な空間を生み出す視差効果を利用したデザイン

フラットデザイン 画面に表示するボタンやメニューを、平面的な見た目にしたデザイン

ジェスチャーデザイン 名前のとおりタッチジェスチャーを意識したデザイン

・レスポンシブウェブデザイン さまざまなデバイスに対応し、ファイルを分けることなく動的に表現可能にしたデザイン

2.今後の動向

HTML5、CSS3の登場で今後はFlashSilverlightJavaは衰退しレスポンシブが主流になってくる。 さらに多すぎるページや文字が多いページは時代遅れのものとなり、ページ容量が減少していくと思われる。 これは、Webフォントを利用したり、モバイルデバイスの帯域制限による、Webページの軽量化によるものである。

3.実践

レスポンシブでは必須となる手法を少し紹介します。

HTML5 今までJavascriptで行っていた複雑な処理が簡単に出来て、HTMLのみでより構造的にスッキリ書ける。 また、最近では新たにtamplateタグが使用できるようになり、レイアウトを切り替えることが可能になっています。

CSSレイアウト 今まで主流だったテーブルレイアウトとは異なり、divタグを使用しレイアウトを構成するもの。 これにより、レイアウトの変更を柔軟にしファイル容量を減少させることが可能になる。 ただ、これはCSSの知識が求められ、少しでも間違うとレイアウトが崩れてしまう恐れがある。

あと、CSSもレスポンシブに対応することが可能でたとえば「Media Queries」を使用することで 数値で指定した画面サイズなどの細かな条件に応じて、適用するスタイルを振り分けられる。

@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用するスタイル */
   div#sidebar { width: 100%; }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
   div#sidebar { width: 240px }
}

詳細はとてもたくさんの事例が載っているのでググッてください!!