デザイン

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

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  2. Illustrator

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

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

  3. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)!

    みなさまこんにちは、mayukouです。以前の記事でphoto…

  4. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  5. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材を作りました

    みなさん、こんにちはmayukouです。台風も過ぎ去り、梅雨ももう…

  6. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ

    こんにちは、mayukouです!今日は水彩画に最適なPhotosho…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. デザイン

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

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

    モバイルフレンドリー!フラットデザインなwordpressテーマ ACCIOに変…
  4. iPad Pro

    購入して半年♪iPad Proで描いたイラストをご紹介。(主にProcreate…
  5. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する…
PAGE TOP