CSS CSSによる装飾

デザイナーやプログラマーが参考にするべき CSS デザインのサイト 8 選（2020 年）

CSS デザインで参考になるサイト一覧。この記事は毎年更新されます。

3,000 以上のサイト・メディアをチェックし、最もすばらしいデザインのサイトを 8 個ピックアップ。最先端の CSS、Sass、JavaScript を駆使した世界最高水準のデザインを参考にしよう。

2020 年、最もすばらしいデザインを誇るサイト

デザインのポイント

デザインのポイント

CSS のポイント

CSS のポイント

CSS のポイント

2020 年以降はミニマリズムが崩れるでしょう。まだ多くのデザイナーはシンプル、ミニマリズム、そして禅の根本的な概念をごちゃごちゃにしているため、2015 年から 2019 年くらいまで、極度に簡素なデザインが出てきました。

一方、ブランド力のないメディアはポップを売りにして、丸い枠線や多色、しつこいモーダルウィンドウなどを多用してきました。しかし、その時代はすでに終わり、例えば h2 タグにリボンをつけたデザインは古くさい、素人の香りがするタグの代表になりました。

また、総じてプロフェッショナルのデザインはアイコンを削除する傾向にあります。例えばルイ・ヴィトンはボタンを枠線と文字だけにしています。他の一流メディアも同様です。アイコンを文字の左に置くデザインは無駄な主張と感じられる時代になりました。

また、New York Times などのテクノロジー人材がいるメディアは、Medium も含めて文章を中央に配置します。画面左の配置はいまいましい多カラムの名残りを感じさせます。

モーダルウィンドウはほぼ必須のアイテムになり、一流メディアはほぼすべて完璧なモーダルを用意しています。スクロールしてずれないこと、スクロールしてもとの画面も一緒にスクロールされないこと、あたりで大きな差が生まれます。

方向性として次の 3 つが極めて重要なトレンドになります。

画像はますます重要になるため、Adobe ストックなどのサービスを利用して、高品質な素材を用意することが不可欠。良くも悪くも、フロントページの画像で、そのメディアの根本的な価値は決まってしまうでしょう。WordPress で記事を書いている人は、アイキャッチをきちんと設定しよう。