5Gとデザインの関係

今年の春頃からテスト的に各キャリア(docomoとかsoftbankとか)が5G対応を進めていくようで、問題がなければ少なくとも年内にはすっかり5G化しているかと思います。5Gになることで、よりシームレスなコミュニケーションが実現できますし、未来的な話は既にこのブログでもご紹介させていただいています。

そこで今回は、もうちょっと短期的に変わりそうな話として、デザインの話に触れたいと思います。

地球儀

ふわふわ

流行の陰には消極策があった!?

ここ最近、サイト構築における流行であった「ワンカラム化」と「フラットデザイン」。これに関しては海外を中心に流行り出し、WordPressのテーマとしても増え、その斬新性もあってか日本でも多くのサイトで適用されていました。

しかし、もうちょっと背景を考えれば「ワンカラム化」と「フラットデザイン」の必要性は分かるはずです。まだまだ海外ではナローバンドが多く、米国も州によって通信性能は大きく異なります。日本はブロードバンド国家です(ちなみに今現在で最もブロードバンドなのは韓国ですよね)。つまり海外では「ワンカラム化」と「フラットデザイン」の背景にネガティブな要素(しかたない要素)もあったはずです。にも関わらず、流行好きな日本ではわざわざ情報を制限してまでワンカラム化してました…。私が見る限り、コミュニケーションとして情報の最大化が必要なサイトが不必要にワンカラム化してるケースもありました。

では、なぜナローバンドだとワンカラムなのか?
ワンカラムではなく、2カラム、3カラムにする場合、CSSの設定が増え、<div>タグの要素も増えます。つまり、レスポンスや表示速度に影響を及ぼします。だから通信性能が低い環境において、こうした手法は好ましくないわけです。
そして、なぜフラットデザインなのか?
画像ファイルの容量を決めるのは「画像内で使用された色の数」と「ドット数(画素数)」と「色配置の複雑さ」です。つまり、七色に配置された画像のほうが容量が重くなるのです。

以下に例を挙げます。左から以下の画像を配置しています。

ワントーン
任意の七色
大きめ七色

  • 左:ワントーン画像でサイズがW319×H283px
  • 中:任意の七色画像でサイズがW319×H283px
  • 右:同じ七色の画像で実際のサイズはW673×H598px

全て同じJPEGのファイル形式ですが、容量はそれぞれ以下になります。

  • 左:ワントーン(W319×H283px):2,067byte
  • 中:任意の七色(W319×H283px):10,975byte
  • 右:大きめ七色(W673×H598px):33,609byte

もうお分かりですよね?フラットデザインは画像ファイル容量を助けることに繋がり、結果として表示速度の向上にも繋がるわけです。

ふわふわ

5Gでデザインが変わる?

しかし、こと日本においては、そもそもブロードバンドであるにも関わらず5Gという、非常に優れた通信環境が構築されるわけです。そうなることによって今まで遊べなかったデザインも遊べるようになるのではないでしょうか。結果、今後のWEBサイトデザインにおいては、以下の要素が増加すると私は考えています。

  • 金や銀等といったキラキラ系やメタリックな色素
  • グラデーション要素
  • きめ細かいテクスチャー要素
  • 動的なロゴデザイン
  • HTML5を活かしたJavaScript

そしてそれを裏付けるかのようにWeb Design Trends「2020年に流行するグラフィックデザインの最新トレンド13個まとめ」でも、より複雑なデザインが好まれている傾向が見受けられます。フラットデザインとは方向性が真逆ですよね?

ふわふわ

デザインの見直しも!

Chromeのレンダリング力は昨年大きく飛躍し、伴って今ではGooglebotのレンダリングも大きく飛躍しています。JavaScriptにおけるSEO上の不利感も減少し、数年前までは「テキストを上部に詰め込む」よりも「空白を活かした清潔感のあるデザイン」が好まれる傾向にあります。つまり、5G国家になることで、日本ではSEO上もユーザーコミュニケーション上もより複雑なデザインが実現しやすい環境になっていくのです。

「もうそろそろリニューアルしなきゃ」「そろそろワンカラムも限界だ」と思っているサイトオーナーの方々には、是非こういった近未来状況も踏まえ、リニューアル方針にデザイン要素を加味してみてはいかがでしょうか。


関連記事

フィッシングメールが増え始めてる?

最近、大手企業を名乗ったフィッシングメール(なりすまして個人情報を取得しようとしている)が多いようです。かなり巧妙で、しかもそれらしいことが記載されているので、皆様も充分にご注意ください。 フィッシングメール例 年明けの心の隙を狙ったなりすましメールが多いです。まずは以下のメールをご覧ください。 三 ...(続きを読む)

有益情報を発信するツイート紹介

最近、色々なサービス展開上、Webページデザインの勉強をしている私です。とはいえ技術的なコーディングやプログラミングではなく、市場参入視点やユーザーへのコンバージョンやエンゲージメント視点での勉強です。これに関しても終わりがなく、且つ伝えたい内容によってUIデザインは変化するので、常にインプットが必 ...(続きを読む)

PDRがしっくりくる

先日、SEOや新規ビジネスを考えている中、「やっぱりPDCAだとうまくいかないなぁ」と思いまして...PDRにしてみたところうまく回りだしたので、そんなPDRをご紹介してみたいと思います。 PDRとは PDRとは2011年頃にハーバードビジネススクール(HBS)のLinda Annette Hill ...(続きを読む)

訴求方法における他社参考のしかた

自分のWebサイトページにおける訴求方法を考える時、無作為に他社のWebサイトやランディングページを見て、見た後にそこから何かを得ようとする人がいます。でも、無作為に他人のWebサイトページを見ているだけでは、あまり気付きも参考要素も得られません。そこでここでは他社のWebサイトページを見る時の心構 ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。