ホームページ制作をする際、画像は必ず使用します。
「おしゃれな画像や文字のフォントに目が引かれるホームページを作りたい」
「でも画像を加工する方法がわからない…」
こんな悩みが出てくるのではないでしょうか？
ホームページの見栄えを良くするためには、画像の加工が必要です。この記事では、全て無料でできる画像加工の方法を紹介します。
Contents
画像のリサイズ方法
リサイズとは
リサイズとは画像を縮小することです。画像には画素数(ピクセル)という単位が使われます。
3840px×2160pxの画像を1920px×1080pxへと縮小(リサイズ)します。
A4サイズの紙を年賀状サイズまで縮小するイメージをしてください。
デジタルカメラやスマートフォンの高性能化に伴い、写真の画質は鮮明で綺麗なものばかりですよね。しかし高画質な画像は画素数を大きくします。
では画素数が大きい画像をしようした場合、どのような不都合があるのでしょうか？
画素数が大きいとホームページの動作が遅くなります。
大きい画素数の画像を使用したホームページをスマートフォンで表示する場合、画像を適正なサイズにする処理を行うため動作が遅くなるのです。
そのため使用する画像のサイズがホームページの動作を左右するのです。
ただし画像のリサイズには、画質が粗くなるデメリットがあります。
画像がざらついてしまったり輪郭がぼやけるため、画質が落ちてしまうのです。
画像の画質が低い(画素数が小さい)場合は、粗さが特に際立つので注意しましょう。
ホームページに使う画像の適正サイズを知るには
ホームページには適切なサイズがあるのをご存知ですか？
「画像がはみ出してしまう」「欲しい位置に設定できない」と悩むこともあるでしょう。
画像がはみ出たり、ズレたりする原因はサイズオーバーが考えられます。
そこで画像の適正サイズを知る方法を2種類紹介します。
- ブラウザがChromeの場合：画像を右クリック→「検証」をクリック→画像のサイズ確認
- ブラウザがIEの場合：画像を右クリック→「プロパティ」をクリック→画像のサイズ確認
画像をリサイズする方法2つ紹介
リサイズの操作手順をスマートフォンとパソコンの2つ紹介します。
スマートフォンの場合
下記アプリをインストールしてください。※iOS・Android対応
画像加工アプリ：Vitaloij Schaefer
Android
https://play.google.com/store/apps/details?id=de.vsmedia.imagesize&hl=jp
- リサイズする画像を選択
- サイズを選択
- 画像を保存
操作が簡単で手軽にリサイズできるのでおすすめです。
パソコンの場合
MacBookとWindowsどちらも専用のソフトは必要なく、リサイズが可能です。
Mac
- リサイズする画像をプレビューで開く
- 鉛筆マークをクリックし「サイズ調整ボタン」をクリック
- 任意のサイズを指定し「OK」をクリック
Windows
- ペイントを起動
- ファイル→開く→画像ファイルを選択
- ホームタブをクリックしサイズ変更をクリック
- 任意のサイズを指定し「OK」をクリック
切り抜き方法
切り抜きとは
画像の使用したい部分を、輪郭に沿って切り抜くことをいいます。
切り抜きを行うことで、被写体のみを際立たせたり画像の編集に役立つでしょう。
例えば写真から人物を切り抜き、吹き出しを入れる加工ができます。
吹き出しを入れた画像を使えば、ホームページにインパクトを与えれますよね。
また切り抜いた画像はホームページのバナーを作る際にも活躍するでしょう。
バナーとは「店舗ののぼり」をイメージしていただければわかりやすいと思います。
ホームページで使うバナーはサイズが小さいため、無駄な背景を透過した切り抜き画像が編集にピッタリですね。
画像の切り抜き方法を2つ紹介
切り抜きの方法をスマートフォンとパソコンの2つ紹介します。
スマートフォンの場合
下記アプリをインストールしてください。※iOS・Android対応
背景透明化：handyCloset Inc.
iOS
https://apps.apple.com/jp/app/%E8%83%8C%E6%99%AF%E9%80%8F%E6%98%8E%E5%8C%96/id926035241
Android
https://play.google.com/store/apps/details?id=com.handycloset.android.eraser&hl=ja
- 「写真を読み込む」をタップ
- 画像を選択
- 切り抜きたい被写体を枠で囲む
- 丸いカーソルをドラッグして余分な背景を削っていく
写真をピンチアウト(ズーム)して、細かい箇所まで背景を削除できるため操作性は抜群です。
パソコンの場合
下記リンクで簡単に切り抜き画像ができます。※Mac OS・Windows対応
- 「画像をアップロード」をクリック
- 切り抜く画像を選択
- 「編集」をクリック
- 「削除/復元」タブをクリック
- ブラシで余分な背景を削っていく
文字を入れる方法
画像に社名・ブランド名を入れるメリット
文字を入れる際には、社名やブランド名を記名すると良いでしょう。文字入れするメリットを2つあげます。
１つは社名を入れることで自社のブランドをアピールできます。
第三者が商品の画像を見たとき、あなたの会社の商品かを見極める術がないからです。
例えばSNS上にあなたの会社の商品画像が投稿されていた場合、何も文字入れされていない画像はどのメーカーの商品なのかわかりません。
せっかく自社の商品が投稿されているのに、メーカー名がわからないのはもったいないですよね。
商品の画像に社名やブランド名を文字入れして、全世界にアピールしましょう。
2つ目に画像の著作権を守れることです。
ホームページに画像を使用すると、他者にその画像を無断で利用されることもあるでしょう。
なぜならインターネット上にある画像は、誰でもダウンロードできてしまうからです。
ダウンロードした画像をブログやSNSなどに転載し、あたかも自分のモノのように不正利用されてしまいます。
そのため自分の画像を守るためにも、社名やブランド名を入れることはとても重要です。
画像に文字を入れる方法を2つ紹介
画像に文字を入れる方法をスマートフォンとパソコンで2つ紹介します。
スマートフォンの場合
下記アプリをインストールしてください。※iOS・Android対応
Phonto 写真文字入れ：youthhr
Android
https://play.google.com/store/apps/details?id=com.youthhr.phonto&hl=ja&gl=US
操作手順
- 画像を選択
- 文字を入れたい箇所をタップ
- 文字を入力
- フォントや文字色・サイズを調整
フォントの種類が豊富で初心者でも手軽に操作できるのでおすすめのアプリです。
パソコンの場合
Pixlr editor ※Mac OS・Windows対応
下記URLをクリックしてください。
操作手順
- 「画像を開く」をクリック
- 文字入れする画像を選択
- 「テキストを追加」をクリック
- 文字を入力
- フォントや文字色・サイズを調整
テキストの挿入だけでなく画像全体の明るさなどを編集できるので、おしゃれに仕上げることができます。
まとめ
ホームページで使う画像の加工方法を3つ紹介しました。
- 画像をリサイズする方法
- 画像の切り抜き方法
- 画像に文字を入れる方法
選んだ画像・写真が綺麗でも見栄えを良くするには加工をするのが一般的でしょう。
あなたが他のホームページを開いた時、見栄えが悪いページだったらすぐに閉じますよね？
自分が作ったホームページに長く滞在してもらうには、文字だけでなくおしゃれな画像も重要です。
画像挿入前後でサイト滞在時間を比べてみるのも面白いですよ。
