デザイン

楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー7選


みなさん、こんにちはmayukouです。
いかがお過ごしですか?

先月楽天サイトの構築の仕事をしました。
楽天GOLDというものに入ると、
トップページや特集ページをHTMLやCSSを使った自由のレイアウトのデザインができます。
仕組みはとっても簡単でした。
楽天のFTPにアップロードするだけ。
そうすると、rakuten.co.jp/gold/店舗名/というアドレスとなって表示されます。

さて、話は逸れましたが、
楽天のカンプデザインを作成するにあたり、
参考になったおしゃれなヘッダーをご紹介します。

スポンサードリンク

Sante Labo

24-sante

基調色にオーガニックカラーを用いて全体的に優しい色合いで、
空いた空間にはさりげなくイラストがあしらわれています。
そのイラストがお店の世界観を表現している感じです。

 

Soup

25-soup

こちらも色合いは、優しく薄め。商品を邪魔しない色使いですね。
ロゴのジャンプ率が高いためロゴに目が行きやすく、ホワイトスペース(空白)をうまく利用しています。

 

AND CUBE SUGAR

26-sugar

色合いを2色に抑えて、統一感を出しています。
えんじ色がアクセントカラーとなって、目が行きやすくなっています。

 

filloie

27-filloie

手書き風のフォントを使い、赤ちゃん用の小物販売の雰囲気を演出しています。
色数はわりと多めで、楽しさをさりげなく出していますね。

 

Soulberry

28-soulberry

ホワイトスペースを用いて、すこし落ち着いたおとなしいイメージですが、

全体的に品のいい雰囲気が表れています。英語表記ですが、下に小さく日本語が書かれてあるので
親切ですね。ゴールドのメダルがさりげなく右上にあるのが、信頼感演出している感じです。

 

Pierrot

29-pierrot

ロゴやグローバルナビゲーションなど一番必要な部分には濃い色を用い、

ソーシャルボタンのようなサブ的な要素は、トーンを抑えてさりげなくデザインされているのが、いいですね。
ショッピングカートはちゃんと目が行くように赤にしてアクセントとなっています。

 

cocoa interior zakka

30-cocoa

ロゴや文字など基調色に濃い茶色を用いて、落ち着いた印象が出ています。
フォントが、サンセリフ体の丸っこい文字だから、
親しみがわくというか、可愛い印象ももたせてくれます。
買い物かごやロゴのオレンジは、アクセントカラーですね。

最後に

いかがでしたか?おしゃれだなーと思う、楽天ショップのヘッダーをご紹介しました。

共通して言えることは、配色がうまいこと、ホワイトスペースを生かしていること、だという印象を受けました。
色数も抑えめなサイトが多い気がします。

勉強も兼ねて分析もしてみました。ぜひ参考にされてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ

    こんにちは、mayukouです。だいぶ、暖かな気候になってきて、過…

  2. Photoshop

    かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(有料)

    皆さんこんにちは、mayukou です。以前の記事に書きました通り、…

  3. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!

    こんにちは、mayukouです。最近ランニングウェアを新調して、ち…

  4. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  5. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!

    みなさんこんにちは、mayukouです。当ブログでよく読まれている記…

  6. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate Lineartが便利…

    みなさん、こんにちは、mayukouです。デザインやイラストの仕事…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. ipadmini

    Mac

    iPad mini retinaとcookpadがいい感じ
  2. food photo

    写真

    カメラ上手に!食べ物を美味しく撮るコツとは?
  3. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  4. 写真

    現像で素人感からプロっぽく!Macの写真アプリが素敵
  5. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェッ…
PAGE TOP