404

404ページをカスタマイズして、ページが見つからないメッセージを明確で洗練され、ブランドらしく見せます。

注目のリンク

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

このセクションでは、404ページの見た目を調整できます。メッセージ本文はテーマのデフォルトコンテンツエディターで管理し、ここではページの視覚的なスタイルとレイアウトを整えます。エディターでの設定や移動方法については、テーマエディターに関するShopifyドキュメントをご覧ください。

コンテンツ

ページが見つからないメッセージ自体を変更するには、テーマのデフォルトコンテンツエディターを使用します。このセクションは、そのメッセージがページ上でどのように見えるか、たとえば色、余白、周囲のレイアウトを調整するのに最適です。

これらの設定は、このセクションに限ってテーマ全体のカラーを上書きします。404ページに、サイトの他の部分を変えずに、より強いコントラスト、やわらかな印象、またはより特徴的な見た目が必要な場合に役立ちます。

カスタム背景を追加する場合は特に、テキストとサブ見出しの色を一緒に調整してください。セクションに暗めの背景やより詳細な背景を使う場合は、メッセージをひと目で読みやすく保つために、両方の色を見直してください。

テキストと背景のスタイルを変更した後は、コントラストを確認してください。404ページはテキスト中心になることが多いため、コントラストが低いとすぐに使いにくくなります。

余白設定は、デスクトップとモバイルで404コンテンツの上下にあるスペースを調整します。このような短いページでは、余白によってレイアウトがバランスよく見えるか、あるいは間延びして見えるかが大きく変わります。

ページがスマートフォンで高く見えすぎる場合は、モバイルの余白を小さくしてください。コンテンツが窮屈に見えたり、近くのページ要素に近すぎる場合は、デスクトップの余白を増やします。

セクション背景設定では、ページが見つからないメッセージの背面に色、グラデーション、画像、動画を追加できます。オーバーレイ設定は、背景メディアを使うときにコンテンツの可読性を保つのに役立ちます。

グラデーションは単色を上書きし、オーバーレイのグラデーションはオーバーレイの色を上書きします。空白または透明の値は通常、セクションのフォールバックスタイルを保持します。一方、明示的な色、グラデーション、メディアを設定すると、404エリアをページの他の部分からより独立した見た目にできます。

画像や動画を使う場合は、ページが視覚的な演出ではなく役立つメッセージとして読めるように、控えめにしてください。メディアは、特にデスクトップとモバイルのメディアを個別に設定している場合、切り抜き、読み込み、フォールバック、可読性にも影響します。

区切り線設定は、セクションの上部または下部に線を追加します。特に、より広いページレイアウトの中にある場合、404ページを意図して枠づけられた印象にするのに役立ちます。

区切り線の色を透明のままにすると、セクションにはテーマの境界線の色が使われます。多くの場合、太い線よりも控えめな区切り線の方が適しています。

幅設定は、コンテンツ領域と外側のセクションラッパーの幅を調整します。短いテキストを読みやすくしたり、背景演出をより広く見せたりする場合に特に便利です。

多くの404ページでは、非常に広いレイアウトよりも、ほどよいコンテンツ幅の方が読みやすく感じられます。背景を使いながらセクション幅を変更した場合は、エディタープレビューでは幅の変化が正確でないことがあるため、公開中のストアフロント表示で結果を確認してください。

スタイルとメッセージを一緒に調整する。 デフォルトの404文言とセクションデザインの両方を更新して、フォールバックではなく意図のあるページに見せます。
1. 文章は明確で簡潔に保ちます。
2. 視覚的な処理が同じトーンを支えていることを確認します。
テキストをすばやく読み取れるようにする。 デスクトップとモバイルの両方で、メッセージをすぐ読める色の組み合わせと幅を選びます。
背景は控えめに使う。 目立つビジュアルよりも、控えめな色、グラデーション、画像、動画の方がメッセージを支えやすくなります。
余白のバランスを取る。 表示するコンテンツ量に応じて余白を調整し、ページが洗練されて見えるようにします。
実際の画面でプレビューする。 特に幅、背景メディア、モバイルの余白を変更した後は、ストアフロントで最終結果を確認してください。
両方の表示サイズを確認する。 デスクトップとモバイルのコントロールでは、配置、表示、メディアの動作が異なる場合があるため、公開前に両方のサイズで404ページを確認してください。