【12上級編】トップページ用の画像を作ってみよう♪

【12上級編】トップページ用の画像を作ってみよう♪

トップページ用の
画像を作ってみよう♪

The work which was manufactured by the concept," thestyle "
In the various reasons, it stops an exhibition.
Digital rendering architectural construction Graphic.

info_page

【Level 12 上級編】

トップページ用の画像を作ってみよう♪
さて、いままで解説してきたおさらいをかねて具体的に、どんな画像を作ったらいいのかを、わたしなりに思いついた方法を説明させていただきます。

思いつきかよー、と一人つっこみ(笑えない)

このページでは、簡素化した以下の図を使って説明していきます。
画像を作るのが面倒なので小さくしました。　しかもテーブルで表現してます。わかりづらいですね(汗)
Contents 01　Contents 02　Stop Flash

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

.

←1.ヘッダー

.

←2.Gナビ

.

←3.ビジュアル

.

←4.メニュー

.

←5.フッター

企業サイトでよく見かける王道(？)のレイアウトです。
上から順番に説明しますと

サイト名等が入るヘッダー部分。
グローバルナビゲーション(Gナビ)。
そして、当サイトが目をつけたビジュアル部分。
コンテンツのメニュー
コピーライト等を入れるフッター部分

当サイトの目的は、4.のコンテンツが少ない(もしくは、まったく無い)のが原因でスカスカになってしまうトップページを、3.のビジュアル部分に大きな画像等を、無理やり詰め込みスカスカを解消しちゃおうよ、というのが狙いです(笑)

main

BR→

ビジュアル画像の作り方

画像の作り方の基本
キャッチコピーとキービジュアルを組み合わせる。

キャッチコピー
まず、キャッチコピー(タグラインとも言います)。
Webサイトで伝えたいことを、短い言葉で表現してみましょう。
コピーライターになったつもりで、つい引き込まれてしまうような魅力的な言葉を考えてみましょう。

キービジュアル
ビジュアルに使う素材は、なるべくサイトのイメージを表すものを選びましょう。　このキービジュアルでWebサイト全体のイメージが決まってしまうほど重要です。

下に、いくつか例を作ってみました。(参考になるかなぁ？)
必ずしも、この通りに作る必要は、ありません。
あなたの感性で考えてみてください。


.	.
↑ キャッチコピー	↑ キービジュアル

余白をたっぷり使ったシンプルな例

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑素材をどこに配置するかが重要です。
グリッドを使い黄金比率でレイアウトみたいなことは必要ないでしょう(笑)

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑枠線をつけると素人でも作りやすいです。　線を使わないで空間を表現できるのがプロなのでしょうね(ボクぢゃ無理です)

キャッチコピーをメインにした例

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑キャッチコピー自体で注目させた例。　認知的不協和(心理ギャップ)を求めすぎてコンテンツの内容と、まったく違うコピーにするとひんしゅくを買いますのでご注意を(笑)

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑文字を大きくした例。　大きければ目だつというものじゃありません。　目だたせたい周りを控えめにすることの方が重要です。

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑素材に合わせて文字も傾けた例。　文字を乗せると素材によっては、可読性が損なわれるので、ドロップシャドウをかける等の配慮も忘れずに。

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑文字を傾け変化をつけた例２。
文字がキャンバスからはみだすようなレイアウトも効果的です。

キービジュアルをメインにした例

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑画像の彩度を上げて素材を印象的に見せた例。
　ソファーだけ彩度を上げても目だちますね。

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑画像のコントラストとRGBを変更しただけの例。
　フォントの選び方でイメージも変わってきます。

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑彩度を下げてグレースケールにするだけでも印象的に。
赤い文字が似合いそうですね(←好みですが)

Site Name
■Top Page ■製品情報　■サービスガイド

Information □_______________ □_______________ □_______________	Solution □_______________ □_______________ □_______________
Sitemap \| Privacy Policy \| Contact
Cpyright(c) skaska All rights reserved.

↑どこかで見たCFみたいですね
別レイヤーを部分的に白で塗りつぶし乗算で重ねただけです。

素材が重要
キービジュアルをメインにした場合、やはり素材が重要です。　素材配付サイト等を活用して気に入った素材を探しましょう♪

ここまでは、キービジュアルとキャッチコピーの簡単な組み合わせ例でしたが、
次は、型にはまらない、さまざまなバリエーションです。

main_box