Works制作物

Kamakura no Florist.

Kamakura no Florist.
制作範囲:
企画・ワイヤーフレーム制作 / ライティング制作 / ロゴマーク制作 / デザインカン制作 /コーディング/お問い合わせフォームの設置
制作期間:
2023年6月~12月制作(7カ月)
使用ツール:
Adobe Photoshop / Adobe Illustrator / AdobeXD/Visual Studio Coder

概要

2018年6月から2025年2月まで勤めていた会社で携わった仕事は、社会福祉法人のサイトや企業サイト等、共通して真面目なサイトに携わることが多いです。個人的には、ターゲット層が若い女性で女性らしいWebサイトが作りたいと思い、テーマを「花屋サイト」に決めました。ターゲット層を深堀してペルソナ作り・コンセプト決め・サイトマップ制作・写真と動画選び・ライティング・PDFファイルの作成等、制作前の準備を念入りにした上で、デザインしPHPでお問い合わせフォームとお花のご注文フォームの実装まで制作しました。

ターゲット層

日頃から花を自宅で飾ったり、人に花をプレゼントすることが好きな20代~40代女性

目的

架空の花屋サイト「Kamakura no Florist.」をリニューアル制作するよう依頼されたことを想定し、 「タブレット、スマートフォンでも出来るWebサイトにして欲しい」「写真などを多用して商品の魅力を紹介したい」「店頭や電話・FAXだけはなく、お問い合わせフォームとお花のご注文フォーム を設置したい」等の要件に沿ったWebサイトを制作すること

情報設計の工夫

トップページと商品紹介ページ(花束・アレンジメント・ボックスフラワー・ドライフラワー)を中心に写真を多用し、品の良さを感じさせる明朝体で必要最低限の文章で商品を紹介しました。気を配った点は、商品が安くても3,000円からの料金設定のため、たっぷり余白を使って写真や文章の配置をすることで、少し品があって高級感を演出しました。
また、ユーザーが気になる注文方法(電話・FAX・メール)や支払方法等を丁寧に説明、ユーザーから寄せられる質問をまとめた「よくある質問」ページなどを設置してり、Webサイトから離脱しないように気を配りました。
この架空の花屋は店舗もありつつ、ネットショップ運営も行っている設定のWebサイトです。制作する前に調査した際、消費者と販売者の間でトラブルが発生する前にルールを定めている法律「特定商法取引法に基づく表記」ページが必要なことを知りました。架空とはいえ本物に近づきたいと思い、「プライバシーポリシー」と「特定商法取引法に基づく表記」ページも設置。法に基づいて花屋を運営しているシッカリした部分もあることを意識して制作しました。

デザインの工夫

ターゲット層の20代~40代女性は、職場ではデスクトップパソコンまたはノートパソコンでしょうが、プライベートではタブレットやスマートフォンでの閲覧が多いと思われますので、スマートフォンを中心としたデザインにしました。また、大手ECサイトのように「対象ショップ限定ポイント最大5倍」や「24時間タイムセール」「対象アイテム限定5%OFFクーポンプレゼント」など、ユーザーにとっては安くてお得感を出すことは、「架空の花屋サイト」に設定したテーマからズレてしまうことから避けました。
人の買い物心理は2パターンとあると思います。店員から「これお得なんです!」と声をかけられたら素直に購入する方もいれば、逆に押し売りに感じされて、その場から逃げてしまう人もいると思います。私は後者のため、人から押し売りされるより自分の意志で選び購入したいタイプです。私以外にも店員に話しかけれずに、自分のペースでじっくり時間かけて検討し購入したい方はいらっしゃると思われます。じっくり購入タイプのユーザーに対して、派手なデコレーションや配色・タイムセールなどで購入を急がせて、後で購入したことを後悔していただきたくないので、ユーザーが自分の意志で購入しやすいように工夫しました。

花屋のカラーチップ

サイト全体

▼パソコン版
パソコン版の花屋サイト
▼スマートフォン版
スマートフォン版の花屋サイト