オハナ製茶 コーポレートサイトのメインビジュアル
Client
自主制作(架空企業「オハナ製茶」)
Category
コーポレートサイト / Webデザイン
Outline
架空の製茶会社「オハナ製茶」のコーポレートサイトを自主制作しました。深みのある緑とベージュ、縦書きを取り入れた和モダンなレイアウトで、老舗としての信頼感とOEM事業の専門性が伝わる構成を目指しました。
Scope
情報設計 / ワイヤーフレーム / Webデザイン / 素材選定
Tool
Figma / Illustrator / Photoshop / Adobe Firefly

DESIGN PROCESS

情報の優先順位から、ブランドの見せ方を組み立てる

完成画面だけでなく、情報を整理したワイヤーフレームと、Figma上で検討した表現・インタラクションを掲載しています。
Figma制作資料を見る(閲覧のみ)

01

INFORMATION ARCHITECTURE

主要4画面の情報と導線を整理

HOME・OEM事業・オハナのこだわり・お問い合わせの4画面をワイヤーフレーム化。企業の背景から事業内容、強み、問い合わせまでを順に理解できる構成を検討しました。

オハナ製茶 HOME画面のワイヤーフレーム
HOME
オハナ製茶 OEM事業画面のワイヤーフレーム
OEM事業
オハナ製茶 こだわり画面のワイヤーフレーム
オハナのこだわり
オハナ製茶 お問い合わせ画面のワイヤーフレーム
お問い合わせ

02

HOME DESIGN

老舗の信頼感と、次の100年への広がりを表現

茶葉と水滴の写真を主役に、深い緑と余白で落ち着きのある世界観を設計。コピーの反復や縦書きを使い、伝統を守りながら新しい市場へ進む姿勢を表現しました。メニューやCONTACTボタンのホバー時もFigma上で検討しています。

HOMEデザインとメニュー、CONTACTボタン、コピー配置の検討資料
HOMEデザインとインタラクションの検討

03

OEM PAGE

専門性を、強みと発注プロセスに分けて可視化

OEM事業の価値を「企画力・原料調達力・生産力・品質管理」の4つに整理し、発注から納品までの流れをカード形式で設計。専門的な内容でも相談後の進行をイメージできるページ構成にしました。

OEM事業ページの強み、CONTACTボタン、発注プロセスの検討資料
OEM事業ページと発注プロセスの検討