【Studio】画像を思い通りに配置する方法

Studioでは画像を簡単に配置できる一方で、imgとboxの違いなど、細かい部分に戸惑ってしまうことがあります。

本記事では、Studioでの画像の配置や設定について解説します。

初心者の方が見落としがちなカバー画像（OGP）の設定についても触れておくので、ぜひ参考にしてみてください。

画像を配置するときのポイント

まずはStudioの画像を配置する際のポイントについて解説します。

前提として、Studioの画像は「ボックス」という入れ物の中に入った状態で扱われます。

この画像ボックスには、boxとimgの2種類があり、画像パーツの右上のボタンや右のパネルから切り替えることができます。

boxは初期状態で、画像がボックスの中に収まっている状態です。

ボックスのサイズを変えると、それに合わせて画像の表示範囲が変わり、トリミングしているように見せることができます。

一方で、boxからimgに切り替えると、画像全体が、トリミングされずに表示されます。

画像をそのままの形で見せたいという時には便利ですが、Studio内の設定でトリミングなどの調整ができなくなるので、目的に応じて使い分けましょう。

画像を調整・編集する

サイトに画像を配置したら、それを最適な形に調整・編集しなくてはいけません。

Studioではかなり自由に編集することができるので、大まかに分けて解説します。

サイズ調整

画像の大きさを変えたいときは、他のパーツと同様に「縦幅」「横幅」の数値を変更します。

特別なことはなく、pxできっちりと指定することも、%やvwで可変サイズに設定することも可能です。

ただ、先ほどもいったように画像ボックスがimgのときは画像全体が、トリミングされずに表示されます。

高さを「auto」にしておけば問題ありませんが、pxなどで設定すると無理やり縮小されて、画像が歪んでしまうので注意が必要です。

画像の縦横比を変えたい場合は、boxで設定するか、サイトにアップロードする元の画像を編集しておきましょう。

トリミング

画像の一部だけを見せる・切り抜くのはいくつかやり方があります。

手軽なのはboxにしてから画像のサイズを変える方法。

縦横比を無視して設定すると、ボックスからはみ出した部分は表示されないので、ざっくりトリミングすることが可能、「配置」を変えれば画像の基準となる位置を変えることもできます。

もっと細かく位置を決めたい場合は画像ボックスを親ボックスに入れて絶対配置で設定しましょう。

親ボックスの「はみ出し」を非表示にすれば、はみ出た部分を隠しながら画像の見せたい位置を自由に微調整することができます。

ただ、あくまでもこれらはStudio内で無理やりトリミングしてるように見せるやり方で、トリミングがズレてしまう可能性はゼロではありません。

実際はアップロードする際の画像をPhotoshopなどで編集して、サイトには配置する方が確実ということは理解しておきましょう。

角丸

画像の角を丸くしたい場合は通常のパーツ同様に角丸を設定しましょう。

角丸を大きくすれば円形の画像も簡単に作成可能です。

星形やハートなど、円以外の複雑な形はStudio内の機能では難しいので、あらかじめPhotoshopなどで切り抜いた透過PNGや、図形ならSVG形式の画像、studio標準のアイコンを使用するのがおすすめです。

画像を装飾的に使いたい場合のテクニックの一つとして覚えておくと役に立つと思います。

カバー画像を設定する

最後に、意外と見落とされがちなカバー画像（OGP）の設定についてお話しします。

カバー画像というのは、SNSやLINEなどでサイトのURLをシェアしたときに表示される画像のこと。

設定していないと、共有したときに画像が表示されず、少し寂しい見た目になってしまいます。

Studioのカバー画像は2種類あります。
一つはプロジェクト一覧に表示されるダッシュボードのカバー画像、もう一つがSNSシェア時に表示されるソーシャルカバー（OGP）画像です。

ソーシャルカバーを設定していない場合は、ダッシュボードのカバー画像がOGPとして代わりに使われる仕組みになっているので、最悪ダッシュボードのカバー画像を設定していれば問題ありません。

SNSシェア時のOGP画像は、デザインエディタのページ設定から設定することができます。

推奨サイズは横幅1200px・高さ630px、ファイルサイズは5MB未満が目安。

SNSによってトリミングされる場合もあるので、文字やロゴなどの大事な要素は、中央寄りに配置しておくと安心です。

ちなみに、カバー画像は変更してもSNS上ではすぐに反映されないことがあります。

これはSNSの方でこのURLにはこの画像という情報を一時的に保存（キャッシュ）しているのが理由のため、Studio側の設定ではコントロールできません。

変更したのに古いカバー画像のままという場合も、慌てずに少し時間を置いてみてください。

まとめ

Studioでの画像の配置と調整方法、カバー画像の設定について解説しました。

画像のboxとimgの違いさえわかっていれば、そこまで難しいことはないと思います。

思い通りに画像をコントロールして、魅力的なサイトを作ってみてください。