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