スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

実践トレーニング(GU) 6カルーセルパネル自動スライド&まとめ



6回に渡って作成してきましたGUのプロモーションサイト制作。

今回が最終回になります。

前回はタブを使用した商品紹介の部分を作成しました。

続いて、本家GUサイトにもありますが、

複数の画像を一行で表示して数秒間隔で自動スライドするカルーセルパネルの
作成です。

  →モデルが着用した時のイメージ画像をカルーセルパネルにて自動スライドさせます。
  →任意のタイミングでボタンを押すことで見たい画像まで移動する事を可能にします。

GUとまったく同じ形にしようとも考えましたが、左右のボタンと全体の大きさを若干小さめにしてみました。

パネルの作成方法は過去記事を参照
複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネル内の画像をクリックした時にかっこよく拡大表示させたい為、

LightboxというJavaScriptを使用します。

作成方法は過去記事を参照
Javascriptで画像をかっこよく表示させる

カルーセルパネルから下部分は、GUのサイトを模写しました。

デザインや配置など吸収するには良いかなと思います。

一番下のフッターの直前にあるアイコンが複数並べて置いてありそれぞれのアイコンをクリックすると

そのサイトに飛ぶ箇所もそのまま再現しました。

ひとつの画像にアイコンを何個も入れる為、ひとつの画像に複数のリンクを貼らなければいけません。

複数リンクの貼り方は過去の記事参照
ひとつの画像に対し任意の箇所に複数のリンクを貼る

これで一通りのデザインは完成しました。

完成したサイトはこちらから
実践練習サイト GU


今後の制作勉強は、サイト模写もやりつつ、オリジナルデザインのWEBページも作成していこうかなと考えております。




スポンサーサイト

実践トレーニング(GU) 5 ジャンル別ニューアイテムの紹介(タブ付きパネル)

ジャンル別ニューアイテムの紹介
  女性向け、男性向け、キッズ向けの三種類でニューアイテムをピックアップし商品の紹介をします。
  タブを使って切り替えられるようにします。


まずは、ひとつひとつの商品画像の作成です。

デザインは商品名と値段がわかりやすいようなレイアウトにしました。


商品が目立つような効果的なデザインができれば、もっとインパクトがあるデザインができるのかもしれませんが

初心者なら商品のバックはあまり目立つ色を入れないほうが良いと感じました。




下二つはグラデーションを薄くかけてみました。あんまりしっくりきてはいないですが、、、。

色をしっかりいれた場合はこんな感じでしょうか

kids_2.jpg

続いてタブです。

タブの作成の詳細は過去記事

20140222_1.jpg

これは画像なので、クリックしても切り替わりませんが、シンプルにWOMEN,MEN,.KIDSとタブを作成しました。

GUのサイトではロゴマーク以外であまり目立つ色を使わず、シンプル且つ洗練された構成のイメージがあります。
そのイメージに合わせてタブの色も薄いグレーを使いさりげない感じにしました。

商品画像の並べ方ですが、商品の後ろに入っている色のラインがすべて同じだと短調なイメージになってしますので
隣同士の色がかぶらないように配置しました。

※写真の素材はGUさんの商品写真をお借りしています。




実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(3)

桜の画像にモデルを加え、さらにキャッチフレーズも追加しました。

あとはモデルが着用している服の情報を真ん中の下に入れて完成です!

商品の情報は、シンプルでわかりやすく値段がはっきりわかるようなレイアウトにしました。

完成画像がこちら。

20140217_1.jpg
クリックすると拡大表示します。

実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(2)

前回は、両サイドに桜とモデルを配置しました。
今回は、センターにセールのタイトルとその下にモデル着用の服を紹介する画像を配置します。

まずは、タイトルです。
ファッション系のサイトを見てみると
割とベタなタイトルが多いように思います。
例)
WINTER CLEARANCE SALE
EARLY SPRING New Arraival
Spring Collection
オータムフェア
SPRING STYLE
新春SALE


それに見習いベタなタイトルを考えてみましたが、、、、

20140202_1.png


全然ピンとこないしなんか寂しい。


そこで、せっかくはじめて作るのでベタすぎるものどうかと思いましたので
自分らしさを出してみようかなと(笑)
それがこちらです。

top_message.png


パリコレに引っ掛けてハルコレにしてみました。
ハルコレで大体どういう意味かおわかりいただけると思いますが
は?どういう意味?という方の為に下にSpringCollenctionを添えてあります。


メインタイトルとは別にもうひとつ添えるように付けたいキャッチフレーズは、
「きれい目カジュアル」「今すぐ欲しい!冬アウターSALE」の様な
服に関する現実的なものにするか、
ポエムチックで抽象的するか悩みましたが、ポエムチックにする事にしました。

「ほら、春はすぐそこ。」

春は過ごしやすく気持ちがいい季節なので
暖かくなってきれて浮かれる・ワクワクする感情を表現しました。
ワクワクウキウキしてきそうです♪

このキャッチフレーズはちょっと範囲が異なりますが、
ブランドのイメージで使用されているキャッチフレーズも今後考えていきたいですね。

あした、
なに着て
生きていく? (アースミュージック)

ファッションを、もっと自由に(GU)




実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(1)

トップの一番目に付く場所に配置する画像は

イチオシであったり目玉商品であったりその時に一番伝えたい内容をパッと見てわかるような画像を作成します。

その部分に今回は目に付くイチオシの商品を配置して、全体の雰囲気を春らしくしていきます。

安易ではありますが、春と言えば桜!(笑)

桜バックで商品画像を前に出した感じにしようと思います。

商品画像の邪魔にならないように薄めの色で大きさ、形、色、角度を微妙に変化させます。

20140201_1.jpg


この桜をいい感じに増殖させて柄にします。両サイドに男女のモデル画像を貼り付けるので、

両サイドに桜を集めた画像がこちら。

20140201_2.jpg
クリックで拡大

これにモデル画像を合成していきます。

幸いGUで使用されているモデルの写真はバックが白い場合が多いので、抜きやすいですね。

gu_back_3.jpg



今日はここまで。

次回は真ん中にセールの名前とキャッチフレーズ、期間限定の内容を付け加えていきます。





スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。