ペライチでホームページを作っていて、なんとなく画像がしっくりこなかったり、画質が悪くなったりした経験はありませんか？

その場合、1枚1枚のサイズがまばらだったり、画像サイズが小さすぎたりしているのかも……。

今回はそんなお悩みを解決できる、ペライチで画像を挿入する際の推奨サイズをお伝えします！

専用ソフトなしで、カンタンにできるトリミング方法も一緒にお伝えしますので、ぜひ参考にしてみてください＾＾

ペライチで画像を挿入する時の基本ポイント

まずはじめに、画像をホームページに使用する際に気を付けたい基本のポイントを3つお伝えします。
このポイントをおさえるだけでも見栄えの良いホームページを作ることができますよ◎

1十分な画像サイズの素材を用意する

ホームページで画像を使用する際に重要となってくるのが「そもそもの画像サイズ」です。
特に、小さすぎるサイズの画像を使ってしまうと、表示される画像が粗くなってしまいます。
これは、Webには画像自体のサイズに関わらず、表示サイズまで引き延ばされて表示される特性があるためです。

じゃあサイズが大きければ大きいほど良いかというと、そうではありません。
画像サイズが大きいと、サイトを読み込む際に負荷が大きくなりすぎてしまい、すべて表示されるまでに時間がかかってしまいます。
そうなるとサイト訪問者の離脱率に繋がってしまうだけでなく、SEOの評価が悪くなってしまう可能性もあるのです。

そのため、画像は大きすぎず、小さすぎずのサイズで挿入することが大切になってきます。
ペライチで画像を使う場合、基本的には【横幅2000px】の画像を用意するようにしましょう。
縦幅は使うブロックによって推奨サイズが異なりますので、この後の「ブロック別推奨サイズ」でお伝えしていきます◎

2横並びの画像はすべて同じ大きさにする

複数の画像を入れられる横並びブロックを使う場合は、画像はすべて同じサイズにするのがおすすめです。

厳密には【同じ縦幅の画像】を使うと横一列にレイアウトを揃えることができるので見栄えが各段に良くなります。

3丸画像のブロックは正方形画像が正解◎

お客様の声ブロックなど、丸くトリミングされるブロックの場合は【正方形の画像】を使うとキレイにトリミングされるのでおすすめです◎

元が正方形ではない画像の場合、最近リリースされたペライチの画像表示位置の設定でカンタンに正方形にトリミングできますのでぜひ活用してみてください♪

ブロック別推奨サイズ

それではブロックや画像種類ごとにおすすめのサイズをお伝えしていきます。
該当のブロックを使う場合はぜひ参考にしてみてください♪
（数字はすべて横幅×縦幅pxです）

メイン＆背景画像

各ブロックに設定できる背景画像も同様のサイズがおすすめです。
縦幅は1300pxあれば問題ありませんが、1500pxあれば背景の位置調整機能を使って位置調整が可能になります。

加工した画像をメインにする場合は？

テキストなどを入れた加工画像を使っている場合は「メイン」カテゴリ内の「画像（フルサイズ）」を使いましょう。

ペライチの画像ブロックは閲覧する端末によって自動で表示が最適化される「レスポンシブデザイン」を採用しています。
画像内のテキスト量や画面サイズによって自動で表示範囲が最適化される一方、それによって画像の上下や左右が切れて表示さることがあります。

「画像（フルサイズ）」ブロックは、どの画面サイズであっても常に画像全体が切れることなく表示できるブロックなので、文字入れなど、加工されているメインを使う場合はこちらのブロックを利用すると切れずに表示が可能です。

ベースとなる画像サイズは、メインと同じく2000×1500を目安にするのがおすすめです。

スライダー

メインの中で少し特殊なのがスライダーブロック。

縦:横＝1:2の比率であればピッタリはまるので、高画質などで画像が重い場合は1600×800などでもOKです。

画像1枚＋文章

※このサイズは1ブロックに1～3枚の画像が入っているブロックであれば共通で使えるサイズです

縦幅は1000px以上あればサイズ的にはOKなので、お好みのサイズに調整してください。

3列横並び

こちらも縦幅は1000px以上あればサイズ的にはOK！
（別のサイズにする場合は、すべて同じ縦幅にするのがポイントです！）

丸画像横並び

丸画像の場合の最大ポイントは正方形であること！
丸画像の場合はアイコンサイズでの挿入になるため、2000×2000のサイズを用意するのが難しい場合は1000×1000でもOKです。

4列以上横並び

3列横並び同様、縦幅は同じであればお好みのサイズに調整OKです。
3列横並びと同じく2000×1300でもOKですが、4列以上画像が並ぶ場合は枚数が増えて負荷が大きくなりすぎる可能性があるため、少し小さいサイズがおすすめです。

画像のトリミング方法

推奨サイズはわかったけど、そもそもそのサイズの画像を作るにはどうしたらいいの？という方はパソコンかスマートフォンがあればできるカンタンな方法でトリミングしてみましょう◎

パソコンを使う場合

1．使いたい画像を開く

2．上メニューにある「トリミング」ボタンをクリック

3．好きな形にトリミング

四隅にある○ボタンをクリックしたままドラックし、好きな形にトリミングできます。

正方形にトリミングしたい場合は、右メニューの「縦横比」から「正方形」を選びましょう

4．「コピーを保存」をクリック

元画像と同じ場所にトリミング後の画像が保存されます。

スマホを使う場合

※iPhoneXでの手順になります。別機種の場合は挙動が異なりますのでご了承ください

1．使いたい画像を開く

2．右上の「編集」をタップ

3．下メニューの一番右にあるトリミングをタップ

4．四隅の角を好きな位置にしてトリミング

5．形が決まったら右下の「✔」をタップして保存

画像容量が大きくなって、重くなってしまった場合は？

推奨サイズで画像を入れたら読み込みが遅くなった…という場合は高画質などでサイズとは別に容量が重くなってしまっている可能性があります。

そんな時は、専用サイトでサイズを保ったまま容量を圧縮して、負荷を軽減してみましょう。
Googleが推奨する1サイトあたりの容量は「2MB」ほどなので、圧縮が必要な場合の目安にしてみてください。

★画像の容量圧縮おすすめサイト
https://tinypng.com/

最適な画像サイズでホームページを作ろう！

今回はペライチで作るホームページにおすすめのサイズをお伝えしました。
画像サイズは見逃しがちですが、きちんと整えることで見栄えはもちろんSEOにも良い影響があります。

ぜひ画像サイズにもこだわってホームページを作ってみてください！

【30日間ビジネスプランが無料！ペライチに登録する】
https://peraichi.com/

【ペライチの操作で迷ったら全国のサポーターに相談できる！ペラナビはこちら】
https://navi.peraichi.com/