もう2019年も終わりですね。
ほんとあっちゅうまです。
海外のSEO会社の記事ですが、2020年のWEBトレンドに関する記事があったのでめも。
超しょぼい英語力でなんとか翻訳してるので、誤っている箇所があればご指摘お願いします。
- 太字+シンプル
- アニメーションとイラストレーション
- 非対称（アシンメトリ）レイアウト
- 雄弁なタイポグラフィ
- CSSグリッド
- スケーラブルなベクターグラフィックス
- 手描き
- 音声対応インターフェイス
- 人工知能と高度な機械学習の注入
- ブルータリズムWebデザイン
以上が「2020 Web Design Trends: 10 Stunning Web Design Trends to Totally Hit」で挙げられている10のトレンド。
ひとつずつ見てみます。
2020年のWEBトレンド予想
太字+シンプル
シンプルな背景に太字のメッセージどーん！はしばらく前からトレンドになってました。
Appleも白背景に黒太文字ゴシックで見出しを置いています。
outlookも突然大きな文字になっててびっくりした覚えがあります。
背景は大きな写真を敷くかシンプルに一色か、ですね。
Apple Mac https://www.apple.com/jp/mac/
Outlook https://outlook.live.com/owa/
アニメーションとイラストレーション
動きのあるサイトのトレンドはまだ続きそうですね。
「ページ遷移の効果とパララックス」「マウスオーバーのアニメーション効果」「モバイルアニメーション」が例として挙がっています。
中でもモバイルアニメーションの需要が大きくなりそうです。
また、カスタムイラストも引き続き人気になりそうです。
個人的にMONO AIRのサイトのアニメーションが好きです。
MONO AIR https://www.tombow.com/sp/monoair/
非対称（アシンメトリ）レイアウト
ブロークングリッドレイアウトの人気を受けた感じでしょうか。
参考元の記事では、ただの無秩序ではなく、「テキスト、スペース、その他の要素と完全にバランスが取れている」事が肝要と述べられています。
難しいんですよね、崩すのって…
記事の中で紹介されているDADA DATAのサイト。Choromeの広告アドオンを提供したりしてる会社。
斬新過ぎてすごい。
DADA DATAhttp://dada-data.net/
アシンメトリ！！って感じの日本のサイトも見つけたのでひとつ。
株式会社タクトさん http://www.tacto.co.jp/
雄弁なタイポグラフィ
大きなだけでなく、より大胆で個性的なものがトレンドになると予想しています。
太さや幅などを自由に変えられる「Variable Font（バリアブルフォント）」もありますし、表現の幅が大きく広がっているという事ですね。
Variable Fontについてはこの記事が参考になるかと思います。
いつか使って紹介したいですね「Font Playground」…！
CSSグリッド
もはや説明不要のモバイルファースト。
CSSグリッドはfloatやFlexboxを使用せずにレスポンシブレイアウトに対応する手法です。
この記事あたりが詳しいです。
スケーラブルなベクターグラフィックス
つまり「SVG」ですね。
SVGはXML(Extensible Markup Language)で記述されたベクターイメージ用の画像形式の1つ。
難しい事抜きに簡単に言うと、画像を拡大・縮小してもギザギザになったりせず綺麗に表示される、というもの。
画像だけどテキストベースで書かれています。
レイヤーの機能もあります。
前にも紹介したかな？SVGだけじゃなく、色もジオメトリックなイラストもアニメーションも可愛い「wrk」のサイト。
フランスのWEB制作会社さんです。
ページ遷移もかわいい。なにもかもかわいい。
wrk
ちなみにSVG、わたしも別のサイトで使用しています。
色や形をすぐに変える事が出来るので使いこなせたらめちゃめちゃ便利なんです。
ぜんぜんこなせてないのが問題なんですが…
手描き
人間的で魅力的なものとして「手描き」が評価されているようです。
そういえば、わたし個人も、今年からWEBだけではなく紙媒体でも線画のイラストをよく使うようになりました。
機械的なフォントや風景写真だけよりも親しみやすさが出ますしね。
絵本仕立てのプロフィールムービーを作っている「エホニカ」さんのサイト。かわいい。
エホニカ http://ehonica.jp/about/ ※202004現在ドメイン無効
音声対応インターフェイス
スマートスピーカーの普及なので音声デバイスの使用が「当たり前」になるという予想です。
「手動でクエリやリクエストを入力するのではなく、デバイスに直接話すのが便利」…そうですね、siriやアレクサはじゅうぶん浸透していますよね。
人工知能と高度な機械学習の注入
「人工知能と高度な機械学習の注入により、よりターゲットを絞ったパーソナライズされたランディングページの提供が可能になる」、つまり閲覧者が自分の目的を探すのではなく、目的に合わせて作られたページがすぐに提供されるようになるという予想。
閲覧者に合わせた動的なページ…というとAmazonを思い出してしまうのですけれども、あのサジェストもこれに当たりますよね。
ブルータリズムWebデザイン
少し前から目にするようになったブルータリズムデザイン。
個性的でとがったデザイン、といったイメージでしたが、どうもそうではないらしい。
「ブルータリズム」は基は建築用語で、「荒々しく余計な装飾が無い」様子を指すようですが、WEBの世界ではいくつか解釈が分かれているように感じます。
斬新なものを指すのか小細工を使わないシンプルなものを指すのか…？
まあ「デザインは斬新で機能は小細工なしでシンプル」ということなんでしょう、か。
2020年のWEBトレンド予想 まとめ
デザインは「オリジナリティ」へ、細分化されて「個」へ、と進んでいくような感じですね…！
ウェアラブルデバイスの浸透なども気になりますね、今年は。
コメント