Works制作物

制作範囲：

企画・ワイヤーフレーム制作 / ライティング制作 / ロゴマーク制作 / デザインカン制作 /コーディング/お問い合わせフォームの設置

制作期間：

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サイトです。制作する前に調査した際、消費者と販売者の間でトラブルが発生する前にルールを定めている法律「特定商法取引法に基づく表記」ページが必要なことを知りました。架空とはいえ本物に近づきたいと思い、「プライバシーポリシー」と「特定商法取引法に基づく表記」ページも設置。法に基づいて花屋を運営しているシッカリした部分もあることを意識して制作しました。

お問い合わせフォームの実装について

お客様との接点となる「お問い合わせフォーム」と「お花のご注文フォーム」は、ユーザーの目的に応じて迷わず入力できるように2種類用意しました。
フォームの実装には、GRAYCODEの「お問い合わせフォームを作る」ワークショップを参考に、以下のような構成で段階的に実装しています。

1. フォーム設計：お問い合わせフォームと注文フォームを目的別にページ分割し、それぞれの入力項目やUIを最適化。ユーザーの目的に応じた導線と情報設計により、入力負荷を軽減し、送信精度を向上させました
2. フォーム構築：PHPによる基本的な入力フォームを作成し、WordPressテンプレートとして組み込みました
3. バリデーション：必須項目や形式チェックなどの入力検証を実装し、入力ミスや不備を防止しています
4. 確認画面の表示：送信前に内容を確認できる画面を設置し、ユーザーが安心して送信できるよう配慮しました
5. 完了画面の表示：送信後に安心感を与える完了メッセージを表示し、次の行動への導線も設計しています
6. 自動返信メール：ユーザー宛に送信内容の控えを自動送信し、同時に管理者にも通知メールを送信。管理者宛の通知メールには、ユーザーが入力した内容をそのまま記載し、件名や本文に識別しやすい情報を含めることで、対応の優先度や内容をすぐに把握できるよう工夫しています
7. UX配慮：迷わず安心して送信できるよう、導線や文言、ボタン配置などにも配慮し、ユーザーの不安や迷いを軽減しました

サイト全体