2016年11月20日日曜日

テンプレート【ウォーターマーク02】を基本として、背景画像を変更するだけで、どのようなことが出来るのか検証してみます。



◆使用テンプレートは【ウォーターマーク 02】

 基本デザインとして全4種類が用意されているテンプレート「ウォーターマーク」の中から、今のところ、メインテンプレートとして使用しているのは「02」です。そして、背景画像については、しばらくの間は【旅行】のカテゴリーの中から使用して、いろんなサンプル画像をお見せ出来ればと考えています。

◆ブログに限らず、ネットを使って何を表現したいのか?

 ブログを制作していく中で、この【旅行】のような、いわゆる風景写真などのスナップ的な素材は、比較的ブログに使用される機会も多いと思いますが、このような画像の場合、記事と写真を別々に配置するのが一般的です。

 見せたい部分と文字とが重ならないため、レイアウト的に、それほど工夫する必要もなく収まるため、多くのブログで普通に使用される当たり前なレイアウト方法なのです。

 しかし、タイトルバックやメインで扱う画像の場合など、あえて画像と文字を重ねるようなデザイン的な工夫をする場合もあるはずです。そして、そのような場合に、重ねて表示させてもお互いに邪魔にならないようにするための工夫が必要になります。

 例えば、写真のコントラストを淡い色調にして、白い幕が掛かったような表現に加工すると、バックにある画像が薄く透けて見えるような状態になりますので、そこに文字を重ねても、ちゃんと文字が読めるようになり、画像の影響が薄れるのです。

 画像と記事のエリアとが重なる場合に、文字が読みにくいなどに対する解決方法として、その様な工夫が必要であり、画像処理用のソフトウェアを使て、一つの画像として作りこんで使用するなど、いろんなテクニックを駆使して表現しているのが一般的でしょう。

 しかし、その他にも効果的な方法は無いものか、もっと簡単に表現できないものかと考えるようになり、その一つの表現手段として、レイアウト的に工夫するという単純な方法で、どのような事が可能であるかなどを追求してみたい、と考えるようになりました。


◆具体的にどのようなことを行おうとしているのか?

 単純なことですが、使用する写真素材によって見せたい部分が違いますので、それぞれの写真に合わせて、記事のレイアウト位置を変えるなど工夫を加えながら、写真画像を効果的に見せるレイアウトを試してみたいと思うのです

 先日の記事でも少し触れましたが、使用する背景画像によって、特に強調して見せたい部分が有り、それを効果的に見せるために、あえて記事の位置を工夫して、背景画像だけが見れる状態を作り出していますが、そのようなことをいくつか試してサンプルを作ってみたいと考えているのです。

 背景画像の【旅行】や【自然】のカテゴリーには、写真素材として良いものが多く、一度は使ってみたいと思うものがいくつかあるのですが、なかなか使用する機会が無くて、以前から何とか使う機会を作りたいものだと考えていたのですが、それがやっと実現したという事です。

 そのための一つの方法として、背景画像のカテゴリーは統一しておいた方が、その変化の効果が分かりやすいのではないかと考え、使用する背景画像のカテゴリーを【旅行】で統一して、先ずは始めて見ようと思います。

 その後、【自然】やその他のテーマ・カテゴリーの中からも、機会があれば使ってみたいと考えているところです。


◆例えば、以前このような見せ方の工夫を、実際に試しました。

ここで、例題として使用している内容は、前に紹介した内容と重複する部分もありますが、全体の考え方として、改めてまとめたものです。




 この画像は、おそらくイタリアのローマ、ベネチア周辺の写真だという事ですが、正面左側にヴェネツィア広場ヴィットーリオ・エマヌエーレ2世記念堂と正面遠くにカピトリーノ美術館だと思う建物が見えます。

 この画像の場合何がメインだろうかと眺めていて、やはり右側の大きく映し出された教会を手前にしながら、遠近感を生かして映し出した有名な観光地を見せたかったのだと思います。

 しかし、それはそうだと思いながらも、自分としては手前右側にあるドーム状の建物が気に入っていることは間違いありませんので、実際に見せたい画像が何にしろ、メインの画像が街並みでありゴチャゴチャしています。

 使うにはそれと重なるように記事を載せるしかありませんが、記事と画像が重なり合ってしまうのを避けることが出来ませんので、色々と考えて、右側を強調して見せることで、画像の見せたい部分を多少は犠牲にしながらもそれを最小限で押さえつつ、違和感のないように遠くの建物も見せることが出来るレイアウトにしています。

 このように右側のエリアをメインとして考え、その右側部分を強調して見せるレイアウトにすることで、たとえ記事の下に消えてしまう部分があったとしても、それが意図的になされているので、違和感なくレイアウトできたと思います。

 このレイアウトを実現するために、一般的なブログとしては、右側に様々な情報を掲載しているサイドバーが配置されていると思うのですが、そのサイドバーを無くして、写真がしっかり見れるように変更するという工夫をしたことが効果的でした。

 サイドバーで配置するはずだったそれぞれのガジェットは、全てフッター部分に集約していますので、記事のエリアとその他のエリアを完全に分けることが出来ました。

 閲覧者の立場としては、フッターの部分にその他の情報が集約されていますので、スクロールする機会を最小限に抑えられて、逆に、ブログ全体の構成が見やすく、分かり易い状況を提供できたと思います

 ここで使用した画像は Blogger に最初から収められている背景画像のサンプルを使用しているのですが、例えばオリジナル画像を使用することも可能ですので、その場合でも、今回のような見せ方を取り入れる事で、自分の好きな画像を効果的に演出して見せるための、一つの方法として有効ではないかと思います。


◆サンプル画像に関する記事はこちら

 → テンプレート【ウォーターマーク02】 + 背景画像 【旅行 01-3】

 → 背景画像【旅行 - Travel】について


ブログの制作行程を簡素化する Blogger のテンプレート。

 Googleが提供している無料ブログシステムのBloggerを実際に使っていく場合、ブログ全体のデザインについてどうしようかと悩むと思いますが、その全体のデザインを向上させるために、Bloggerでは多数のデザインフォーマットを用意していて、そのフォーマットのことをテンプレートといいます。

 現在のところ、全34種類のテンプレートが用意されていますので、ブログ制作者は、その中から自分のブログのイメージに合ったテンプレートを選び、使用することができます。背景のイメージ画像を変更することで、さらにバリエーションを増やせますので、そのデザイン的な効果は、ほぼ無限大と云えます。

 ※記事を作成し、写真とともに投稿すると、このサンプル記事のような感じで掲載することが出来ます。写真のサイズや文字の大きさ、種類色についても自由に変えられます。


 背景画像は同じでも、テンプレートのバージョンを変更することによって、ブログ全体に対してどのような変化が起きるのかなど、イメージ画像で確認出来ると思います。今後のブログ制作の参考になれば幸いです。

 通常のブラウザの設定では、背景画像は左右に少ししか見えない状態ですので、ブラウザ右上にある最大化をクリックして、是非全体像をご覧ください、印象がだいぶ違います。

 イメージ画像ではよくわからないという方のために、サンプル画像との組み合わせの他、ウォーターマークの各テンプレートと、その他の背景画像とを組み合わせた状況でブログ全体をご覧いただけるようにすることもできます。

 ブログ全体を実際に使用できる状態でご覧になりたいというご希望があれば、ご希望の組み合わせで使用できるようにして対応させていただきますので、下記の「コメント投稿」欄から、ご希望の組み合わせ等をお寄せ下さい。


背景画像についての解説は

◆リクエスト方法については

0 件のコメント:

コメントを投稿

ご覧いただき感謝します。ご意見やご質問がありましたら、下記のコメント欄へお願い致します!