サイト制作の始めの基本（立ち上げからMV）まで - Kazuma-work

サイト制作の始めからMVまでの基本形

まずはデザイナーからデザインカンプをもらう

現在のWeb制作では**「ほとんどの画像（ロゴ、写真、アイコンなど）を2倍サイズで書き出す」のが一般的**です。

1440pxのデザインで作っている場合、それをそのまま1x（1440px）で書き出すと、iPhoneやMacなどの高精細なディスプレイ（Retinaディスプレイ）では画像がボヤけて見えてしまうためです。

ただし、すべてを2倍にする際には**「画像容量（重さ）」**との戦いになります。以下の基準で使い分けるのがベストです。

1. 2倍（またはそれ以上）で書き出すべきものロゴ・アイコン: 少しでもボケると素人っぽく見えてしまいます。これはSVG形式（拡大してもボケない）で書き出すのが理想です。

MVや重要な写真: サイトの顔となる部分は、2倍（2880px）で書き出して画質を優先します。

テキストが含まれる画像: バナーなど、文字が入っている画像はボケが非常に目立ちます。

2. 1倍（等倍）でも許容されるもの背景に敷くうっすらとしたテクスチャ: ボケていてもデザイン上問題ないもの。

非常に大きな集合写真: 2倍にするとファイルサイズが数MBを超えてしまう場合。

実務でよく使う「賢い書き出し・実装」テクニック 2倍サイズで書き出すとサイトが重くなってしまうため、プロの現場では以下の工夫をセットで行います。

次世代フォーマット（WebP）を利用する同じ画質でも、JPEGより圧倒的に軽い WebP（ウェッピー）形式に変換して書き出します。

画像圧縮ツールを通す（これが一番ベター） 2倍で書き出した後、TinyPNG などのツールで画質を落とさずに容量だけを削ります。

htmlのmv部分まで

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test2</title>
    <meta name="description" content="これはTestページです" />
    <meta name="keywords" content="test, サンプル, ウェブサイト" />

    <!-- OGP -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="test3" />
    <meta property="og:description" content="これはTestページです" />
    <meta property="og:url" content="https://example.com/" />
    <meta property="og:site_name" content="test3" />
    <meta property="og:image" content="https://example.com/img/ogp.jpg" />

    <!-- X Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="test3" />
    <meta name="twitter:description" content="これはTestページです" />
    <meta name="twitter:image" content="https://example.com/img/ogp.jpg" />

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

    <!-- Google Fontsの読み込み -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap"
      rel="stylesheet"
    />

    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="css/mv_mv.css" />
    <link rel="stylesheet" type="text/css" href="css/product.css" />
  </head>
  <body>
    <div id="overlay"></div>
    <header class="site-header">
      <div class="header-inner">
        <div class="logo-area">
          <img src="images/logo.svg" alt="ロゴ" class="logo-img" />
        </div>
        <nav class="main-nav">
          <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="mv.html">MV</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#" class="active">Test3</a></li>
          </ul>
          <div class="main_btn">
            <a href="#" class="main_btn_link">お問い合わせ</a>
          </div>
        </nav>
        <div class="openbtn">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav id="g-nav">
          <div id="g-nav-list">
            <!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
            <ul>
              <li><a href="index.html">HOME</a></li>

              <li><a href="mv.html">MV</a></li>

              <li><a href="#">Test2</a></li>

              <li><a href="#">Test3</a></li>

              <div class="g_nav_btn">
                <a href="#" class="g_nav_btn_link">お問い合わせ</a>
              </div>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <main id="main">
      <div class="main_visual">
        <picture>
          <source media="(max-width: 1023px)" srcset="images/MV_sp.png" />
          <source media="(max-width: 1440px)" srcset="images/MV_pc.png" />
          <img
            src="images/MV_pc.png"
            alt="メインビジュアル"
            loading="lazy"
            class="mv_image"
          />
        </picture>
        <!--基本系のpicture-->
        <!--<picture>
          <source media="(max-width: 450px)" srcset="images/MV_sp.png" />
          <source media="(max-width: 768px)" srcset="images/MV_tab.png" />
          <source media="(max-width: 1023px)" srcset="images/MV_pc.png" />
          <img
            src="images/MV_pc.png"
            alt="メインビジュアル"
            loading="lazy"
            class="mv_image"
          />
        </picture>-->
        <div class="detail_btn">
          <a href="#" class="detail_btn_link">詳細を見る</a>
        </div>
      </div>
    </main>
    <footer>
      <div class="footer_inner"></div>
    </footer>
    <!-- JavaScriptファイルの読み込み -->
    <script src="js/navi.js"></script>
    <script src="js/scroll-bar.js"></script>
  </body>
</html>

CSSはコチラ

@charset "UTF-8";

/* MVコンテナ（基準） */
.main_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: flex-end; /* 下寄せ */
  flex-direction: column;
  align-items: center; /* 中央寄せ */
}

/* 画像の設定 */
.mv_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*ボタン設定*/
.detail_btn {
  position: absolute;
  max-width: 230px;
  width: auto;
  bottom: 3%; /* 下からの余白を調整 */
  z-index: 2;
}
.detail_btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: min(2.27vw, 10px);
  padding-inline: min(11.363636363636363vw, 50px);
  font-size: min(5.454545454545454vw, 24px);
  font-style: normal;
  font-weight: bold;
  letter-spacing: 10%;
  border-radius: min(0.78vw, 6px);
  transition: all 0.3s ease;
  background-color: var(--btn-color);
  color: var(--white--);
}

@media screen and (min-width: 1023px) {
  /* MVコンテナ（基準） */
  .main_visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 720; /* PC比率 */
    overflow: hidden;
  }

  /* 画像の設定 */
  .mv_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*ボタン設定*/
  .detail_btn {
    position: absolute; /* absoluteを外す */
    bottom: 7%; /* bottomからの余白を調整 */
    left: 9%; /* 左右中央寄せ */
    transform: unset; /* 左右中央寄せ */
    width: auto;
    max-width: min(21.94vw, 316px) !important;
    z-index: 2;
  }
  .detail_btn_link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: min(1.11vw, 16px);
    padding-inline: min(3.47vw, 50px);
    font-size: min(1.66vw, 24px);
    font-style: normal;
    font-weight: bold;
    letter-spacing: 10%;
    border-radius: min(0.78vw, 6px);
    transition: all 0.3s ease;
    background-color: var(--btn-color);
    color: var(--white--);
  }
  .detail_btn:hover {
    opacity: 0.8;
  }
  /* ホバー時の演出（例：背景色を少し暗く） */
  .detail_btn_link:hover {
    background-color: #f0f0f0;
  }
}

@media screen and (max-width: 300px) {
  /*ボタン設定*/
  .detail_btn {
    max-width: 150px;
  }
}

1. aspect-ratio の計算 PC: 1440 / 720 はシンプルに aspect-ratio: 2 / 1; と書いてもOKです。

SP: 440 / 773 は割り切れないため、上記のようにデザイナーさんの数値をそのまま入れるのが最も正確で、後から見返した時も意図が伝わりやすいです。

2. タグとの相性 CSSで aspect-ratio を指定しているため、タグによって images/MV_sp.png に切り替わった際も、自動的に縦長の比率にコンテナが変化します。

object-fit: cover; を入れているので、万が一画像のミリ数が数ピクセルずれていても、隙間ができたり画像が伸びたりすることはありません。

3. HTMLの loading=”lazy” について MV（メインビジュアル）はサイトを開いて最初に目に入る要素です。 MVに限っては loading=”lazy” を外す、もしくは fetchpriority=”high” を追加するのが、 LCP（表示速度の指標）を改善するためのベストプラクティスです。

4. 画像の書き出し（再確認） PC版はデザインが1440px幅ですが、前回の通り2880px幅で書き出したものを MV_pc.png とすることで、 Retinaディスプレイでも非常に鮮明に表示されます。

サイトは

こちらから