夜這い月公式サイト

■デザイン

| コンセプト |

和テイスト&エモーショナルなデザイン

トップページにはJavaScriptを使用し背景スライドを実装しました。

| カラー |

メインカラー         ■ #8da8e3ff

サブカラー            ■ #272b4c

■構成

| ドメイン |

ドメイン         yobaituki.com

| SSL証明書 |

Let's Encrypt    https://letsencrypt.org/ja/

| その他 |

独自HTTP監視    https://letsencrypt.org/ja/

独自バックアップ機能    https://letsencrypt.org/ja/

■特徴

| 高パフォーマンス |

夜這い月公式サイトは速度を重視したWebサイトとなっております。

公開サーバーは低スペックな環境ですがPageSpeed Insightsでの速度検証ではパソコン環境が0.3秒、モバイル環境が1秒となりました。

.htaccessでは「mod_expires」を使用しキャッシュ期間を設定、「mod_deflate」を使用して圧縮配信を行う事で速度を早めております。

      <IfModule mod_expires.c>
        ExpiresActive On
        <FilesMatch "\.(js|xml|css|gif|jpe?g|png|ico|mov|pdf|mpg|woff2|webp)$">
          ExpiresDefault "access plus 1 week"
        </FilesMatch>
      </IfModule>
      
      <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/atom_xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-font-ttf
        AddOutputFilterByType DEFLATE application/x-font-woff
        AddOutputFilterByType DEFLATE application/x-font-opentype
        AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
      </IfModule>      
    

上記に加え画像形式を「PNG」から次世代画像フォーマット「WEBP」に変更する事で読み込みデータの削減を行なっております。

その他にもフォントファイル読み込み時に「font-display: swap;」を指定する事でwebページの表示を優先させた設計となっております。

| 高い検索順位 |

大手検索エンジンである「Google」「Yahoo」にて共に1検索順位が1位となっております。

| 自動スクロール機能 |

ギターコード表示用にJavaScriptを使用し自動スクロール機能を実装しております。

自動スクロールはレンジスライダーにて速度が調整可能となっております。

※掲載画像は開発段階のスクリーンショットです。

■その他

| 準備中 |

戻る