ちなみに【初級編】【実践編】の違いですが、
【初級編】→ほとんど知識がなくてもできること
【実践編】→ある程度HTMLやCSSに対する知識があればできること

という風に分けています！
その内【上級編】も加えていこうかと思いますので、お楽しみに！

自分のサイトをお持ちの方がいれば、まずはどのくらい画像が使われているのかを見てみるとよいかと思います。
色々と方法はありますが、手軽なのはGoogleの検証モードの活用ですぐに分かります。
（検証モードについての記事も今後投下しますので、お楽しみに！）

どうでしょうか。
「あれ、ここは画像じゃないと表現できないのかな？」
と思うような部分はなかったでしょうか。

正直、デザインとして挙がってきたものは、写真部分や妙なエフェクト（砂嵐のような？）がかかった画像以外は、ほとんどがCSSで表現できると考えてよいかと思います。

基本的に対応が可能なのは

• ボタン（グラデーションもボックスシャドウももちろん可）
• メニュー一覧（メニューが全て画像になっているサイトも多々あります。SEO的にももったいないですね・・・）
• 各コンテンツタイトル部分装飾等

以上につきましてはCSSでの構築が可能なものであると考えても良いかと思います。

マテリエイトでは今まで付箋のようなデザインや、卵型の簡単なアイコンであっても画像は用いずに構築を進めて参りました。
（YouTubeには「クリスマスツリー」をCSSで表現したものもありますので、是非御覧ください！）

CSSアニメーションによる可愛いクリスマスツリー再生リスト

これはまた別記事で詳しく解説いたしますが、あなたがサイトの外注をする際は、実績のデザイン性だけを見るのではなく、コードまでを判断材料とするべきかと思います。
「と言われても・・・。」と、困ったときはMATEREATEにご相談ください^^！
満足行くまでコード解析したいと思います（笑）

話がそれてしまいましたが・・・。

画像を使うまでもない箇所に画像を使ってしまうのはWebサイトパフォーマンスにおいて妥協でもあります。
本当にサイトの高速化を目指したいのであればできる限りCSSにて構築しましょう！
外注の場合は、できる限りしてもらいましょう！（もちろん、それ相応のコストがかかるべくしてかかります。コーダーにとってはかなりの負担である場合もあるので！）

最近多いLPなんかは、ほとんどが画像で表示されているため、残念でなりません・・・。
自分だったら、それでいいのであれば5,000～10,000円ぐらいでやるかなーといった感じですね。

余談多かったです、すみません（笑）

とにかく、画像は必要な箇所にのみ使用するようにし、技術でカバーできる部分は妥協しないようにすることを念頭におき、サイトを構築していきましょう！

上記にて、画像は必要な箇所にのみ使用することについて述べましたが、CSSでどこまでのものが表現できるのかはその人その人のスキルによります。

例え全てのコードの意味が把握できていて、見ればどうなっているのか分かるという状態だとしても、複雑なデザインをCSSにて表現するには、複数のコードをかけ合わせなければ実現できないため、また別のスキルが必要となります。

そのため、MATEREATEではCSSが秘める無限の可能性を周知いただくべく、また、初学者向けに実際のWeb素材やコード解説を順次配信していく予定です！

はじめは基本的な部分から（三角や様々な図形の作り方について）、動画や解説記事を挙げていくことを予定しておりますので、是非ご覧いただき自身のサイトのパフォーマンス向上にお役立ていただければと思います！

いかがでしたでしょうか？
この記事に書いていることを実践することは難しいかもしれませんが・・・。

これからサイトの発注を考えられている場合でしたら、細部まで拘るコーダーさんはこういう部分に拘っているということを認知していただきたいですし、金額の違いにはこういった部分も絡んでくる可能性があることもご承知いただければ幸いです！

サイト制作は高い安いだけで判断してしまうのは非常にもったいないことかと思いますので、コストと予算のいい塩梅、また信頼できるコーダーさんが見つかることを切に願っております^^

それでは、今後のコード解説動画・記事ともに、お楽しみに！！

ではでは！！