名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

被写体の輪郭に沿って切り抜いた写真を「切り抜き写真」といいます。WEBデザインで写真を使う際、四角にトリミングした角版や、丸くトリミングした丸版などは使いやすく、四角いディスプレイとも親和性の取れる形ですが、切り抜き写真を使うことでアクセントになったり、新しいレイアウトを生み出すことができます。
今回は参考になる切り抜き写真を使ったWEBデザインアイデアをいくつか紹介していきます。

イラストを組み合わせて新しいビジュアルを作ったWEBデザイン

切り抜き写真は角版などとは違い、自由に写真をレイアウトできるのが特徴です。こちらのホームページはイラストと組み合わせて切り抜き写真をレイアウトし、新しいビジュアルを作っています。写真を装飾のように使うことで商品の魅力をアピールしつつ、賑やかな印象を演出しています。切り抜き写真を使ったデザインはレイアウトが不規則な分、難易度は高いですが、独特の雰囲気を持たせることができます。手書き風のフォントや、吹き出しを使ったデザインとも相性抜群です。ただし、切り抜き写真はどこにでも配置できる分、左右のバランスや余白によって窮屈に感じる場合もあるため注意が必要です。

Mr.Standard（ミスタースタンダード）:https://mr-standard.lifelabel.jp/

パララックスと組み合わせて装飾的に使ったWEBデザイン

切り抜き写真はレイアウトの自由度が高いため、余白を埋める装飾的に用いることもできます。こちらのホームページはパララックスと組み合わせて装飾的に商品の切り抜き画像を使っています。パララックスを使ったWEBデザインとも相性がよく、切り抜き写真に浮遊感を持たせることで、よりリッチな世界観を作り出すことができます。シンプルなイラストやパーティクルと組み合わせてもいいでしょう。ただし、パララックスは使いすぎるとユーザーに不快感を与える場合もあるため、注意が必要です。

なまふの店 麩秋：https://fuaki-shop.jp/

真俯瞰の切り抜き写真でカタログ感を出したWEBデザイン

食品などのECサイトでは真俯瞰の切り抜き写真を使ったWEBデザインもよく使われます。真俯瞰の商品写真はカタログ感を出し、見やすく分かりやすいデザインとなります。豆腐などの食品を扱う藤田食品のホームページでは商品画像の俯瞰写真を切り抜き、一覧性を持たせたデザインで商品を紹介しています。商品のバリエーションや商品形状が分かりやすい上に、多彩な写真の形が見ていて楽しいデザインです。さりげないドロップシャドウもリッチな質感を演出する上で最適な表現です。

藤田食品：https://www.fujita-foods.co.jp/

吹き出しを使って商品の特徴を紹介したWEBデザイン

切り抜き写真は商品の特徴をクローズアップして紹介する際にもおすすめです。こちらのホームページでは販売しているコーヒー豆のパッケージに凝らされた工夫を、切り抜き写真とともに吹き出しを使って紹介しています。必要に応じてマウスオーバーで吹き出しの詳細が見ることができたりなどの工夫を凝らしてもいいでしょう。

COFFEE ROASTERY 101：https://roastery101.com/insistence/

大きさに差をつけてレイアウトし動きをつけたWEBデザイン

メインビジュアルに大きさに差のある切り抜き写真を使えば躍動感のある動きを感じるWEBデザインとなります。こちらのホームページでは丸いお皿に料理が盛り付けられた切り抜き写真と小さなネギの切り抜き写真を散りばめて動きのあるWEBデザインに仕上げています。切り抜き写真は大きく配置することでダイナミックさを演出でき、メインビジュアルにインパクトを出したい時に最適です。またこちらのホームページでは、丸をモチーフにした装飾を多く用いており、切り抜き写真との相性も良く、ポップで賑やかなWEBデザインに仕上がっています。

簡単ねぎレシピグランプリ：https://ufoods.co.jp/recipegrandprix/

今回のまとめ

今回は切り抜き写真を使った参考にしたいWEBデザインをいくつか紹介しました。切り抜き写真の使い方によって角版や丸版ではできない新しい表現が可能です。被写体を際立たせたい場合や、躍動感のあるWEBデザインを作りたい場合は、今回紹介したホームページを参考にしてみてください。