スマホで簡単!ホームページ作成に使える写真撮影術!前編~光と構図

スマホで簡単!ホームページ作成に使える写真撮影術!前編~光と構図

公開日:2021/7/9
 最終更新日:2024/5/31

ホームページとは「情報を可視化した集合体」です。あなたの会社の情報や、提供しているサービスの情報などを、文字や画像などで可視化しています。 情報を可視化した要素を大別すると「文字」と「画像」に分けられます。つまりホームページは「画像」と「文字」の集合体なのです。

ホームページを構成する要素として文字はとても重要ではありますが、「情報を伝える」という点でいえば、文字だけで簡潔に説明するのはなかなか難しいのではないでしょうか。

そのような時に使えるのが「写真」です。写真は文字にしにくい情報、例えば「状況」「感情」「形」「質」なども、見た瞬間に簡潔に伝えられます。「文字」の情報を「写真」で補うのは、必要不可欠といえるでしょう。

昨今ではインターネット環境の発展に伴い「動画」という新たな手法も出てきました。
動画はたくさんの情報を伝えられますが、とはいえ自分で撮影・編集するにはまだまだ敷居が高い、と思っていらっしゃる方も多いと思われます。

それに比べるとスマートフォンの普及と発展により「写真撮影」はもはや当たり前の行為となりました。いつも行っている写真撮影でも、少し意識するだけでもっと効果的で素敵な写真が撮れるようになります!
今回はスマートフォンでも簡単にできる撮影術をご紹介します。

前編では、いつも何気なく撮影している写真から、ワンランク上の撮影ができるようになるために意識したい3つのこと、

  • 「 写真素材の選び方 」
  • 「 光(ライティング)」
  • 「 構図 」

についてご紹介していきます。

なお、ホームページ作成をご検討なら、BESTホームページをご検討ください。


01写真素材の選び方

掲載したい画像を選ぶ際は、イメージ系・情報系と整理しましょう。
表現したい被写体は同じであっても、目的や利用シーンごとに変えられれば、より効果的に写真を使用できます。

イメージ系 情報系
シーンを伝える
感情を伝える
形を伝える
機能を伝える
質を伝える
イメージ系画像①

新緑の清々しさや神社仏閣の静謐さ

イメージ系画像②

会社の活発な雰囲気、仲の良さ、信頼感

情報系画像①

商品、果物の瑞々しさや質感

情報系画像②

商品のサイズ感、色や質感

どのページで、どんな場所に写真素材を使うか…と迷ってしまうこともあるかもしれません。
ホームページでは「企業情報」や「製品」「サービス」「技術」「採用」など、発信したい情報は様々存在します。
発信したい情報をイメージ系・情報系と分けると、実はほとんどの情報が写真や画像で表現したり、情報を補足したりできます。

全ての情報を写真で表現しましょう、ということではありません。ですがやはり商品情報や会社の雰囲気などは、文字より写真の方が閲覧者にとってイメージしやすいので、文字の補足情報として写真を効果的に使っていきましょう。

1-1.カメラの選び方

最近ではカメラ性能の高さを売りにするようなスマートフォンも発売されるようになり、機種によってはスマートフォンでもデジタルカメラのようなきれいな写真が撮影できるようになってきました。

スマートフォン コンパクト
デジタルカメラ
ミラーレス
一眼レフカメラ
一眼レフカメラ
特徴・メリット 撮影~編集~シェアまでが直ぐにできる 持ち運びのしやすさ
低価格
一眼レフ並の撮影結果
電子ファインダー
持ち運びのしやすさ
高画質
視野率100%
防塵・防滴構造
得意な撮影 自撮り/記録・ブログ
アプリを使った撮影
モード機能を使った撮影
スナップ写真
接写/スナップ写真 動体予測/連写/接写
ピント調節 遅い 遅い 一眼レフより遅い 高速
ズーム/望遠 デジタルズーム
※使用はお薦めしません
光学/デジタルズーム 光学/デジタルズーム
レンズ交換が可能
光学/デジタルズーム
レンズ交換が可能
大きさ/重さ 小さい/軽い 小さい/軽い 小~中/軽い 大きい/重い
値段 1万円~ 3万円~ 5万円~
スマートフォン コンパクト
デジタルカメラ
特徴・メリット 撮影~編集~シェアまでが直ぐにできる 持ち運びのしやすさ
低価格
得意な撮影 自撮り/記録・ブログ
アプリを使った撮影
モード機能を使った撮影
スナップ写真
ピント調節 遅い 遅い
ズーム/望遠 デジタルズーム
※使用はお薦めしません
光学/デジタルズーム
大きさ/重さ 小さい/軽い 小さい/軽い
値段 1万円~
ミラーレス
一眼レフカメラ
一眼レフカメラ
特徴・メリット 一眼レフ並の撮影結果
電子ファインダー
持ち運びのしやすさ
高画質
視野率100%
防塵・防滴構造
得意な撮影 接写/スナップ写真 動体予測/連写/接写
ピント調節 一眼レフより遅い 高速
ズーム/望遠 光学/デジタルズーム
レンズ交換が可能
光学/デジタルズーム
レンズ交換が可能
大きさ/重さ 小~中/軽いx 大きい/重い
値段 3万円~ 5万円~

気をつけたいのは望遠撮影でスマートフォンを使用する場合です。
スマートフォンのズーム機能を使って撮影すると、画質が低下してしまった経験はありませんか?

実はスマートフォンのズーム機能はそのほとんどが、画像自体を引き延ばして拡大し、まるでズームしているかのような画像にしています。 レンズを動かすことによって焦点距離を変化させ、劣化させず拡大撮影しているのとは異なるため、画像が荒くなり画質が低下することがあるのです。

[引用]
デジタルズームはレンズ自体はそのまま動かさないため、実際に写る大きさは変わりません。 CCD に写った画像の一部を拡大することで被写体の大きさを変えています。一部を補完拡大することで、あたかも望遠で撮影したかのように見せているため、デジタルズームを使うと画像が荒くなることがあります。

出典:オリンパス

最近では画角の異なる複数のカメラを搭載したハイエンドなスマートフォンも登場しています。目的に合わせてカメラを選ぶとより良い写真が撮影できますね。


02光(ライティング)

光には「自然光」と「人工光」があり、色には温度があります

2-1.色温度

全ての光源には色味があります。光源が発する光の色を定量的に表現したものを「色温度」といい、単位を「K=ケルビン」で表します。

色温度はあくまで光源の光の「色」を表したものになりますので、光源の“温度”や“明るさ”とは異なる概念となります。
色温度は低いほど赤みがかった色をしており、高くなるにつれて黄色味がかった白色になっていき、より色温度が高いと青みがかった色になります。

たとえば自然光であれば朝日や夕日の色温度はおよそ2000K(ケルビン)、晴天時の太陽光はおよそ5500Kです。
人工光であれば、ろうそくの炎がおよそ2000K、白熱電球はおよそ2800K、蛍光灯がおよそ5200K程度となります。

「朝の雰囲気」や「料理を美味しそうに」など、シーンごとにふさわしい光源を選ぶと、より狙った効果のある写真を撮影できます。

自然光と人口光の色温度差

2-2.自然光と人工光のメリット・デメリット

自然光と人工光(スタジオ撮影)には、それぞれメリットとデメリットがあります。
実際に同じ被写体で、自然光と人工光で撮影した写真を見比べてみましょう。

自然光撮影写真 人口光撮影写真
参考:12月 晴天 12:00頃 一眼レフ 加工なし 参考:12月 スタジオ プロカメラマン撮影

①の写真が屋外で自然光により撮影した写真、②の写真がスタジオにて人工光で撮影した写真となります。

自然光の写真は①でもわかる通り、屋外での撮影となると影が出やすくなります。特に、晴天のお昼頃から夕方にかけては濃い影が出やすいです。
ただし、②のスタジオ撮影と比べると濃淡ができていて、表情豊かに仕上がっています。

②の写真のような人工光を使ったスタジオ撮影では、光の回り込みや濃い影が出ないよう、光源の光量を調節することが多く、さらに光源の位置も調節できます。
調節できることで常に安定した撮影結果が期待できますが、自然光の撮影より濃淡が出にくい仕上りになります。

このように、自然光は人や物体を一番色鮮やかに見せる、高品質で低コストな光源となります。ですがその反面、季節や天候、時間を選ぶというデメリットもあります。
ストロボのフラッシュや室内の灯りは全て人工光になります。人工光は多少、初期の設備投資が必要になりますが、安定した撮影結果が期待できます。

光源 仕上がり メリット デメリット
自然光 鮮やかな色 手軽に撮影が可能 季節・天候・時間を選ぶ
人工光 撮影結果が安定 いつでも撮影が可能 設備投資・セッティングが必要

2-3.光の「強さ」と「方向」と「質」

光には「強さ」「方向」「質」があります。
同じ撮影環境で撮影した写真で、季節と時間が異なる写真を見比べてみましょう。

5月晴天撮影写真 2月晴天撮影写真
参考:5月 晴天 12:00頃 スマホ 加工なし 参考:2月 晴天 15:00頃 スマホ 加工なし

同じスマートフォン、同じお店、同じメニュー、同じテーブルで撮影した写真です。

①の写真は、明るい曇りの日、午前中に撮影したものです。
朝食シーンを思わせるような爽やかな写真になっています。明るい曇りの日なので太陽の光が直接入ってこなかったため、影が薄く、加工なしでそのまま使用できる写真になりました。
Instagramで「イイネ」が付きやすいのはこちらの写真です。

②の写真は、よく晴れた日、15:00頃に撮影したものです。
影が濃いのは、時期的に太陽が沈みかけている時刻で、横から太陽の光が射しているためです。また、夕方になりつつあるため光源である太陽の光の色温度が低く、やや赤みがかった写真になっています。
影が濃いのは料理写真としてはNGですが、左の写真よりムーディーさは出ていますね。

撮影環境が同じでも、季節と時間で、撮影後の結果は全く異なってきます。
同じ被写体でも、撮影時間や光の向きを変えることで、効果的な撮影が可能となります。

2-4.ホワイトバランス

人間の目は大変よくできています。

光には色温度があるので、実際には光源によって対象物(被写体)には色がついています。例えば、電球の光は黄色っぽいですし、曇りの日の太陽光は青っぽい色がついています。ですが、人間は「白いものは白い」と認識して自動的に補正をかけるので、色温度が異なる状況でも同じように白は白と見ることができるのです。

カメラで撮影した写真が、自分の見ている対象物(被写体)と異なる色で撮影されていた経験はありませんか。カメラには人間と同じ機能は備わっていない為、色温度の影響を受けて色味をそのまま写真に再現してしまいます。光によっては白色が肉眼で見るよりも黄色く写ったり、青く写ったりしてしまうことがあるのです。

ですので、カメラには対象物(被写体)の色を教えてあげる必要があります
これを「ホワイトバランス」と言います。

一眼レフの場合は、ホワイトバランスを設定する項目があるので、何種類か設定を変更しながら撮影を繰り返し、狙ったホワイトバランスまで調整していきます。

ホワイトバランスとは、撮影環境での光の色の影響を補正して、白を白く写すための機能です。ですが、必ずカメラに「白は白色ですよ」と教える必要はありません。表現したいイメージや利用シーンによって、「冷たい印象」や「温かみのある印象」をこのホワイトバランスで作れるのです。

一眼レフで撮影(ホワイトバランス設定しながら撮影)

一眼レフで撮影(ホワイトバランス設定しながら撮影)

スマートフォン撮影(撮影後にスマートフォン標準の編集機能で色味を変更)

スマートフォン撮影(撮影後にスマートフォン標準の編集機能で色味を変更)

03構図

写真はどのように撮影しても自由、というのが大前提です。
しかし写真の構図には、基本のパターンというものが存在します。

自由ではあっても、基本を知っているのと知らないのとでは、写真撮影が上達するまでにかかる時間が違ってくるかもしれません。代表的な構図をご紹介していきます。

3-1.代表的な構図①「三分割構図」

中心より少しずらすことで、落ち着いて見える効果があります。

画面を縦横にそれぞれ3分割し9分割とした際に、ライン上または交差するポイントにメインとなる被写体を配置する構図です。
中心より少しずらすことで、安定感や奥行きのある写真になり、落ち着いて見える効果があります。

三分割構図イメージ

参考:プロカメラマンによるスタジオ撮影

3-2.代表的な構図②「三角構図」

被写体で三角形を作る構図です。重心を下に置くことで、安定感が生まれます。

写真の上部を「天」下部を「地」としたときに、天地の間で地を広く、天を狭くして三角形に見える構図です。地が広いので安心感・安定感が生まれます。
ポイントは重心を下に置くことです。対象物が逆になってしまう場合は、下側を支えるようにし落ち着かせます。

三角構図イメージ

参考:プロカメラマンによるスタジオ撮影

3-3.代表的な構図③「日の丸構図」

被写体を写真の中心に配置する構図です。中心のみに強い印象を与えます。

写真の中心にメインの被写体があり、パッと見た瞬間に目が合う、というような強い印象を与える構図です。
日の丸構図の特徴は、中心に強い視線集中が起こることです。逆に言えば、写真の中心一点にのみ視線が集まり、写真周辺は見てもらえなくなります。

簡単な構図ではありますが、見せたい被写体そのものに視線が集まるため、他の構図と比べて特に魅力的な写真である必要があります。

日の丸構図イメージ

参考:プロカメラマンによるスタジオ撮影

3-4.代表的な構図④「シンメトリー構図」

左右 または 上下 に対象性のある構図です。端正な印象を与えます。

左右対称性、または、上下対称性の構図をいいます。水面に写る被写体もシンメトリー構図になります。
シンメトリー構図は、静寂、閑静、上品、端正などの印象を与えられます。

また、これらのイメージをもった被写体と組み合わせることで、いっそう構図が引立ちます。

シンメトリー構図イメージ

参考:プロカメラマンによるスタジオ撮影

3-5.代表的な構図⑤「対角線構図」

被写体を不安定にすることで、躍動感、力強さを表現できます。

リズム感や躍動感を表現するのに向いているのが対角線構図です。
手前から奥へ、下から上へなど、安定感を与える水平の構図を崩して、不安定にすることで、力強さを表現したいときなどに使います。

対角線構図イメージ

参考:プロカメラマンによるスタジオ撮影

3-6.代表的な構図⑥「放射構図」

奥に向かって狭くなる「収束点」を作り、奥行き感を出します。

写真と言う限られた世界の中で、三次元的な空間の広さを表現し、躍動感を持たせるのに大変有効な構図です。

放射構図イメージ1

参考:プロカメラマンによる撮影

放射構図イメージ2

参考:プロカメラマンによる撮影

他にもさまざまな構図がありますが、今回はよく使われる、使いやすい6つの構図をご紹介しました。
これらを活用・組み合わせることで、より魅力的な写真を撮影しましょう!


04スマートフォンで撮影した写真をそのままホームページに!BESTホームページ

写真をアップロードしやすいホームページ作成サービスをお探しなら、「BESTホームページ」をおすすめします。

BESTホームページ

BESTホームページでは、パソコンからの操作はもちろんのこと、スマートフォンでデザイン・ページ作成が可能です。

例えば、スマートフォンで撮影した写真をホームページにアップロードする場合、パソコンに一度移してからでないと投稿はできないでしょう。

しかし、BESTホームページならスマートフォンから直接ホームページへアップロードができるので、手間なく写真の投稿・編集ができます。

そのほかにも、SNS連携やSEO設定といった多彩な機能を搭載していますが、全て直感的な操作でできるので、作業の効率化も図れるはずです。

今ならBESTホームページの全機能が使える15日間の無料体験を実施中ですので、気になる方がいらっしゃいましたらぜひお気軽にご利用ください。


05後編では撮影テクニックと写真事例をご紹介

今回はスマホを使って写真撮影を行う際の、素材・カメラの選び方や構図について解説しました。

いくら高性能なカメラを使っていたとしても、素材や構図を考えないと見栄えのしない、しっくりこない写真になってしまうでしょう。

カメラ・光(ライティング)・構図を明確にしてから写真撮影を行えば、きっといつもよりワンランク上の写真撮影ができるはずです。

撮影テクニックや写真事例については、「スマホで簡単!ホームページ作成に使える写真撮影術!後編~撮影テクニックと加工」で解説しています。

実践的な手法、撮影時の参考を知りたい方は、後編の記事も忘れずにチェックしましょう。

― この記事を書いた人 ―

BESTホームページ運営事務局

BESTホームページ運営事務局

3万サイト・30万ページの提供実績を持つホームページ制作会社が運営。成果の出るホームページ作成・運用ノウハウを初心者の方にも分かりやすくお伝えします!

> このライターの記事一覧


関連記事



― Let's Share! ―