写真撮影とWebデザインに通じるテクニック

写真撮影とWebデザインに通じるテクニック

誰もがスマートフォンを持つこの時代、
写真撮影は日常的かつ一般的になっています。
キレイ・映える・盛れる写真を撮る技術は、
誰もが欲しがるメジャーなスキルです。
今回は私の職であるエンジニアの仕事と絡めまして、
写真撮影とWebページや画面デザインに通じるテクニックを書き出してみます。
共通点に着目して理解を深めていきましょう!

①構図

パッと見の印象に大きく関わる部分です。
良いとされている構図をテンプレートとして、
何となく従っておくだけでも見栄えは良くなります。
有名な構図を2つ挙げておきます。

・三分割法
縦横に3分割した線の交点や線上に物を配置するテクニック。
被写体や地平線、メニューバー等の画面の区切りで意識したいですね。

・対角線構図
文字通り対角線上に物を配置する構図。
奥行きや動きを感じやすくなります。

②色

これも第一印象を大きく左右する要素ですね。
一つ一つが何色かも重要ですが、
今回はまとまりで見た時の配色に着目してみましょう。

・モノクロマティック配色
一色を基準に、明度や彩度を変えた濃淡だけで構成された配色。
まとまり感が生まれ、落ち着いた印象を与えやすくなります。

・補色対比
色相環で反対の色を組み合わせると、それぞれの色がより鮮やかに見える現象。
被写体や特定のUIを強調するのに効果的です。

・トライアド配色
色相環上で正三角形を形成する3色を組み合わせた配色。
信号機が代表例で、鮮やかで調和が取れたデザインになります。

③強調

写真もデザインも、何かを強調したいのはよくあること。
そんな時に使えるテクニックをピックアップしてみました。
逆に余計な強調で疲れるデザインになっていないかも注意です。

・被写界深度を浅くする
ざっくり言うと、周りをぼかすというやつです。
嫌でもピントが合う箇所に目が行きますよね。

・コントラストを高める
二つ以上のものの違いをより強める方法。
色や明暗、濃淡やサイズに差を付けるだけでも強力です。

まとめ

私の考えですが、
共通点には物事の本質が詰まっており、
それを学ぶことで地力やセンスが培われます。
今回紹介した共通点の理解を足掛かりにして、
デザインのセンスが磨かれると素敵ですね。