ホームページを魅せる!【第5回】

ホーム > ワンポイント講座 > ホームページを魅せる!【第5回】

サイトのクオリティを高めるパーツデザイン(3) 〜写真の引き立たせ方

「画面パーツ」の制作テクニック最終回となる今回は「写真」を題材として取り上げます。

  

撮影した写真をホームページに掲載したいとき、もっとも一般的なのは、左のようにそのまま角版(撮影したままの状態)で掲載する方法だと思います。ただ、企業のホームページでは角版以外にもさまざまな演出で写真を加工することで、写真のデザイン性を高めています。今回はその中からいくつかの方法をご紹介しましょう。

  ※WebPilotでは画像の加工は行えません。市販もしくは、フリーソフトを使って画像の加工を行います。

 

テクニック−1:写真のトリミング・切り抜き

もっともよく用いられる写真の加工方法が、「トリミング」と「切り抜き」です。「トリミング」は写真の周囲の不要な部分をカットする手法で、その写真の「意図」や伝えたい「テーマ」を強調する効果があります。 左の写真では、撮影した状態から手元の部分を残してトリミングしたものです。 手元の部分に集中して閲覧してもらえます。
  
一方、「切り抜き」は商品や人物などの輪郭で写真を切り取り、背景を取り除いてしまう手法です。角版写真だけのページはどうしても直線的で単調なレイアウトになりがちですが、切り抜くことでページの中に画像が溶け込み、ページが引き締まります。 左の写真では、撮影した状態から、背景のグレーな感じや影を省いています。 景色的な写真ではなく撮影対象のみが強調できます。
 
さらに、切り抜いた画像は背景を自由にアレンジすることができます。自分の好きな背景画像の上に切り抜いた画像を重ねれば、商品を引き立たせる演出も簡単に行えます。
左の写真では、撮影した状態に、水色のグラデーションの背景を加えてあります。 涼しい、スッキリ感のあるさわやかなイメージになっています。

 

テクニック−2:写真の印象的な演出方法

 

 

ページのテーマが柔らかい内容のときは、画像をスナップ写真風に加工すると、楽しげで親しみやすいポップな感じで見せることができます。

 

 

また、画像そのものをページの主役ではなく、背景画像などの脇役として使用するケースも多く見られます。その場合は画像をモノクロにしたり、グラデーションで周囲をぼかしたりして写真のトーンを下げると効果的です。

 

テクニック−3:WebPilotで画像にリンクを設定してみよう

前回までで画像をページに挿入する方法をご紹介したので、今回はその画像にリンクを設定する方法をご説明します。

WebPilotで画像にリンクを設定するにはまず、その画像をクリックして選択します。次に「リンク挿入/編集」ボタンをクリックすると「ハイパーリンク」ウィンドウが表示されますので、「ハイパーリンク情報」タブの「URL」欄に、リンク先のURLを入力します。ここで、「http://」は「プロトコル」欄で選択できるようになっているので、「URL」欄にはそれ以降のパスを入力するようにしてください。最後に「OK」ボタンをクリックすれば、画像にリンクが設定されます。

また、「ハイパーリンク」ウィンドウでターゲットを指定することによって、リンク先のコンテンツを現在閲覧中のウィンドウではなく新しく開いたウィンドウ(ブラウザ)側に表示をさせるように指定することもできます。

例 下の小さい写真をクリックしてみてください。 すると別ウィンドウで大きな写真が表示されます。
  この写真をクリックすると新しいポップアップウィンドゥで大きな写真表示
 

※高解像度の写真をそのままページに貼り付けると、閲覧時に読み込む時間がかかります。ページに貼り付ける場合には、一旦、画像処理ソフトで低解像度に「リサイズ」するなどしたものを貼り付けます。 しかし、解像度の高い状態のものを表示させたい場合があります。 そういう場合は、上の例のようにページに貼り付けてある低解像度の写真をクリックしてもらうなどして、そのリンク先に高解像度の写真を指定するとよいでしょう。

 

 

 

このページの先頭へ