お嬢様
ワンカラム、ワンカラム、ワンカラム。
こんなにワンカラムデザインが多いと飽きてしまうわね。
WEBデザインの進化は止まってしまったのかしら？
セバスチャン
そんな事は御座いません、Webデザインは時代とともに進化し続けています。ワンカラムデザインが流行してから、どのようなトレンドが登場したのかを整理いたしましたのでご覧ください。
フラットデザイン 2.0（2015年〜現在）
シンプルなデザインを基本にしつつ、わずかな影やグラデーションを加えた「フラットデザイン 2.0」が登場しました。
- シンプルだけど、適度に影やグラデーションを使って奥行きを表現
- Googleの「マテリアルデザイン」などで採用
- すっきりとしたデザインで視認性が高い
- カード型デザインのボタンやUI
- フラットなアイコン＆タイポグラフィ
- わずかに影をつけたパネルデザイン
カードUI（2015年〜現在）
情報をブロック（カード）に分けるデザインが一般的になりました。特に、PinterestやGoogleの検索結果などでよく見られます。
- 画像＋テキストをコンパクトにまとめやすい
- レスポンシブ対応がしやすく、スマホ表示に強い
- ユーザーが情報を素早く把握できる
- 記事一覧や商品紹介ページ
- SNSフィードやブログのサムネイル表示
ブロークングリッド（2018年〜現在）
「グリッドレイアウトを崩してデザインする」ことで、個性的な表現を可能にする手法です。高級ブランドやデザイン系のサイトでよく採用されています。
- 要素をあえてズラす、重ねることで動きのある印象を作る
- 退屈になりがちな均一なレイアウトを崩して、ダイナミックなデザインを実現
- クリエイティブなポートフォリオサイト
- 高級ブランドのランディングページ
スクロールアニメーション（2020年〜現在）
スクロールに合わせて動きが発生するデザインが一般的になりました。特にAOS.jsやGSAPを使ったアニメーションが人気です。
- ページをスクロールすることでエフェクトが発生
- フェードインやズーム、スライドインなどの演出が可能
- インタラクティブな体験を提供できる
- 製品紹介や企業サイトのランディングページ
- 記事を読み進める際の視線誘導
ガラスモーフィズム（2021年〜現在）
半透明のガラスのようなデザインが特徴の「ガラスモーフィズム」が登場しました。Windows 11やmacOSのUIにも採用されています。
- 背景がぼやけた透明感のあるデザイン
- 立体感を演出しつつ、シンプルな印象を保てる
- モダンなダッシュボードやUI
- ランディングページの装飾要素
| デザイン | いつ頃流行った？ | 特徴 |
|---|---|---|
| フラットデザイン 2.0 | 2015年〜 | シンプル＋わずかな影・グラデ |
| カードUI | 2015年〜 | 情報をブロック化（Pinterest風） |
| ブロークングリッド | 2018年〜 | グリッドを崩す、レイアウトをズラす |
| スクロールアニメーション | 2020年〜 | スクロールに合わせて動く |
| ガラスモーフィズム | 2021年〜 | 透明感のあるガラス風デザイン |
お嬢様
シンプルなデザインから、凝ったデザインに変化していっているわね。
使われている技術は高度な物になっているけど、デザイン的なトレンドはファッションと同じように繰り返されているのは面白い発見だわ。
セバスチャン
半年から１年先のトレンドを予想しながらデザインすると、奇抜になりすぎない時代に合った魅力的なサイトを作れるかもしれませんね。
最新トレンドのコーディングも同料金
