Global Standard

英語研修事業を展開する架空企業のコーポレートサイトです。デザインカンプをもとに、全ページをWordPressのオリジナルテーマとして実装しました。

導入事例はカスタム投稿タイプ、お知らせは通常の投稿で管理しています。資料ダウンロードとお問い合わせには、それぞれ専用の完了ページを用意しました。

青と白を基調にした配色から、このサイトは「青空のような明るい未来」を伝えようとしていると読みました。ここで学んだことが、その先の未来につながっていく、というメッセージです。

ビジュアルに海外の人物写真を使っているのは、グローバルに活躍したい人に「自分のことだ」と感じてもらうためだと考えました。FVのコピー「YOU CAN CHANGE THE WORLD」と合わせると、青空には「世界へ羽ばたく」イメージも重なっているように思います。

画面の要所には、テーマカラーの青を斜めに切り取った帯が入っています。色を画面全体に広げすぎず、それでいて要所要所に残すことで、スクロールしても青空や広い世界のイメージが途切れないようにしているのだと読みました。

装飾が常に見えるようにする

斜めの帯を、どの画面幅でもセクションに収める

カンプにあったのは、SPとPCの2サイズでした。ところが実際に画面幅を変えてみると、その間の幅では帯が下がりすぎたり上がりすぎたりして、セクションの中にほとんど映らないことがありました。

そこで、カンプの2サイズの値はそのまま守ったうえで、中間の幅にもブレークポイントを足しました。帯の高さと位置を段階的に変えて、どの幅でもカンプと同じくらいの見え方でセクションに収まるようにしています。

ページごとにCSSを分ける

条件分岐で必要なCSSだけ読み込む

ページ数が多いので、CSSを1ファイルにまとめると、どこに何を書いたかを追いにくくなります。そこでSassをページ単位に分け、functions.php の条件分岐で、表示中のページに必要なCSSだけを読み込むようにしました。完了ページは2種類あるため、親ページ（資料ダウンロード／お問い合わせ）を見てCSSを出し分けています。

文字化けの原因を特定する

WordPress本体機能まで調べて特定する

お知らせ記事の本文で、管理者としてログインしているときだけ日本語が文字化けする不具合が起きました。訪問者には見えない症状ですが、サイトを更新する担当者は毎回目にする画面です。

シークレットウィンドウでは正常に表示され、プラグインやキャッシュを止めても直りませんでした。そこで、PHPがHTMLを送り出す直前に加工している関数（出力バッファ）を一覧にし、どの段階で文字が壊れるのかを順に確かめました。その結果、WordPress 6.9 で入った「Late Styles」の処理が原因だと分かりました。この処理はHTMLを文字単位ではなくバイト単位で書き換えるため、3バイトでできている日本語の文字が途中で切れてしまいます。ログイン中はキャッシュを通らず、管理バー用のコードも加わるため、このときだけ症状が出ていました。

テーマに、ログイン中だけこの処理を止めるフィルターを追加しました。訪問者向けの表示はそのままで、更新する人の画面だけを直しています。

公開した時点では、PNGを圧縮しないまま使っていたため、スクロールした先で画像の表示が追いつかないことがありました。

その後、使っている画像57枚をWebPに変換し、合計を66.1MBから4.9MBまで減らしています。ただ、ファーストビュー以外の画像を後から読み込む設定や、画面サイズに合わせた画像の出し分けはまだできていません。次は「軽くする」だけでなく、「必要なときに必要な分だけ読み込む」ところまで作り込みたいです。