デザイン

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

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法

    みなさんこんにちは、mayukouです。先日、仕事で水彩画イラストを…

  3. デザイン

    脱自己流!上手くいくデザインの手順とは。

    みなさん、こんにちはmayukouです。先日デザイナーであることの自…

  4. free font

    デザイン

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

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

  5. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪

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

  6. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
  2. Illustrator

    webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法
  3. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive …
  4. Illustrator

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

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
PAGE TOP