記事の詳細

こんにちは!
前回、前々回とHTML、CSSの基本をテンプレート付きで解説しました。
今回はブレイクタイムということで、
2019年のWebデザインのトレンドをご紹介したいと思います。

トレンドデザイン ―アシンメトリー

https://cheesetart.com/

まずはアシンメトリー(左右非対称)なサイトから!

こちらはチーズタルト専門店「ベイク」のWebサイトです。
縦書きの文言や斜めの切り口でわけられた記事背景、アニメーションがとても印象的ですね。
最新トレンドが複数盛り込まれているデザインです。

レイアウトを意図的にずらすことで自然と注目してほしい部分、
「商品」や「伝えたいこと」に目線を誘導できますし、
色、画像の工夫によりメリハリをもたせることで、ユーザーにもわかりやすいサイトになるでしょう。

伝わる、トレンドを両立したアシンメトリーで、
分野問わず魅力的なWebサイトに仕上げていきましょう。

トレンドデザイン ―動画

https://borderless.teamlab.art/jp

つづいて動画、アニメーションサイト。

こちらはデジタルコンテンツの制作会社「チームラボ」の作品のひとつ、
お台場にあるデジタルアートのWebサイトです。
その場にいるかのようなスリル、必要なイメージを与える表現方法としては1番でしょう。

動画内容を見ると、3種類の場面が一定の時間で切り替わっています。
これによりユーザーも楽しみながら最後まで見ることができるほか、
適切な数であればもっと知りたい!という次の行動にもつながるでしょう。

サービスやアイテムを印象に残る形で伝えたい場合に、
ぜひ取り入れたいデザインですね。

トレンドデザイン ―シンプル

https://www.apple.com/iphone/

最後に。原点回帰!シンプルなサイト。

こちらは皆さんもご存知「Apple」のサイトです。
今はさまざまな端末でサイトを見ることが増えたため、
動作や見やすさにおいても無理のない、誰もが嬉しいデザインですね。

白、グレー、黒などの色で商品や言葉を飾らずに表現しています。
シンプルな分、サービスや技術力、アイテムに注目が集まりますし、
イラストや画像の配置、配色も同様にとても重要になります。

より率直な表現で、またモバイルファーストな時代であることを
考えたときに取り入れたいデザインですね。

技術面では ―ブレイクポイント

その他に技術面から見てみましょう。
PCならデスクトップかノートパソコンか、スマホならアンドロイドかiPhoneか、
世代や機種も含めて横幅、縦幅に違いが出てきます。
「トレンドデザイン ―シンプル」でお話した通り、動作が軽く、見やすい
モバイルファーストであることはサイト運営、評価にも関わる部分となります。

こちらのサイトを参考にして、ユーザーの考えていること、
また適切なブレイクポイントを見つけてくださいね!

◇Adobeが発表したデジタルコンテンツの消費トレンド
https://mag.ibis.gs/marketing/adobe_190404/

◇レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ
https://www.seojuku.com/blog/responsive-mediaquery.html

最後に

Webサイトを持つ目的もゴールも人それぞれです。
扱っている商品やサービス、伝えたいことをいかにユーザーにわかりやすく、
且つ魅力的に表現していくのかが大切になります。
方法、組み合わせ方はたくさんあります。
皆さんにとっての「軸」を明確にして、多くの人に情報を届けることを
はじめてみましょう!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

光回線受付センター
ページ上部へ戻る