Tweet

Pocket

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

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

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

Sante Labo

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

Soup

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

AND CUBE SUGAR

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

filloie

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

Soulberry

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

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

Pierrot

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

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

cocoa interior zakka

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

最後に

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

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

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

投稿者プロフィール

mayukou

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

最新の投稿

この著者の記事一覧

• 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
• 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
• 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
• 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。