せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No.43 Orience

■概要

三井農林株式会社が販売している紅茶ORIENSのブランディングサイト。元々はお茶の農園を経営していたが、日本初の国産ブランド紅茶を販売。(のちの日東紅茶)

 

 

 

■ターゲット

・ティータイムを楽しみたい女性。
パッケージがカラフルで可愛らしく女性らしさが出ている

 

 

 

■FV

食卓の上に商品が並べられたヒーローイメージ。商品のみの画像だけではなく、紅茶とお菓子が並べられた様子や紅茶を淹れる写真を入れることで、自宅で楽しむイメージが湧きやすく温かみが出る。

トップページにはナビゲーションがなく、ロゴと画像のみを配置。画面下の方は写真が斜めに切られていて、ORIENSの文字が少し見えている。

 

 

 

■特徴

ORIENSについては、背景色を白にしテキストを中央に配置。余白たっぷりなぶん視線が中央に集まりやすい。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

 

商品紹介も写真を幅いっぱいに配置し、食卓やティータイムを連想させる写真にすることで、ユーザーの日常にも連想しやすい雰囲気が出ている。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

 

商品ごとに色を変えたり、斜めのデザインを入れることで切替りが分かりやすい。カラフルな色を使うことで明るく楽しい印象になる。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

・about ORIENS

FVの直下に配置しそうなaboutを商品の紹介後に配置。
テキストが多い箇所は、写真を小さめにし余白も左右にたっぷり取ることで、圧迫感を与えずゆっくり読めるような工夫がされている。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

パッケージの写真は最後に掲載。パッケージの写真を最初に載せてしまうとインスタント感が印象付けられてしまうが、食卓やテーブルに乗せた写真を最初に載せることで、自宅でもお洒落に楽しむことが出来るというイメージになる。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

 

スマホ版で見ると、配色によるページの見やすさがより一層分かりやすく、余白の取り方が綺麗。

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

 

■ロゴ

落ち着いた印象を出すためにシンプルなアルファベットのデザインだが、Oのみワンポイント入れて印象的に。

 

 

■フォント

・Crimson Text

 

 

■配色

派手すぎず大人しすぎない鮮やかな配色。

・ベースカラー:#fff
テキスト:#000
・アクセントカラー:#EB6D9A、#F0844B、#B095DA、#4EB9BD、#0E2777

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

 

 

 

 

 

 

Webサイト:ORIENCE

せろりのセオリー/ Webサイト100選 No.43 Orience

せろりのセオリー/ Webサイト100選 No.43 Orience

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén