デザイン

楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー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. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト

    こんにちは。mayukouです。遅くなりましたが、新年明けましてお…

  2. illustration

    発見!スキャンで取り込んだイラストをIllustratorで使えるベクターにする方法

    みなさん、こんにちは!mayukouです!先日アップしたブログに、P…

  3. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント

    みなさんこんにちは、mayukouです。福岡もやっと梅雨が明けまし…

  4. Photoshop

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

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

  5. Illustrator

    画像のベクター化が簡単に!Adobe Capture CCがおすすめ♩その使い方をご紹介。ダウンロー…

    みなさんこんにちは、mayukouです。画像をベクター化してイラスト…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. 日記

    2017年の振り返りと2018年の目標
  2. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法
  3. illustration

    インスタ映えな挿絵が描ける!ステキな水彩画イラストの描き方本に出会いました。
  4. Photoshop

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

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