製品写真が小さくて伝わらない。HPに「拡大して確かめる」入口をつくる

製品写真をたくさん載せたのに、「細かい部分が分からない」と感じることはありませんか。

一覧では、複数の写真を見渡せることが大切です。ただ、一枚ずつを小さくすると、気になった形や部品を確認しにくくなります。そこで今回は、一覧から写真を拡大し、見終わったら一覧へ戻る工夫を紹介します。

■ 一覧で探し、気になる一枚を開く

「凪設計工業」の掲載用サンプルでは、製品写真に「VIEW ＋」を添え、選ぶと拡大表示が開くようにしています。

実際に制作したサイトをもとに、会社情報を架空のものへ変更した見本です。受注・納品済みの実績や、問い合わせの増加を示すものではありません。

写真を全部大きく並べると、ほかの掲載例を見るまでに長くスクロールすることになります。この見本では、一覧で候補を探す段階と、一枚を詳しく見る段階を分けています。見たい人が、その場で写真を開ける構成です。

■ 開けることと、戻れることをセットにする

写真を押せば大きくなると、初めて訪れた人が気付けるでしょうか。「VIEW ＋」のような手がかりを添えるのは、画像に操作があることを知らせるためです。

拡大表示には「閉じる ×」を置いています。今回の確認でも、閉じる操作で製品一覧へ戻れることを確かめました。写真を見るためだけに別のページへ進ませず、続けてほかの掲載例を確認できる形です。

拡大できるかだけでなく、開いたあとに何を押せば戻れるかまで確認すると、使う場面を想像しやすくなります。

■ 大きく表示しても、元写真の情報は増えない

この見本の拡大表示には、元画像の解像度を超える拡大はしていない旨の注記があります。

小さな画像を引き伸ばしても、写っていない細部までは確認できません。依頼時には、できるだけ元の写真を用意し、「全体の形」「接合部」「表面」など、何を見てもらいたい写真なのかを伝えることが大切です。

寸法や材質、加工精度などは、写真だけで判断させず、確認できる説明や資料を別に添えます。拡大表示は、写真に写っているものを見るための補助です。

■ 自社の写真を、スマホで一枚開いてみる

ご自身のHPでは、紹介したい写真を一枚選び、スマホで次の点を確認してみてください。

・見てもらいたい部分が、小さすぎないか

・拡大できる場合、その操作に気付けるか

・開いたあと、一覧へ戻る方法が分かるか

製品だけでなく、施工箇所や店内設備を見せるページでも使える確認です。

USER ABILITIESのホームページ制作では、写真の枚数と見てもらいたい内容に合わせて、掲載方法をご相談いただけます。購入前に使用予定の写真と、詳しく見せたい箇所をお知らせください。必要な機能と対応範囲を確認してご案内します。

ホームページ制作サービスを見る

https://coconala.com/services/4455663