--- title: Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！ description: Wixは、初心者でもデザイン知識不要で簡単に手軽にカッコ良くオシャレなホームページを無料で作ることができます。でも、いざWEBサイトを作成しようと思っても、手が止まってしまう！載せる画像の最適な縦横サイズはどのくらい？このブログでは、Wixを活用したWEBサイト制作における最適な画像のサイズについて解説！ image: https://blog.brandbuddyz.com/hubfs/Wix%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%B9%E3%82%99%E3%81%AF%EF%BC%9FWix%E5%86%85%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E7%B7%A8%E9%9B%86%E3%81%8B%E3%82%99%E5%AE%8C%E7%B5%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E3%81%93%E3%82%99%E7%B4%B9%E4%BB%8B%EF%BC%81.jpg --- [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo.png?height=37&name=logo.png "BrandBuddyz")](https://brandbuddyz.com/) [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo_mob.png?height=37&name=logo_mob.png "BrandBuddyz")](https://brandbuddyz.com/) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) Less than a minute read # Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！ ![Alison Urasaki](https://blog.brandbuddyz.com/hubfs/prof.jpg) By Alison Urasaki ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hubfs/Wix%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%B9%E3%82%99%E3%81%AF%EF%BC%9FWix%E5%86%85%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E7%B7%A8%E9%9B%86%E3%81%8B%E3%82%99%E5%AE%8C%E7%B5%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E3%81%93%E3%82%99%E7%B4%B9%E4%BB%8B%EF%BC%81.jpg) [Wix](https://blog.brandbuddyz.com/websiteforsmalltomediumenterprises?hsLang=ja)は、初心者でもデザイン知識不要で簡単に手軽にカッコ良くオシャレなホームページを無料で作ることができます。 でも、いざWEBサイトを作成しようと思っても、手が止まってしまうことがあります！ それはTOPページに載せる画像の最適な縦横サイズはどのくらいにしたらよいか？ などです。 このブログでは、Wixを活用したWEBサイト制作における最適な画像のサイズについて解説したいと思います。 また、意外と知られていないWixエディター内で画像の切り取りや加工などの編集が完結できる「Wixフォトスタジオ」についてもご紹介します。 ## **【Wixサイトで使用する画像の最適なサイズは？】** 基本Wixは自動的にサイズが調節されるので、アップロード前のサイズ調整は特に必要ありません。 Wixエディター画面の左右に点線があり、横幅980pxで固定されています。なので、スマホやタブレットの最適化させるなら横幅980pxにキレて欲しくない画像の要素を収める必要があります。 実際に、横幅980pxで作成した画像と適当なサイズの画像を用意して試してみました。 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2011.59.38.jpg?width=271&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2011.59.38.jpg) わかりやすい様に背景白でキャラを1つ配置した画像を用意して比較してみました。 ※ストリップ追加＞ストリップ背景を変更で画像が追加出来ます。 ・適当な画像のサイズを入れた場合 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/Wix%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF%EF%BC%9FWix%E5%86%85%E3%81%A7%E7%94%BB%E5%83%8F%E7%B7%A8%E9%9B%86%E3%81%8C%E5%AE%8C%E7%B5%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E3%81%94%E7%B4%B9%E4%BB%8B%EF%BC%81.jpg?width=1440&name=Wix%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF%EF%BC%9FWix%E5%86%85%E3%81%A7%E7%94%BB%E5%83%8F%E7%B7%A8%E9%9B%86%E3%81%8C%E5%AE%8C%E7%B5%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E3%81%94%E7%B4%B9%E4%BB%8B%EF%BC%81.jpg) 画像のサイズが少し大きくて切れて見えていたら、下に引き伸ばして調整することが出来ます。 ![スクリーンショット 2021-10-29 0.42.51](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%200.42.51.jpg?width=1425&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%200.42.51.jpg) ・横幅980pxで作成した場合 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2012.07.54.jpg?width=1418&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2012.07.54.jpg) 今回用意したキャラが真ん中に980pxいっぱいに配置した画像であった為少し先ほどより大きく見えていますが、しっかり切れずに必要な要素だけを表示してくれました。 この比較からPC版ではあまり画像のサイズを気にすることなくWixが自動的に最適化してくれることがわかりました！ スマホやタブレットなどのモバイル最適化させるのであればに980px内に出来るだけ必要な要素を入れた画像を用意することをオススメします。 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2012.26.38.jpg?width=1422&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2012.26.38.jpg) また、Wixでは可能な限り高画質で画像をアップロードすることをおすすめしています。 推奨されている画像の解像度が最低でも、2560×1440ピクセル以上のものをアップロードしてください。理由は、Wixが画質を損なう事なく表示する画面に画像を正確なサイズに最適化する為だからです。 Wixに画像ファイルをアップロードする際はJPGフォーマットでアップロードすることが望ましいです。PNGフォーマットは画像が透明な層を必要とする場合のみ使用する事をおすすめします。 Wixエディタは以下の3つのセクションにページ構成されていますので覚えておくと便利です。 上から順に、 ・ヘッダー:サイトの最上部にある部分でサイトの全ページに反映されます。主に、ロゴやメニューバー、タイトルなどが配置される部分です。 ・ページボディ:ページのコンテンツ部分になります。（今回お話ししているテーマは主にこの部分となります） ・フッター:サイトの最下部にある部分で、こちらもサイトの前ページに反映されます。SNSアイコンや住所などが主に配置される部分です。 [参考：Wix エディタ：サイトページにコンテンツを配置する](https://support.wix.com/ja/article/wix-%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%EF%BC%9A%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B#attaching-elements-to-the-header) サイトに入れ込む最適な画像サイズはWix内ではあまり気にする事なく配置出来、必要であれば後から調整することが可能なので初心者の方にも、とてもオススメです♪ 「画像をもっとカッコ良くてお洒落に調整したいけどPhotoshopや画像加工アプリなどで編集して用意するのが面倒臭い…！」 そういう声も結構多いです。 でもご安心下さい！ 実は、Wix内で画像の加工や切り取り編集を完結することができるのです！ とても簡単にできるのでぜひ活用してみてください。 ## **【Wix内で画像編集が完結する「Wixフォトスタジオ」とは？】**   Wixフォトスタジオはブラウザから編集を行うことが出来、エディタを離れることなく画像を切り抜いたり編集することができます。 高価な画像編集ソフトウェアを使わずに画像編集ができます。   Wixフォトスタジオの機能についてご紹介します。 ### **【WEBサイトで使用する画像を編集する】** まず、編集する際はエディタで画像をクリック ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2013.02.59.jpg?width=1192&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2013.02.59.jpg) ここでWixフォトスタジオが開きます。 フィルター ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.33.29.jpg?width=1349&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.33.29.jpg) 調整 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.40.02.jpg?width=1328&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.40.02.jpg) 画像またはロゴの背景を透明にする 「切り取り・編集」をクリックします。 ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.38.57.jpg?width=1340&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-28%2021.38.57.jpg) 自動的に背景を切り取ってくれます。 ロゴなどの輪郭がハッキリしている画像を切り取る際におすすめの機能です。（使用した画像の様に背景と切りたいものがくっきりと認識できて無いものは綺麗に切れない場合があるので注意しましょう） 画像をクロップ（切り抜き）する ![Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2013.11.11.jpg?width=1329&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-10-29%2013.11.11.jpg) 自分の好きなサイズに変更してくれたり、正方形に自動的に切り取ってくれる便利な機能です。 Wixフォトスタジオの便利なところは、サイトに合う様に画像を自動的に切り取ってくれるので違和感無く画像を編集してくれます。 是非ご活用されてみてはいかがでしょう。 ## **【まとめ】**   Wixはホームページをお洒落に作成する以外に画像編集も簡単にできます。 是非Wixフォトスタジオを使ってみてくださいね！ また、Wixでは推奨ファイルの形式はJPG形式です。JPG形式の方がWEB用に最適化されているため、画像を透明にする必要がない限りはPNG形式ではなく、JPG形式を使用してください。 画像の最適なサイズはWixが自動的にサイズが調節してくれるのでアップロード前のサイズ調整は特に必要ないので初心者でも安心です。 スマホやタブレットの最適化をさせるなら横幅980pxWixエディター画面の左右点線内（横幅980px）にキレて欲しくない部分を収めることを覚えておくと良いでしょう。   この記事以外にも、Wixの使い方や新機能に関するブログを投稿しています！ ・[Wixデータベースの使い方！一括でページを簡単に作れる方法！](https://blog.brandbuddyz.com/wixdatabasehowtocustom?hsLang=ja) ・[Wix競合分析機能とは？SEO対策で使える競合分析ページの使い方・見方を徹底解説](https://blog.brandbuddyz.com/wix-benchmarks?hsLang=ja) 参考にしていただけたら幸いです。 弊社ブランドバディーズは、Wixパートナープログラムに登録しており、パートナーの最高レベル「レジェンド」レベルのWix制作会社です。 マーケティングやブランディングを活かしたウェブサイト・オンラインショップ制作、SEO対策を行なっております。 ![Legend (1)](https://blog.brandbuddyz.com/hs-fs/hubfs/Legend%20(1).png?width=201&name=Legend%20(1).png) ブランディングやマーケティングを生かした集客や制作・お洒落でかっこいいサイトを作りたいけど明確なゴールが定まらない！ 忙しくてWEBサイトの修正や更新をやってもらいたい…など、Wixに関する事以外にも些細な疑問があればお気軽にお問い合わせくださいね♪   Tags: [wix](https://blog.brandbuddyz.com/tag/wix) ## Related Articles ### Wix競合分析機能とは？SEO対策で使える競合分析ページの使い方・見方を徹底解説 *( 1 min read )* Tags: [ブランディング](https://blog.brandbuddyz.com/tag/ブランディング), [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング), [wix](https://blog.brandbuddyz.com/tag/wix) ### Wix おしゃれなメニューバーをコピペで簡単に作ろう！【Velo by Wix】 *( 1 min read )* Tags: [wix](https://blog.brandbuddyz.com/tag/wix) ### ２億人を突破のWix！イケてるWixサイト事例10選！ *( 1 min read )* Tags: [ブランディング](https://blog.brandbuddyz.com/tag/ブランディング), [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング), [wix](https://blog.brandbuddyz.com/tag/wix), [DX](https://blog.brandbuddyz.com/tag/dx) ## ジャーニーマップをダウンロード！ オンラインとオフラインでメディア戦略を立てるときにご利用ください。 ![Bottom image](https://blog.brandbuddyz.com/hs-fs/hubfs/Brandbuddyz_August2020/Images/btm_img.webp?width=200&name=btm_img.webp "Bottom image") - [Who?](https://brandbuddyz.com/about/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) Copyright ©2020 BrandBuddyz. All Rights Reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Alison Urasaki", "url" : "https://blog.brandbuddyz.com/author/alison_urasaki" }, "dateModified" : "2023-04-25T07:53:28.425Z", "datePublished" : "2021-11-22T09:17:09.000Z", "headline" : "Wixで画像の最適なサイズは？Wix内で画像編集が完結する方法をご紹介！", "image" : [ "https://blog.brandbuddyz.com/hubfs/Wix%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%B9%E3%82%99%E3%81%AF%EF%BC%9FWix%E5%86%85%E3%81%A6%E3%82%99%E7%94%BB%E5%83%8F%E7%B7%A8%E9%9B%86%E3%81%8B%E3%82%99%E5%AE%8C%E7%B5%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E3%81%93%E3%82%99%E7%B4%B9%E4%BB%8B%EF%BC%81.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.brandbuddyz.com/wix-photoeditor", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.brandbuddyz.com/hubfs/bb_logo04.png" }, "name" : "BrandBuddy合同会社" } } ```