L’atelier Tyra
#Webサイト
Webデザインスクールの卒業制作として、半架空のフラワーアレンジメント・カリグラフィーのアトリエ「L’atelier Tyra（ラトリエ・ティラ）」のコーポレートサイトを新規制作しました。
-
現状の課題
アトリエの存在自体が知られていない。また、大量生産が難しく販路が限られる。
広報はInstagramでの作品投稿のみで、十分に活用できていない。 -
制作目的
まずは、アトリエの雰囲気や創業の想いを知ってもらうこと。
商品やオーダー方法を明確に伝え、注文までのハードルを下げる。
さらに、Instagramとの連携により、SNSからの新規顧客獲得につなげる。 -
ターゲット
仕事に忙殺されながらも「丁寧な暮らし」や「自分へのご褒美」を大切にしたいと願う30～40代女性。
サイトを見る
ID：portfolio
パスワード：0001
ブランドの世界観を視覚的に表現することで
訪れた人が “感性で惹き込まれる” サイトに
企画
Planning
本プロジェクトでは、実際のクライアントワークを想定し、競合サイトの調査、そしてクライアントへのヒアリングを行い、自ら企画書を作成しました。
ターゲットの課題設定からコンセプト設計を行い、それをもとにデザインを制作しています。
企画書
工夫した点
Design process
-
TOPページ
- 余白や文字間を広めにとり、落ち着きと温かみのある世界観に
- 忙しい日々を過ごすターゲット層にも、見るだけでホッと一息つけるよう、行間・文字間・余白にゆとりを持たせました。
- “こだわり”や“サービス”セクションを明確に配置
- ふんわりした印象になりがちなアトリエサイトの中でも、提供できるサービス項目や内容がしっかり伝わるよう、TOPページに情報設計として要点をまとめました。
- 写真を活かしたレスポンシブデザインを意識
- 絶対配置やvw単位を活用して、ビジュアルが際立つよう調整。ブレイクポイントを細かく設計し、画面幅ごとにバランスを最適化しました。
-
Our Creationsページ（制作実績）
- スライダー導入時の視認性を工夫
- SPではスライダーを採用しましたが、ユーザーが気づかずスルーしてしまう懸念があったため、右側に影を加えることで「続きを見たくなる」よう視覚的に誘導しました。
-
Orderページ（注文案内）
- ユーザーの心理的ハードルを下げる構成に変更
- 当初はオーダーフォームの設置を想定していましたが、質問項目が多くなりすぎ、離脱リスクが高まると判断。クライアントと相談の上、「InstagramのDMで一言メッセージを送るだけ」で注文ができる仕様を提案・実装しました。手軽に一歩を踏み出してもらえる導線にしています。
- CTAボタンでInstagramへの導線を強化
- 商品写真は主にInstagramに掲載されるため、ユーザーが迷わず移動できるよう、各ページの適所にInstagram誘導ボタンを配置しました。
-
アニメーション・ビジュアル面の工夫
- ファーストビューはズーム×フェードのスライドショーで世界観を演出
- アトリエのやさしい空気感を伝えるため、写真が徐々にズームしながらふわっと切り替わるアニメーションを採用。写真によって被写体のサイズや位置が異なるため、ズーム範囲と表示領域を細かく調整しました。
- フェードイン演出で、ページ全体に柔らかなテンポ感を
- 各コンテンツはゆっくりとフェードインさせ、ゆったりとした時間が流れるアトリエの雰囲気を表現しています。
-
使用ツール
Photoshop / Illustrator / Figma / HTML / CSS / JavaScript / PowerPoint
-
制作期間
- 2025年5月～6月（約2ヶ月）
-
ヒアリング・企画書作成約2週間
ワイヤーフレーム約1週間
デザイン約2週間
コーディング約4週間
サイトを見る
ID：portfolio
パスワード：0001