kumausa.com  
 
HOME
ぬりえ
ARTギャラリー
WEB技術教えます
Macをもっと使おう!
これみつけた!
よってけ!地元情報
お友達サイト
著作権等について
このサイトについて
ご意見・ご感想

 

WEB技術教えます

本日のテーマ〔無料でショップサイト 4〕
2005年11月17日

 今回は、teacupに登録して、商品を掲載し、ある程度ページができたので、トップページのデザインをどうしたらよいのか、見せ方について進めて行きます。

【5】トップページのレイアウト

 トップページは、ショップ管理メニュ−より[ 全体デザイン変更 ]にて変更していきます。

基本レイアウトを選ぶ
レイアウトパターンが4つ、色が5つ用意されています。レイアウトパターンはどれも広告が沢山ついてますが、それもデザインの一部と思って選んでみましょう。色は、何色が良いか迷ったら白を選ぶと良いと思います。デザインにも融通がきいて、どんな商品でも目立つと思います。色が決まっている方は、これから作成するお店のロゴ画像を作る際、下地の色にするとよいでしょう。
くまうさの場合、各レイアウトを比較した際、パターン4がユーザピリティーがあり、デザインに融通できると感じ、そちらのパターンで、説明したいと思います。

レイアウトパターン4の場合、お店の顔となるロゴ画像が横700pix以上と、大きい画像でお店を目立たせることが出来ます。この他パターン3でも良いのですが、横は700pix以内の画像が見た目がよいです。

1.画像処理ソフトを用意しよう!
画像処理やドローイングソフトがあれば作るのは簡単です。例えば、フォトショップやフォトショップエレメンツなど有料ソフトや、無料のGIMPというソフトを用意すると良いでしょう。無料ソフトだからといってあなどれませんよ。最初に紹介したフォトショップは8万円ほどするソフトです。もちろんプロ使用なのでお高いんですけど、それに匹敵する程のソフトです。対応OSもいろいろあり便利なソフトです。
http://www004.upp.so-net.ne.jp/iccii/
使い方はここ↑のサイトにあります。ダウンロードもできますので、是非、トライしてみて下さい。

2.画像処理をする。
新規の画像を作ります。画像の大きさは縦100pix横700pixにして下さい。その中で画像を作って行くんですが、レイアウトの背景色を白に設定した方は下地を白に、それ以外の色はそれに合わせた色下地に置いて下さい。
で、上4pix下4pixの余白をとります。これはレイアウトパターンを4にした際に、画像のすぐ上に広告が表示されるので、その表示との間隔をあけるのと、下はカテゴリなどが画像すぐしたに表示されてしまうので、隙間を空けるための余白です。この余白を大きく取ると目立ったホームページになることは確実ですが、しかし、商品が目立たないのと、ページを開いた際、ほとんどがロゴ画像になってしまうので、大体縦が100pix以内におさめるのが一番よいと思います。
両端は間を置いても意味が無いです。しかし、白が画像に対しグラデーションになるのは良いと思います。フェードイン、フェードアウトするように、下地になじませるようにすると、画面と画像の一体感が生まれ、差し支えない目立ったロゴ画像ができます。
私が作ったロゴ画像をみながら、作成してみて下さい。
画像の中にキャッチフレーズなどをいれ、どういうお店なのかアピールするのも良いでしょう。

と、長くなってしまうので今日はここまで。ここまでやればほとんど出来たも同じ。トップページに商品しか掲載しないという方はここまで。
こだわった商品を掲載したいという方の為に、商品の説明をトップページに掲載する方法を伝授いたします!HTML 次はトップページの中身を作ります。手軽に見せるやり方から、画像をつかった物まで、もっとオリジナルにして行きましょう。

 

 





 

△このページの先頭へ

 
  2005-2007 kuma kuma usagi. All Rights Reserved.