CSS デザインで参考になるサイト一覧。この記事は毎年更新されます。
3,000 以上のサイト・メディアをチェックし、最もすばらしいデザインのサイトを 8 個ピックアップ。最先端の CSS、Sass、JavaScript を駆使した世界最高水準のデザインを参考にしよう。
2020 年、最もすばらしいデザインを誇るサイト
Apple
デザインのポイント
- スクロールと逆スクロールで画像や動画が可逆的に動く
- 黒と白のメリハリある使いわけ
- グレースケールのバランス感覚は究極的
CSS-Tricks
デザインのポイント
- 黒と暖色系のグラデーションの卓越した融合
- アイコンやボーダーの曲線美
WIRED 日本版
CSS のポイント
- 雑誌系メディアとしてシンプルさと複雑さのバランスを追求
- 記事の装飾をシンプルにおさえる
The Atlantic
CSS のポイント
- フロントページの最適化された配置
- セリフの格調高さを追求
- 大手メディアとして世界最高水準
ゴリミー
CSS のポイント
- 国内ブログでナンバーワンのデザイン（個人的な主観）
- パーツの大小にメリハリをつける
- モーダルウィンドウの完成度は世界最高水準
Mos Mosh
- セリフの格調と色が絶妙に融合
- スクロールやズームが自然に調和している
- 文字の大きさとセリフ・サンセリフの使いわけはプロフェッショナル
目白大学特設サイト
- ポップなキャラクターがスクロールで現れるユニークさ
- ズームインのスピードはテンポがいい
- 背景やボックスとキャラクターの色配置は完成度が高い
Inthefrow
- 個人ブログで世界最高レベルの美的デザインを誇る
- 画面の分割で訴求力アップ
- 完成されたモーダルウィンドウ
美しいデザインの方向性
2020 年以降はミニマリズムが崩れるでしょう。まだ多くのデザイナーはシンプル、ミニマリズム、そして禅の根本的な概念をごちゃごちゃにしているため、2015 年から 2019 年くらいまで、極度に簡素なデザインが出てきました。
一方、ブランド力のないメディアはポップを売りにして、丸い枠線や多色、しつこいモーダルウィンドウなどを多用してきました。しかし、その時代はすでに終わり、例えば h2 タグにリボンをつけたデザインは古くさい、素人の香りがするタグの代表になりました。
また、総じてプロフェッショナルのデザインはアイコンを削除する傾向にあります。例えばルイ・ヴィトンはボタンを枠線と文字だけにしています。他の一流メディアも同様です。アイコンを文字の左に置くデザインは無駄な主張と感じられる時代になりました。
また、New York Times などのテクノロジー人材がいるメディアは、Medium も含めて文章を中央に配置します。画面左の配置はいまいましい多カラムの名残りを感じさせます。
モーダルウィンドウはほぼ必須のアイテムになり、一流メディアはほぼすべて完璧なモーダルを用意しています。スクロールしてずれないこと、スクロールしてもとの画面も一緒にスクロールされないこと、あたりで大きな差が生まれます。
方向性として次の 3 つが極めて重要なトレンドになります。
- 色、線、大きさのメリハリをつける
- モーダルを作りこむ
- 美しい画像を利用する
画像はますます重要になるため、Adobe ストックなどのサービスを利用して、高品質な素材を用意することが不可欠。良くも悪くも、フロントページの画像で、そのメディアの根本的な価値は決まってしまうでしょう。WordPress で記事を書いている人は、アイキャッチをきちんと設定しよう。
