css position

デザイン五輪書

CSSのpositionプロパティでクリックできる商品棚を作る

読了までの目安時間:約 52分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

商品棚

前置き

インパクトもバッチリ!

今回は、商品販売サイトにピッタリの、商品棚の作り方をご紹介したいと思います。
見た目的なインパクトが期待できます。

Photoshopのテクニック、ボックスを任意の場所に表示する為のpositionプロパティ、ボックスの重なり順を操作するz-indexプロパティなど、今回も様々なテクニックを学ぶ事が可能です。
今回は少し難易度が上がりますが、頑張って最後まで実践してみて下さい。

難易度が高い分、このテクニックを使用している商品販売サイトは多くありません。
つまり、他のサイトにインパクトで勝る事もできます。
頑張って作ってみましょう!

▲もくじへ戻る

商品棚を作る

Photoshopの新規ファイルを作成する

まずは、Photoshopを起動して、商品棚を作りましょう。
Photoshopが起動したら、「メニューバー」の中の「ファイル」をクリックし、その中の「新規」を選択します。

「新規」ダイアログが開いたら、「幅」と「高さ」を任意の数字にします。
「解像度」はウェブ用の「72px」のまま、カラーモードもウェブ用の「RGBカラー」を選択します。
「カンバスカラー」は「透明」にして下さい。

作例では、「幅」が「500」で「高さ」を「600」にしました。
以下の説明もこのサイズを前提にして行きます。
ですので、異なるサイズが必要な方は、作例通りに作成した後、最後にサイズを変更して下さい。

新規ダイアログ

▲もくじへ戻る

棚を作る

では、まずは商品を置く部分となる棚を作りましょう。
棚を一つだけ作れば、何段の棚になろうとも、使い回しができます。
これがPhotoshopの便利なところです。

「ツールパネル」の中から、「長方形ツール」を選択して下さい。
「角丸長方形ツール」、「楕円形ツール」、「多角形ツール」、「ラインツール」、「カスタムシェイプツール」が表示されている場合は、長押しして下さい。

長方形ツール

「オプションパネル」の「ツールモードを選択」を「シェイプ」にして下さい。

ツールモード

キャンバスの中央部分をクリックします。
表示された「長方形を作成」ダイアログの「幅」を「400px」、「高さ」を「75px」に設定し、「中心から」にチェックを入れます。

長方形を作成

描画された長方形に遠近感を付けたいと思います。

「ツールパネル」の中から、「パス選択ツール」を選びます。
もし、「パスコンポーネント選択ツール」が表示されている場合は、長押しして下さい。

パス選択ツール

長方形の上辺二つのアンカーポイントをドラッグ選択します。

アンカーポイントをドラッグ選択

選択したら、「メニューバー」の「編集」の中の「ポイントを変形」にマウスを合わせ、表示された「拡大・縮小」をクリックします。

「オプションパネル」の表示が切り替わります。
「W」と「H」の間に表示されている「縦横比を固定」が入力されていない事を確認し、「W」を「75%」と書き換え、キーボードの「Enter」を入力します。

長方形パスの拡大・縮小

棚は、ガラス張りの部分と金属フレームの部分とがあります。
つまり、この図形が二つ必要になりますので、レイヤーを複製しましょう。

「レイヤーパネル」の中の長方形1レイヤーを複製しますので、「レイヤーパネル」下部にある「新規レイヤーを作成」まで、長方形1レイヤーをドラッグします。

長方形1レイヤーを複製

この二つのレイヤーは常に同じ位置にある必要がありますので、グループ化します。
キーボードの「Shift」を入力しながら、長方形1レイヤーをクリックして下さい。

そして、「メニューバー」の中の「レイヤー」をクリックし、「レイヤーをグループ化」を選択します。
すると、二つのレイヤーがグループ化されます。

グループレイヤー横の「▼」をクリックし、グループレイヤーを展開します。

グループレイヤーを展開

上にある長方形1のコピーレイヤーを選択して下さい。
このレイヤーを棚の金属フレーム部分に変更します。

「パス選択ツール」が選ばれたままである事を確認し、「オプションパネル」の中の「塗り」と「ストローク」を変更して行きます。

シェイプの塗りとストロークの変更

「塗り」の横にあるカラーボックスをクリックし、「カラーなし」を選択して下さい。
「カラーなし」は、赤で斜線が入っているカラーボックスです。

「ストローク」横の「0pt」の部分に、金属フレームの太さを記入します。
作例では「8pt」にしました。

その横にある「-」の部分をクリックします。

-をクリック

「ストロークオプション」が表示されますので、「線端」と「角」を真ん中の丸みがあるものに変更しておきます。

金属フレームに、金属らしい光沢を追加します。

「レイヤーパネル」下部にある「レイヤースタイルを追加」をクリックし、表示されたコンテキストメニューの中から、「ベベルとエンボス」を選択します。

レイヤースタイルを追加

表示された「レイヤースタイル」ダイアログの中から、「光沢輪郭」横の「クリックで輪郭ピッカーを開く」をクリックします。

クリックで輪郭ピッカーを開く

表示された「輪郭ピッカー」の中から、「リング」を選択します。

この「リング」は、細い物体に丸みを表現する光沢を帯びさせる際によく利用します。
文字の細い書体に適応するのも面白い効果が見られるのでお勧めです。

実際の画像を見ながら深さとサイズを任意のものに設定し、「OK」をクリックします。

金属フレームの深さとサイズ

今度は、ガラス張りの部分を作ります。
「レイヤーパネル」の中から、長方形1レイヤーをクリックします。

そして、「レイヤースタイルを追加」をクリック後、コンテキストメニューの中から、「ベベルとエンボス」を選択します。
続けて、「光沢輪郭」横の「クリックで輪郭ピッカーを開く」をクリックし、今度は、「リング-二重」を選択します。

この「リング-二重」は、光沢のあるものを表現する際に利用します。
細い書体の文字に使用すると、文字が金属製のアクセサリーのようにピカピカになります。

今回のようにガラスの反射を表現する場合、「サイズ」を大きめに設定すると良いです。
また、影の黒色の部分が初期状態ですと濃過ぎますので、シャドウの「不透明度」を「30%」に抑えておきます。

シャドウの不透明度

現状ですと、ガラスではなく、光沢のあるプラスチック製の板に見えてしまいます。
ですので、ガラスの部分の「塗り」を透明にしましょう。

「レイヤーパネル」の「塗り」を「0%」に変更します。

レイヤーの塗りを0%に

これで、ガラス張りの棚は完成です。
グループレイヤー横の「▼」をクリックし、グループレイヤーを折りたたみます。

棚はカンバスの中央に配置する必要があります。
「ツールパネル」の中から、「移動ツール」を選択します。

移動ツール

「オプションパネル」を利用してグループレイヤーをキャンバスの中央に整列させるのですが、現時点では、何を基準にグループレイヤーを整列させるのかPhotoshopが認識できていません。
ですので、「水平方向中央揃え」をクリックする事ができません。

そこで、キャンバス全体を選択して、グループレイヤーを並べる際の基準にします。
キーボードの「Ctrl」と「A」を同時に入力します。
すると、キャンバス全体に選択範囲が設定されます。

これで、「水平方向中央揃え」をクリックできるようになりました。

水平方向中央揃え

「水平方向中央揃え」をクリックすると、グループレイヤーがキャンバスの中央に整列されます。
キーボードの「Ctrl」と「D」を同時に入力して、選択範囲を解除しておきます。

▲もくじへ戻る

商品棚の骨組みを作る

次は、商品棚を支える金属フレームの部分を作ります。
一本柱を立てて、後はコピーをして使い回します。

まず、柱を描画する為のレイヤーを追加します。
「レイヤーパネル」の中の「新規レイヤーを作成」をクリックします。

新規レイヤーを作成

柱を描画するのには「ペンツール」を利用します。
ペンツールは曲線を描画する際にとても重宝するツールです。

「ツールパネル」の中から「ペンツール」を選んで下さい。
もし、「ペンツール」が「ツールパネル」内に表示されていない場合は、「フリーフォームペンツール」や「アンカーポイントの追加ツール」、「アンカーポイントの削除ツール」や「アンカーポイント切り替えツール」を長押しして、「ペンツール」を表示させます。

ペンツール

「ペンツール」を選択したら、商品棚の柱となる部分の上部をクリックします。
今回は左手前部分の柱を描画しましょう。

左手奥の部分の柱は、今回描画する柱よりも上の部分に表示されます。
ですので、今回はある程度上の空間に余裕を持って場所を決めて下さい。
目安としては、大体、棚の高さ分の空間を開けておけば良いです。

始点となるアンカーポイントを付けたら、今度はキーボードの「Shift」を入力しながら、柱の最下部となる部分に終点を打ちます。
影を落とす予定ですので、少しは下の部分にも隙間を残しておきます。

今回作る商品棚は、脚の下の方を外側へ曲げます。
ですので、曲げる部分の起点となる場所にアンカーポイントを追加します。
セグメント上をクリックする事で、アンカーポイントが追加されます。

アンカーポイントの追加

では、足の部分を外側へ曲げましょう。
「ペンツール」を選択した状態のままでキーボードの「Ctrl」を入力すると、「ペンツール」が「パス選択ツール」に変化します。

「ペンツール」を「パス選択ツール」に変化させた状態で、パスの終点を外側へ移動させて下さい。
その際、キーボードの「Shift」も追加で入力すると、終点を真横に移動させる事ができます。

終点の移動

終点を移動後、曲げの部分の起点に方向点(ハンドル)が表示されます。
キーボードの「Ctrl」を入力して「ペンツール」を「パス選択ツール」に変化させた状態で、更にキーボードの「Shift」を入力しながら、方向点を真下に伸ばして下さい。

アンカーポイントの方向点を伸ばす

目安としては、パスの終点と横並びになるくらいまで引っ張ります。
それ以上に方向点を伸ばしてしまうと、今度は、終点が地面から浮いてしまいます。

方向点の長さ

今のままですと、商品棚は柱の角の部分のみで支えられている状態になってしまいます。
このままでは不自然ですので、柱と床との接地面を増やしましょう。

その為には、終点の方向点を伸ばす必要があります。
ですが、終点には方向点が表示されていません。
この場合、「アンカーポイント切り替えツール」が必要になります。

「ツールパネル」の中の「ペンツール」を長押しして「アンカーポイント切り替えツール」を表示させ、選択します。

アンカーポイント切り替えツール

キーボードの「Shift」を入力しながら、終点から左方向へドラッグします。
すると、終点から方向点が表示されます。

終点の方向点を伸ばす

右側の方向点の長さに応じて、柱と床との接地面積が増えます。
あなたの好みで長さを決めて頂いて構いませんが、方向点が起点よりも右側に来てしまうと、柱が内側に曲がってしまいます。
デザインとして意図したものでしたら構いませんが、通常、不自然な状態を生んでしまいますので、方向点の伸ばし過ぎには注意しましょう。

では、描画したパスを元に柱を描画しましょう。
「ツールパネル」の中から「ブラシツール」を選択します。
「ツールパネル」の中に「ブラシツール」が表示されていない場合は、「鉛筆ツール」や「色の置き換えツール」、「混合ブラシツール」を長押しして、「ブラシツール」を表示させます。

ブラシツール

「オプションパネル」の中の「クリックでブラシプリセットピッカーを開く」をクリックします。

クリックでブラシプリセットピッカーを開く

ブラシの種類を「ハード円ブラシ」にして、「直径」を「8px」、「硬さ」を「100%」に設定します。

もし、プラシ一覧の中に「ハード円ブラシ」が表示されていない場合は、ブラシプリセットを変更する必要があります。
「直径」の横に歯車のアイコンが表示されていますので、それをクリックします。

ブラシプリセットの変更

ブラシプリセットが一覧表示されたコンテキストメニューが表示されますので、「初期設定に戻す」を選択します。
「現在のブラシを初期設置のブラシで置き換えますか?」と言う確認画面が開きますので、「OK」を選択します。
これで、ブラシの種類の中に「ハード円ブラシ」が表示されます。

描画色を棚の金属フレームと同じ色に設定します。
異なる色の場合は、「描画色を設定」をクリックします。

描画色を設定

「カラーピッカー(描画色)」ダイアログを表示させ、色を選択して下さい。
マウスカーソルをダイアログの外に出せば、マウスカーソルが「スポイトツール」に変化します。
金属フレームの光沢のない部分をクリックする事で、同じ色を抽出する事ができます。

カラーピッカーを表示させ金属フレームをクリック

これで、柱を描画する準備が整いました。

「パスパネル」を表示します。
「パスパネル」が「ドッグ」内に表示されていない場合は、「メニューバー」の中の「ウィンドウ」をクリックし、その中の「パス」を選択します。

「パスパネル」内の「作業用パス」を選択し、「パスパネル」下部の「ブラシでパスの境界線を描く」をクリックします。

ブラシでパスの境界線を描く

パスの表示を隠す為、「パスパネル」内の空欄をクリックします。

パスパネルの空欄をクリック

「レイヤーパネル」を表示させます。
グループ1レイヤーの横の「▼」をクリックし、グループ1レイヤーを展開します。

棚の金属フレーム(長方形1のコピー)レイヤーの下に表示されている「効果」の文字を、キーボードの「Alt」を入力しながら柱(レイヤー1)レイヤーまでドラッグします。

効果をドラッグ

棚の金属フレーム(長方形1のコピー)レイヤーにかけられていたレイヤースタイルが柱(レイヤー1)レイヤーにもコピーされました。

グループ1レイヤー横の「▼」をクリックし、再びグループ1レイヤーを折りたたんで下さい。
グループ1レイヤーを上にドラッグし、レイヤー1との並び順を入れ替えます。
棚が柱よりも前方に見えるように見た目が変わります。

グループ1レイヤーを上にドラッグ

本来の見え方を考えると、前方の柱は棚よりも前方に来ていないとおかしいのですが、そこまで再現するとなると、後のコーディング作業が複雑で長くなってしまいます。
今回は、この部分は妥協しました。
一度最後まで作業を行ってみて、余裕のある方は挑戦してみて下さい。

柱の位置を棚の左前方に微調整します。
「ツールパネル」の中の「移動ツール」を選びます。
「パネルオプション」の「自動選択」にチェックを入れ、柱の位置を微調整して下さい。

自動選択

キーボードの「Shift」を入力しながら移動させると、移動方向が垂直水平45度に限定されます。
また、数ピクセル単位での微調整にはキーボードの矢印キーを利用した方が確実です。

柱の配置が終わったら、今度はこの柱を複製して、四隅に配置します。
ですが、複製した柱を配置する際の高さの目安になるものがありません。
ですので、棚を最上部に移動させ、目安に使用したいと思います。

まずは、棚と柱との接点が見えやすいように、棚(グループ1)レイヤーを半透明にしたいと思います。
「レイヤーパネル」で棚(グループ1)レイヤーを選択し、「不透明度」を「60%」にします。

不透明度を60%に

この後は、適宜、「不透明度」を「100%」に戻したり「60%」にしたりしながら、あなたが作業を行いやすいように作業を進めて下さい。

レイヤーを不透明にしたら、キーボードの「Shift」を入力しながら、棚(グループ1)レイヤーを上方向に移動します。
棚の左前方部分が柱の最上部と重なり合う場所に設置します。

では、柱を複製しましょう。

キーボードの「Alt」を入力しながら、柱を棚の左後方部分に移動させて下さい。
すると、柱が複製され、左後方部分にも柱が設置されます。

左後方部分に柱を複製

今度は、右方向の柱を作ります。
左の柱を複製して利用します。

「レイヤーパネル」の左前方の柱(レイヤー1)レイヤーをクリックし、キーボードの「Ctrl」を入力しながら、左後方の柱(レイヤー1のコピー)レイヤーをクリックします。
そして、そのまま「レイヤーパネル」下部の「新規レイヤーを作成」までドラッグします。

レイヤーの複製

左側の柱2本が複製されました。
「メニューバー」の「編集」の中にある「変形」にマウスカーソルを合わせ、表示された「水平方向に反転」をクリックします。
複製された柱2本が、右側用に反転されました。

「オプションパネル」の中の「自動選択」のチェックを外して下さい。
そして、キーボードの「Shift」を押したまま、複製された柱2本を右方向に移動します。

複製された柱を移動

棚(グループ1)レイヤーの「不透明度」を「100%」に戻しておきます。

これで、商品棚の骨組みは完成しました。

▲もくじへ戻る

商品棚をガラス張りにする

では、商品棚の柱に沿ってガラスを張りましょう。
その為には、ガラスを張る範囲を決める必要があります。
そこで、棚の下段の位置を決めます。

「レイヤーパネル」の中から、棚(グループ1)レイヤーを選択して下さい。
そして、キーボードの「Shift」を押しながら、キャンバスの棚(グループ1)を下方向に下げて下さい。

棚を下段に

移動した棚は、下段となる位置に配置して下さい。

それでは、作成した位置を元に、ガラスを作製して行きましょう。

「ツールパネル」の中から、「長方形ツール」を選択します。
「長方形ツール」は、「ラインツール」を長押しして選択して下さい。

商品棚の一番奥の位置のガラスを作成します。
商品棚に合わせて、長方形を描画して下さい。

奥のガラス

描画後、長方形を微調整をしたい場合は、「メニューバー」の中の「編集」をクリックし、「パスを自由変形」をクリックします。
これで、長方形の大きさや位置を修正できます。

同様に、左側のガラスも描画します。

「長方形ツール」で、先程描画した長方形と同じ高さの長方形を描画します。
幅は、商品棚を見ながら合わせて下さい。

左のガラス

描画した左側の長方形を、商品棚に合わせて斜めにします。
「メニューバー」の「編集」の中の「パスの変形」にマウスを合わせ、表示された「ゆがみ」をクリックします。

長方形の左辺を商品棚に合わせ、下方向に移動させます。

ゆがみ

今度は、右側のガラスを作成します。
同じように描画しても良いのですが、今回は左側のガラスを複製する方法を行いたいと思います。

キーボードの「Alt」と「Shift」を入力しながら、左側の長方形を右側に移動させて下さい。

右のガラス

「メニューバー」の「編集」の中にある「変形」にマウスカーソルを合わせ、表示された「水平方向に反転」をクリックして下さい。
これで、商品棚のガラスとなる図形はでき上がりました。

今度は、この図形をガラスにします。
・・・と、その前に、この3つの図形をグループ化しましょう。

「レイヤーパネル」下部にある「新規グループを作成」をクリックして下さい。
「レイヤーパネル」内にグループ2レイヤーが作成されます。

今度は、「レイヤーパネル」上で、ガラスとなる図形三つを選択します。
奥のガラス(長方形2)レイヤーをクリックして、キーボードの「Shift」を入力しながら、右側のガラス(長方形3のコピー)レイヤーをクリックして下さい。
図形3つが選択されたら、そのままグループ2レイヤーまでドラッグをします。

ガラスレイヤーのグループ化

ガラスレイヤーがグループ化されました。
この後、棚のガラス部分で行ったように、図形を透明にして、ガラスの光沢を付けます。

グループ2レイヤーに対してその作業を行う事で、図形3つ分、まとめて作業を行う事もできます。
・・・ですが、そうすると、左右のガラスの立体感が失われてしまいます。
少々面倒ではありますが、3つの図形、一つ一つに作業を行って行きましょう。

「レイヤーパネル」内で、奥のガラス(長方形2)レイヤーを選択します。
キーボードの「Shift」を入力しながら、右側のガラス(長方形3のコピー)レイヤーをクリックします。
ガラスレイヤー3つが選択されました。

「レイヤーパネル」の塗りを「0%」にします。
これで、ガラスが透明になりました。

透明になったガラスに、反射を描画します。
この際、既にある棚のガラス部分にかけられた効果を転用する方法が効率的です。

グループ1レイヤー横の「▼」をクリックし、グループの中を展開して下さい。

この先の作業は、キーボードの「Alt」をずっと入力しっぱなしで行って下さい。
まず、長方形1レイヤーの中の「効果」と言う文字を、長方形2レイヤーまでドラッグします。

長方形1レイヤーのレイヤースタイルを転用

今度は、長方形2レイヤーに表示された「効果」と言う文字を、長方形3レイヤーまでドラッグします。
その次は、長方形3レイヤーの「効果」を長方形3のコピーレイヤーにドラッグします。
ここで、キーボードの「Alt」の入力を止めます。

これで、商品棚全体がガラス張りになりました。
グループ1レイヤーとグループ2レイヤー横の「▼」をクリックし、再びレイヤーを折りたたんでおきます。

ちょっと分かりにくいでしょうが、骨組みよりも手前にガラスが表示されてしまっています。
そこで、グループ2レイヤーを最下部に移動させます。

「レイヤーパネル」上で、グループ2レイヤーを選択します。
「メニューバー」の「レイヤー」の中にある「重ね順」にマウスカーソルを合わせ、表示された「最背面へ」をクリックします。
これで、手前の開いている商品棚になりました。

▲もくじへ戻る

商品棚に影を落とす

次は、商品棚に影を落とします。

「レイヤーパネル」の中から、棚であるグループ1レイヤーを選択して下さい。
そして、「レイヤーパネル」下部にある「レイヤースタイルを追加」をクリックします。
表示されたコンテキストメニューの中から、「ドロップシャドウ」を選択します。

「レイヤースタイル」ダイアログが表示されますので、「角度」を「90」にし、「不透明度」と「距離」と「サイズ」を、仕上がりを確認しながら調整して下さい。

ドロップシャドウの設定

この商品棚はショップに設置されている事をイメージしていますので、真上から照明が当たっているような影を付けます。

「包括光源を使用」にチェックが入っていると思います。
これは、このキャンバスに使用されているレイヤースタイル全体に対し、同じ方向から光が当たっているように見せる効果があります。

「包括光源を使用」のチェックを外すと、今まで設定して来たレイヤースタイルの見え方を保持しながら、今回のレイヤースタイルを設定する事ができます。
ただし、他のレイヤーとは違う光源位置になってしまいますので、見た目が不自然になってしまう恐れがあります。
チェックを外す場合は、その点に気を付けて下さい。

▲もくじへ戻る

商品棚の棚を増やす

今度は、商品棚の段数を増やします。

「ツールパネル」の中から「移動ツール」を選択して下さい。
「オプションパネル」の「自動選択」のチェックが外れている事と、「レイヤーパネル」で棚(グループ1)レイヤーが選択されている事を確認します。

キャンバス内の棚を、キーボードの「Shift」と「Alt」を入力しながら、上方向へドラッグします。
商品棚の最上部までドラッグして下さい。

棚の複製

複製した棚に影が表示されています。
必要ありませんので、影のレイヤー効果を削除しましょう。

「レイヤーパネル」の中の上段棚(グループ1のコピー)レイヤーの中にある「効果」の文字を「レイヤーを削除」までドラッグします。

レイヤー効果の削除

後は、好きな数だけ棚を増やして下さい。
上段の棚を、キーボードの「Shift」と「Alt」を入力しながら、下方向へドラッグする事で複製できます。

複製した棚を等間隔で配置し直します。

「レイヤーパネル」内の下段の棚(グループ1)レイヤーをクリックします。
そして、キーボードの「Shift」を入力しながら、複製した棚レイヤーの一番上のレイヤーをクリックします。
作例では、「グループ1のコピー3」レイヤーです。

棚レイヤーを全て選択

「オプションパネル」内にある「垂直方向中央を分布」をクリックします。

垂直方向中央を分布

棚が等間隔で再配置されました。

▲もくじへ戻る

商品棚の画像を結合

後々に、レイヤー毎にファイルを書き出しますので、下段の棚と脚とガラスの部分を統合し、一つのレイヤーにしたいと思います。

まず、先ほど複製した、下段以外の棚を非表示にします。
「レイヤーパネル」で、グループ1レイヤーより上のレイヤーの「レイヤーを表示/非表示」をクリックして下さい。

レイヤーの非表示

「メニューバー」の「レイヤー」の中から、「表示レイヤーを結合」をクリックします。
「レイヤーパネル」で非表示にしているレイヤーを選択している状態ですと、「表示レイヤーを結合」を選択できません。
その際は、表示しているレイヤーを選択し直してからクリックします。

商品棚画像が結合されました。
非表示にしていた棚レイヤーを再表示します。
非表示になっているレイヤーの「レイヤーを表示/非表示」をクリックして下さい。

▲もくじへ戻る

商品画像の準備

これで商品棚は完成しましたが、商品棚に並べる商品画像も必要です。
商品棚に並べる商品画像は、背景が切り抜かれているものを用意して下さい。

もし、背景のある商品画像しかない方は、Photoshopで背景を切り抜きしておいて下さい。
それぞれのサイトによって扱う商品が異なりますので、切り抜き作業の説明は割愛します。

▲もくじへ戻る

商品画像を配置する

準備していた商品画像を商品棚に並べて行きましょう。
「レイヤーパネル」で、一番上に表示されているレイヤーを選択しておきます。

一番上のレイヤーを選択

「メニューバー」の「ファイル」をクリックし、「配置」を選択します。
商品ファイルを選択すると、ファイルがキャンバスの中央に表示されます。
「オプションパネル」右側の「◯」をクリックし、配置を完了します。

配置を完了

同様の作業で、商品画像を全てキャンバスに配置して下さい。

商品画像の配置が終わりましたら、「ツールパネル」内の「移動ツール」を選択し、商品画像を商品棚に並べて下さい。
「オプションパネル」内の「自動選択」のチェックを入れておきますと、「レイヤーパネル」でいちいちレイヤーを選択し直さなくとも、画像をスムーズに移動する事ができます。

また、「オプションパネル」内の「バウンディングボックスを表示」にチェックを入れておきますと、移動ツールで画像のサイズを変更する事もできます。

バウンディングボックスを表示

画像のサイズを変更する場合、画像の四隅のバウンディングボックスを、キーボードの「Shift」を入力しながらドラッグします。

画像のサイズを変更

ここで並べた見た目がサイト上の仕上がりになります。
また、商品と棚との重ね順は調整していませんので、その部分では見た目がおかしいとは思いますが、CSSで重ね順を調整しますから、その点は気にしないで下さい。

▲もくじへ戻る

レイヤーを書き出す為の準備

画像をレイヤー毎に書き出します。

その前に、棚レイヤーのファイルは一つだけあれば十分ですので、それ以外の棚レイヤーは非表示にしましょう。

「レイヤーパネル」で、グループ1のコピーレイヤー以外のグループレイヤーを非表示にして下さい。
それぞれの「レイヤーを表示/非表示」をクリックします。

グループ1のコピーレイヤーは、一つのレイヤーとして結合しておきましょう。
「レイヤーパネル」でグループ1のコピーレイヤーを選択します。

「メニューバー」の「レイヤー」をクリックし、「グループを結合」を選択します。

▲もくじへ戻る

画像をレイヤー毎に書き出す

それでは、レイヤーの書き出しを行いたいと思います。
「メニューバー」の「ファイル」をクリックし、「スクリプト」にマウスカーソルを合わせます。
表示された「レイヤーをファイルへ書き出し」をクリックします。

「レイヤーをファイルに書き出し」ダイアログが表示されます。
「保存先:」と「ファイルの先頭文字列:」を指定し、「表示されているレイヤーのみ」にチェックを入れます。
これを入れ忘れると、同じ棚画像が複数生成されてしまいます。

「ファイル形式:」を「PNG-24」、「透明部分」と「レイヤーをトリミング」にチェックを入れます。
そして、「実行」を選択して下さい。

レイヤーをファイルに書き出し

これで、必要な画像ファイルが全てPNG形式で保存されました。

▲もくじへ戻る

商品棚をWordPressの記事に表示する

WordPressに画像を保存する

保存した画像を、WordPressの中に保存します。

WordPressのダッシュボードを開いて下さい。
「ツールバー」の中の「新規追加」にマウスカーソルを合わせ、「メディア」をクリックします。

メディア

「メディアのアップロード」画面が表示されますので、パソコンの「エクスプローラー」を開いて、先ほど保存したファイルを全てドラッグ&ドロップします。

ドラッグ&ドロップ

アップロードされたファイルは、ページ下部に一覧表示されます。
これで、必要なファイルがWordPress内に保存されました。

▲もくじへ戻る

商品を陳列する為のpositonプロパティ

作業の折り返し地点です。
これからはHTMLとCSSを使用して商品棚を再構築して行く訳ですが、それにはいくつかのCSSを組み合わせる必要があります。
作業前に、今回使用するHTMLとCSSについて学んでおきましょう。

まず、商品棚を構成する全ての画像の配置を決める為に、座標を定めなければなりません。
その座標の基準となる外枠を、CSSの「position」プロパティで指定します。

position:relative;

「position」プロパティで「relative」に指定した部分が、その中の「absolute」と指定した部分の基準点になります。
「position」プロパティで「absolute」と指定した場合、「top」「left」「right」「bottom」で上下左右の移動開始方向を示し、数字でその距離を指定します。

例えば、以下のようにcssを指定したとします。

#a{
	position:relative;
	width:200px;
	height:150px;
}
#b{
	position:absolute;
	top:80px;
	left:50px;
	width:50px;
	height:50px;
}

この場合、「id="b"(画像B)」は「id="a"(画像A)」の上辺から80px、「id="a"(画像A)」の左辺から50pxの位置に配置されます。

positionプロパティ

この考え方で、商品棚に棚や商品を配置して行くのです。
今回の例ですと、<div>タグに「relative」を指定して外枠を作り、その中に商品棚や棚や商品を配置して行きます。
商品棚や棚、商品の座標については、Photoshopで調べる事ができます。

▲もくじへ戻る

画像の重ね順を決めるz-indexプロパティ

Photoshopで言うレイヤーの役割をするのが「z-index」プロパティです。
このプロパティがあるお陰で、画像の重ね順を任意に変更する事ができるのです。

今回の場合、棚が数段になっていますので、「z-index」プロパティは必須です。
ちなみに、今回、棚が半透明なのには狙いがちゃんとあって、商品の上に重ねた棚から商品が透けて見える事で、リアルさを演出できます。

棚から透けて見える商品

この時、「z-index」プロパティの指定を正しくしていないと、商品と棚の見え方があべこべになってしまう恐れがあるのです。

重ね順があべこべ

「z-index」プロパティの指定方法ですが、数字を使います。
数字が高いほど上の階層に。
逆に、数字が低いほど、下の階層に画像が表示されます。

例えば、idをa~gまで割り振った画像があったとします。
それぞれに「z-index」プロパティを以下のように割り振ったとします。

#a{
	z-index:1;
}
#b{
	z-index:2;
}
#c{
	z-index:3;
}
#d{
	z-index:4;
}
#e{
	z-index:5;
}
#f{
	z-index:6;
}
#g{
	z-index:7;
}

すると、画像は以下のように配置されるのです。

z-index

▲もくじへ戻る

記事内に必要な画像を表示する

商品棚を再構築する為に必要なCSSについてはご理解頂けたと思います。
では、実際にHTMLのコーディング作業から行って行きましょう。

まずは、商品棚の座標となる<div>タグを記述し、「id」属性を付けましょう。

<div id="goods">
</div>

作例では、「goods」としましたが、あなたの好きな文字でも構いません。
「id」属性の値には、半角英数字と「-」と「_」のみが利用できます。
ただし、頭文字に数字や「-」や「_」を使用する事はできませんので、注意して下さい。

次に、商品棚に必要な画像ファイルを全て、<div>タグと</div>タグの中に並べて行きます。
WordPressの「ツールバー」の中から、「新規追加」をクリックします。

新規追加

「新規投稿を追加」ページが表示されます。
エディタを「テキストエディタ」に切り替えて下さい。

テキストエディタ

「メディアを追加」をクリックします。

メディアを追加

「メディアを挿入」ダイアログが開きます。
画面左で画像を選択し、右側の「添付ファイルの詳細」で画像の詳細設定を行います。

「添付ファイルの詳細」での設定は一つのポイントとなりますので、詳しく説明をしたいと思います。
ここで確認すべきは4ヶ所です。

添付ファイルの詳細

「代謝テキスト」の部分は、ブラウザで何か問題が起こり、画像が上手く表示されなかった場合に、代わりに表示される文字を設定します。
また、画像を認識できないクローラー(検索ロボット)に、この画像は何なのかを伝える役割もあります。
ですので、検索サイトでの画像検索用のキーワードとしても、重要な役割を持っています。
更に、視覚障害者向けの音声読み上げブラウザでは、ここで設定した文字を読み上げます。

「配置」はなしを選びます。

「リンク先」には、商品棚関連の画像の場合は「なし」にし、商品画像の場合は「カスタムURL」を選択します。
カスタムURLには、商品の紹介ページのリンクを貼ると良いです。
アフィリエイトサイトの商品リンクを貼るのも良いと思います。

「サイズ」は「フルサイズ」にします。

▲もくじへ戻る

画像タグにid属性を追加

「投稿に挿入」をクリックすると、自動的に画像タグが出力されます。
ただ、出力された画像タグをそのまま素直に使用するのではなく、あれこれと手を加えます。

まず、画像はそれぞれ表示する座標をCSSで指定する必要がありますので、それぞれの画像に個別の「id」属性を指定します。
「id」属性を指定する際は、<p>タグ(段落タグ)をソースコードの外側に追加しましょう。

<p id="任意のid">画像タグ</p>

この時、商品棚の最下部となる画像にだけは「id」属性を指定する必要がありません。
それ以外の画像には、全て「id」属性を指定して下さい。

商品棚にidは必要ありません!

生成された<img>タグには、最初から3つの「class」属性が付与されています。
ですが、自分が中身を把握していない「class」属性は、カスタム時のデザイン崩れの原因にもなりかねませんので、私はこの時点で削除しています。

▲もくじへ戻る

画像のサイズを示す属性

「width」属性や「height」属性に関しては、それぞれ、画像の「横幅」と「高さ」を表しています。
今回はPhotoshopで画像のサイズをキッチリと設定していますので、必要ないように思えます。
また、HTMLは文章の構造のみを指定し、デザイン関係はCSSで指定すると言う決まりがありますので、それにも反しています。

そう考えると、この二つも削除したくなりますが、実は、現時点ではどちらも廃止タグにはなっていません。
その理由ですが、事前に画像スペースのサイズをブラウザに示す事で、ページの表示速度を上げると言う目的があるからなのです。

私のパソコンは古いので、画像が沢山貼られているサイトは表示が重く(遅く)なります。
すると、画像に「width」属性や「height」属性を設定しているサイトとしていないサイトとでは、表示の仕方が異なります。

「width」属性や「height」属性を設定している場合は、画像が表示されるまでの間は四角いスペースが表示されます。
一方で、「width」属性や「height」属性を設定していないサイトは、後から急に画像が追加表示されますので、閲覧者が見ている画面が、画像が表示される毎に上方向にブレてしまいます。
これが、閲覧者を戸惑わせてしまうのです。

そう言う観点から、現時点では「width」属性や「height」属性を記述する方が良いとされています。
・・・ですが、私は「width」属性や「height」属性を削除しています。

その理由は、今後のパソコンの性能アップとネット回線の進化を考えると、この先、あまり気にしなくても良くなるのではないかと思っているからです。
そうなると、いつまでも「width」属性や「height」属性が廃止にならないとは思えないですし、その時を見越し、最初から付けない事にしています。
その時になって慌てても、既に該当記事が1,000記事とか超えていたら、どうしようもなくなりますからね。

▲もくじへ戻る

title属性を活用しよう!

削除、削除と続きましたが、追加した方が良い属性もあります。
それは、「title」属性です。

「title」属性は画像のタイトルや著作者情報を記載する目的で使用されるのですが、画像にマウスカーソルを乗せた際に「ツールチップ」として文字が表示されます。

ツールチップ

訪問者が、商品棚に並んでいる画像が何なのか気になり、マウスカーソルを画像に当てたとします。
その時、その商品名がツールチップとして表示されたら、訪問者に対して親切だとは思いませんか?

また、これは規定外の裏ワザ的な使い方ではあるのですが、「title」属性に「画像をクリック!」や「詳しくはクリックしてから!」と記述しておけば、訪問者の画像のクリックを促す事も可能です。

<p id="任意のid"><a href="商品紹介ページURL"><img src="画像URL" alt="画像の説明" title="画像をクリック!"></a></p>

▲もくじへ戻る

自社商品以外の場合

商品棚に並べる商品が外部サイトのものの場合、更に2つの属性を追加する必要があります。
追加後は、こうなります。

<p id="任意のid"><a href="商品紹介ページURL" target="_blank" rel="nofollow"><img src="画像URL" alt="画像の説明" title="画像をクリック!"></a></p>

「target」属性を「_blank」にする事で、リンク先が別タブにて表示されます。
こうする事で、自分のページが訪問者のブラウザ内に残り、商品ページを閉じた後、再び自分のサイトに戻って来てもらえる可能性が高まります。

「rel」属性を「nofollow」に設定する事で、リンク先の内容を推薦しないと言う意志をGoogleのクローラー(検索ロボット)に対して示す事ができます。
リンク先のページ内容をお勧めする場合は必要ありませんが、例えば、アフィリエイト目的のリンクなど、リンク先のページの内容を推薦している訳ではない場合は、「nofollow」を記述します。

これで、HTML側での設定は終了です。
商品棚に必要な画像全てに対して、上記の処理を行って下さい。
また、棚となる部分は同じ画像ファイルを複数使用しますが、必要な棚の段数分だけ画像タグを記述し、それぞれ別の「id」属性を割り振って下さい。

▲もくじへ戻る

記事とCSSとのヒモ付け

今度はCSSを記述しましょう。
多機能プラグインJetpackを有効化している方は、WordPressの「サイドバー」の「外観」の中にある「CSS編集」をクリックします。
それ以外の方は、「テーマ編集」をクリックします。

テーマ編集とCSS編集

表示された「CSSスタイルエディター」、もしくは、「テーマの編集」内にCSSを追記して行きます。

HTMLとCSSのヒモ付けですが、「id」属性を利用します。
記事で以下のように記述したとします。

<p id="photoshop"><a href="Photoshopの紹介ページURL" target="_blank" rel="nofollow"><img src="Photoshop画像URL" alt="Photoshopのパッケージ画像です。" title="画像をクリック!"></a></p>

この場合、CSSのセレクタでは「#photoshop」と指定します。
「id」属性の場合は「#」、「class」属性の場合は「.」をセレクタの頭文字に使用します。

▲もくじへ戻る

外枠のCSS設定

では、外枠部分のCSSを設定してみましょう。

外枠部分は画像配置の基準点となりますので、「position」プロパティを「relative」に指定します。

そして、商品棚全体を記事の中央に配置したいと思いますので、外枠部分を記事の中央に表示するように指定します。
具体的な手法ですが、外枠の横幅を指定し、その横幅よりも外側の余白を左右同じにする事で、結果的に中央寄せにします。

外枠の横幅は、商品棚の横幅と同じにします。
そうする事で、配置する画像全ての座標がPhotoshop上の画像と一致するようになります。
その結果、画像の配置作業がとても楽になります。

作例では、このようなCSSになります。

#goods{
	position:relative;
	width:500px;
	margin-left:auto;
	margin-right:auto;
}

▲もくじへ戻る

商品棚のCSS設定

次に、商品棚を構成する画像のCSSを設定して行こうと思います。

まず、最下部の商品棚についてですが、こちらはidを指定しなかった通り、特に何も設定する必要はありません。
それ以外の、棚と商品画像に設定をして行きます。

まずは、上段の棚の設定を行いましょう。
画像を配置する際は、座標を設定しなければなりません。

Photoshopで、上段の棚の座標を調べましょう。

上段の棚の座標を把握する為には、「情報パネル」を使います。
「メニューバー」の「ウィンドウ」をクリックし、「情報」にチェックを入れて下さい。
「情報パネル」には、現在、マウスの位置情報が表示されています。

「ツールパネル」の中の「移動ツール」を選び、上段の棚を選択します。
「オプションパネル」の中の「バウンディングボックスを表示」にチェックが入っている事を確認し、上段の棚のバウンディングボックスをクリックします。

バウンディングボックスをクリック

すると、「情報パネル」の中身がマウスの位置情報から上段の棚の情報に切り替わります。
この「情報パネル」に表示されている「X」と「Y」の部分の数字が必要になります。

情報パネル

作例では、「X」が「42」、「Y」が「0」です。
これをCSSで指定すると、以下のようになります。

#tana1{
	position:absolute;
	left:42px;
	top:0;
}

このように、各画像をPhotoshopの座標と同じ数字で指定します。
「X」を「left」、「Y」を「top」に置き換えれば良いだけです。

次は、画像の重ね順を示す「z-index」プロパティの設定を行いましょう。
そのまま下段の商品から1、2、3・・・と割り振って行っても構いませんが、後々に商品の変動の可能性がある方は、数字をある程度空けて割り振り、空席を確保して置く方が賢明です。

例えば、一番下の段は1、10、20・・・と言う具合に数字を割り当てます。
二段目は100、110、120・・・と言う具合に数字を割り当てます。
三段目は200、210、220・・・と言う具合に数字を割り当てます。

急に扱う商品の数が増えた際に、例えば、7や8などの空席が確保されていれば、簡単に商品を追加する事ができます。

配置する棚と商品全てに「z-index」プロパティを適応して下さい。

▲もくじへ戻る

完成

完成例

商品棚

上段棚

中段棚

下段棚

muse

photoshop

lightroom

premiere pro

after effects

dreamweaver

flash pro

illustrator

indesign

世界最高峰のプロフェッショナル画像編集ツール。

最先端のモーショングラフィックスとビジュアルエフェクト。

映像編集を自由自在に。

印刷および電子出版のためのプロフェッショナルデザインツール。

進化し続けるベクトルグラフィックツール。

Webサイト構築、アプリデザインおよびコーディング。

コード記述不要のWebサイトデザイン。

撮影から仕上げまで。写真を極めるすべてがここに。

表現豊かなインタラクティブコンテンツをあらゆるプラットフォームに。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :    

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る