【2018年流行りそう!】気になるWebデザイントレンドまとめ

【2018年流行りそう!】気になるWebデザイントレンドまとめ

藤田

藤田

こんにちは、デザイナーの藤田です!
毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。
油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました! よろしければ皆様もご覧ください。

2018年気になるWebデザイントレンド

画像を揺らす

Mustafa Çelik

デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。
アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね!
http://www.themustafacelik.com/
http://culture.basicagency.com/

パララックス

ENTER THE WORLD EXPOSITION

手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は4〜5年前に流行ったのですが、勝手にリバイバルするんじゃないのかなーって思ってます。
http://springsummer.gucci.com/
https://www.adidas.co.uk/speedfactory

テキストエリアの丁寧なアニメーション

BLUES DESIGN    愛知県のプロダクトデザイン事務所

テキストエリアのアニメーションといえばラインが出現しそのラインが抜けた時にテキストが出現するパターンと、下から上にアニメーションしながらテキストを出現させる2パターンが王道でしたが今年は回転や斜めのアニメーションを取り入れたサイトを多く見かけるようになってきました。
https://www.denso.com/jp/ja/innovation/technology/maas/
https://www.blues-d.co.jp/#/about/

モバイルビューを意識したサムネイルのアスペクト比

Open Wear  Sustainable Outerwear  Made affordable

今まではWebサイトのサムネイルといえば横長画像を使用するのが主流でしたが、スマホで見ると画像の表示が小さくなってしまうので、縦長のサムネイルを使用するサイトを昨年頃から少しずつ見るようになった気がします。
https://www.open-wear.com/
https://supercrowds.co/projects

カーソルのオリジナルデザイン

Twotwentytwo   Creative studio

こちらの手法も昨年頃から多く見かけるようになってきたと思います。
この辺のUIを変更すると「ユーザービリティが悪くなる」とか言われそうですけど、見た目のプライオリティーが高いような案件では取り入れていきたいテクニックのひとつですね。
http://twotwentytwo.se/
http://www.ronin161.com/

まとめ

どれもおしゃれなサイトばかりでしたね!
それではまた!



Web制作会社LIGではデジタルハリウッド社と組みWebデザインスクールも運営しています。ご興味があればこちらから詳細をご覧ください!

Webデザインスクール「デジタルハリウッドSTUDIO by LIG」

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。

このメンバーの記事をもっと読む
デザインのトレンド | 46 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL