Photoshopよりも簡単で効率アップ!SiGNの画像加工術

SNSやWebサイトで写真を取り扱う機会が多い昨今ですが、出来るだけクオリティを高く表現したいと思うのはデザイナーやカメラマンに限らずで御座います。
クオリティの高い写真と聞くと高額なカメラや機材が必要と思われるかもしれませんが、実はそうでもありません。
お手持ちのスマホカメラでもちょっとポイントを気をつければ素敵な写真表現が出来ます。

撮影時に用途を意識して撮影できれば最良ですが、ストックの写真でも編集を上手く用いればクオリティをアップさせる事は充分可能です。

そんな訳で今回はSiGNでの編集を前提にポイントを解説したいと思います。
画像編集と云うとオブジェクトやテキストを加えてレイアウトする様なイメージがあるかもしれませんが、素材そのものを整える意味でも有用です。
すぐに取り入れられるテクニックなので是非チェックしてみてください。

外部画像編集ツールを使っている方にもおすすめのSiGN

PhotoShopなどの外部画像編集ツールを利用している場合、Webサイトに反映した後で再度編集しようと思ったら、

    1. ツールの起動
    2. 編集データ読み込み
    3. 再編集
    4. 書き出し
    5. BiNDで読み込み

と云った流れを都度繰り返すことになる訳ですが、SiGNで編集するとその流れを省略して直接BiNDから編集する事が出来ます。
よくある『元のPhotoShopデータどこいった問題』や『別環境にPhotoShopやフォントがインストールされていない問題』などを回避出来ます。
SiGNを使う事により効率的なサイト編集が可能になりますので覚えておきましょう。

さてここから具体的なテクニックを解説します。
サンプルとして3月のセミナーで訪れた広島の厳島神社の写真を使用します。

元画像

水平線を維持した安定感ある構図

人の写真でも自分の写真でも普段私が一番最初に気にするのがこのポイントです。
個人的にですが、クオリティに難を感じる写真は大概水平線に添っていないものが多いでしょうか。
もちろん意図的に斜めに撮る手法もあるのですが、意図していないのであれば水平線は最初に意識しましょう。

まずはサンプルで編集前と編集後をご覧ください。

水平線の調整前と調整後

如何でしょうか。
写真に安定感が出てきますね。

それではSiGNでの具体的な編集方法を解説します。

画像のサイズ設定

まず画像の使用サイズを決めたいと思います。
サイズについて詳しくは以前の記事『BiNDでサイトを作成する時の画像サイズの目安』をご覧いただくとして、ざっくりサイズ基準を決めるならば、
16:9の場合、1,280px × 720px
4:3の場合、1,280px × 960px
1:1の場合、1,280px × 1,280px

あたりが妥当でしょう。
ビルボードや背景などで使う場合はもっと大きなサイズになります。

比率イメージ

SiGNを起動したら先ず「自由に作成[上級者向け]」を選択します。
この例題では4:3の画像を編集したいと思いますので、アートボード設定で1,280px × 960pxを設定します。

アートボードサイズの変更

画面左にあるレイヤーメニューから画像レイヤーを選択して挿入します。
画面右側の基本設定で画像レイヤーの「サイズ」をアートボード同様に1,280px × 960pxで設定します。

画像レイヤー

写真を読み込んで角度調整

基本設定の「画像ファイル」から編集したい写真を読み込みます。
海の写真なので文字通り水平線を基準に角度を調整します。
画像レイヤーをダブルクリックすると右下に角度を調整するハンドルが現れるので、それをドラッグしながら水平になる様に調整します。

角度の調整

そうすると角度をつけた分だけ余白が出てしまうので、画像レイヤー自体を拡大してアートボードの範囲に被るくらいの大きさまで調整します。
比率が変わらない様にshiftボタンを押しながら拡大させてください。

アートボード枠より外側に拡大

これをプレビューで見てみましょう。

水平線の調整後

これで角度調整は完了です。

構図の意図を明確にする為のトリミング

続いてトリミングを行います。
何気なく写真を撮っていると被写体が判りにくかったり、余計なものが写ったりしますが、トリミングをする事でより明確な表現が出来ます。

先ずはサンプルで編集前と編集後をご覧ください。

トリミングの調整前と調整後

神社側から撮影した写真ですが、灯篭が半端に入ってしまい邪魔しています。
神社の床板も何となく邪魔ですね。
鳥居が左に寄っているのも気になります。
ここでは鳥居を主役に邪魔な要素を取り除いてみます。

アートボード枠を基準にトリミング

1,280px × 960pxのアートボード枠内に書き出したい範囲を拡大縮小しながら調整します。
ここでもshiftボタンを押しながら調整するのをお忘れなく。
灯篭や床が入らない辺りまで拡大しつつ、鳥居を中央に配置します。
iPhoneで撮影した写真もそうですが、元の解像度が大きい写真であれば、ある程度大胆に拡大しても大丈夫です。

トリミングの調整後

これでトリミングが完成です。

実際のところ角度調整とトリミングをするだけでかなりクオリティは変わってきます。
この2点は必ずチェックしましょう。

フィルターを活用して一味加えた演出を

SiGNのフィルター機能によりワンクリックで写真の雰囲気を変える事が出来ます。
画面右の「エフェクト」から「フィルター」内のサムネイルをクリックしてください。
写真の雰囲気が次々変わって行くのが分かると思います。

フィルター一覧

Webサイトで写真を複数使う場合などは、撮ったタイミングや環境、機材などによって写真のテイストがバラバラになり易いのですが、全ての写真に同じフィルターをかける事で、ある程度世界観を統一させる事も可能です。
テクニックとして覚えておきましょう。

更に「エフェクト詳細設定」のスライダーで細かく調整する事が出来ます。
例えば暗い写真などは「明るさ」のスライダーをプラス側にスライドさせる事で明るくする事が出来ます。
こちらも覚えておくと便利です。

写真の容量を抑えて読み込みスピードを適正に

よくあるパターンとして、iPhoneなどで撮った写真をそのままWebサイトに貼り付けて公開する事がありますが、これはWebサイトとしてのユーザビリティを低下させている状態なので気をつけてください。
例えばiPhone7のカメラで撮影すると4032px × 3024pxの大きさになりますが、先ほどの必要サイズ(1,280px × 960px)で考えると3倍以上の大きさである事がわかります。
当然容量も大きくなりますし、使う写真が多ければ何倍もの重さに繋がり読み込みスピードに弊害が出ます。
今回の編集を行う事により適正なサイズに落とし込む事が出来ますのでお忘れなく。

Tiny PNG

『高圧縮でWeb画像をキレイに軽くするための厳選ツール』でもご紹介しました画像圧縮サービス『Tiny PNG』を使う事で更に画像を軽くする事も出来ます。
Webサイトは容量が軽ければ軽いほどユーザビリティもSEO評価もアップしますのでこちらもお忘れなく。

如何でしたか?
ちょっとした作業ではあるのですが、これを経るのと経ないのとでは結構な差が生じます。
チェックポイントとして是非取り入れてみて下さい。

その他のSiGN関連の記事を読む