ページデザインのご利用
このページは、「豊富な機能を組み合わせてオーダーメイドでWEBページを制作する」ユニゼロワンでのページデザインの制作工程で制作されています。
制作工程は、さらにデザインページを基にした運用できるサイトに移管しての独自の「サイト構築」、機能特化型WEBページ制作の特徴である「機能実装」工程に進むことが可能です。
どの工程でもデザインページの修正・再制作、「サイト構築」「機能実装」工程での修正・再作成に対応しております。（「ページデザインプラン」では、制作の再依頼となります）
ホームページ（WEBページ）の制作依頼をご検討の方は、是非ユニゼロワンのホームページをご参照ください。 ➡ ユニゼロワンホームページ
ページデザイン説明（ページデザインのダウンロードもこちら）
疑似レスポンシブにより、PC/Tablet/SmartPhoneでの表示対応済です。
このページは、デザインのカンプ（見本）であり、ボタンなどはすべて機能しません。
このデザイン修正依頼は、ページ番号をユニゼロワンの「お申込みフォーム」にてご連絡ください。
*同じ内容で依頼されても全く別のバージョンをご提案する場合がありますので、このデザインを基にした修正では、ページ番号を添えてご依頼ください。
*「お試しプラン」の方は、修正依頼はできません。
このデザインから機能を備えたサイト制作をご希望の方は、ユニゼロワンのホームページより上位プランをお申し込みください。➡ ユニゼロワンホームページ
ユニゼロワンでは機能特化型WEBページ制作を行っており、動きのあるデザイン機能からWEB機能まで、あらゆる機能実装にオーダーメイドで対応しております。
制作依頼内容（このご依頼に従い、ご提案を含めて作成しております）
- 国内向けお茶のネットショップホームページを
- 色合いはお茶のグリーンを基調
ご依頼に添付されたファイルの有無
なし
制作コンセプト
お茶のグリーンで、心地よいお買い物へ
茶葉を思わせる深いグリーンと生成りを基調に、自然光の写真を合わせたネットショップをご提案しました。「一杯のお茶で、日々にひと息。」を主題に、日常の中でお茶を楽しむ時間を表現しています。
商品を選ぶ理由が見つかる構成
煎茶・ほうじ茶・玄米茶のカテゴリー、商品と価格のモデル、飲み比べ、ギフトを紹介しました。さらに味わいからの選び方、淹れ方の導入、お茶を楽しむ場面を加え、一覧を見るだけで終わらない11項目の構成にしています。
国内のお買い物に必要な案内
送料や発送、お支払い、返品・交換の案内欄と、初めての方に向けた質問・回答を設けています。金額や日数は検討用のモデル案です。販売条件が決まってから確定情報へ更新できる形にしました。国内向け販売を、国産原料の保証として表現していません。
確定情報と提案を分ける
ショップ名、商品、容量、価格、包装は仮案と分かる表示を付けています。写真は商品イメージで、実在の商品や生産地を示す資料ではありません。正式な事業者情報や原材料・産地などは確認後に差し替える前提です。
画面に合わせて読みやすく
パソコンとタブレットは3枚ずつ、スマートフォンは6枚の連続画像でご覧いただけます。商品価格や重要な条件を全端末で確認できる構成を目指しました。後の実装では正式な原稿と共通素材を使い、書体や配置の細部を統一します。
検索と内容理解への配慮
見出し、商品説明、条件、質問と回答を整理し、検索やAIにも内容を理解されやすい構造を設計しています。今回はデザイン作成までで、検索設定・購入機能・公開は含みません。検索順位やAIでの紹介を保証するものではありません。
SEO・AIO・アクセシビリティ・モバイルフレンドリー対策
このサンプルでは、ユニゼロワンでの機能実装プランでのSEO・AIO・アクセシビリティ・モバイルフレンドリー対策を前提にして制作しております。
*対策は、機能実装プランでのみ有効です。
1. デザイン段階で行った対策
SEO（検索で内容を伝えやすくする工夫）：お茶の商品、飲み比べ、ギフト、購入前の案内を見出しで整理し、検索用タイトル・説明文、画像の説明とページ内リンク案を用意しました。探している情報へ進みやすい設計です。検索設定は未実装です。
AIO（AIにも内容を理解されやすくする情報整理）：商品モデルと販売条件の案、質問への回答を文章化し、確定情報と提案を分けました。国内向け販売と原料の産地も区別しています。
アクセシビリティ（読み取り・操作への配慮）：文字色・背景色を指定し、主要な組合せのコントラストを計算しました。文字、行間、操作領域も設計しています。画像全体の規格適合や操作は未検証です。
モバイルフレンドリー（スマートフォンでの使いやすさ）：三つの画面用に同じ主要本文を配置し、スマートフォンは六分割としました。画像の確認までで、実機表示・操作は未確認です。
2. Webページへの実装で行う対策と確認
この区分はページ化を依頼する際に実装・確認する予定で、今回未実装です。
SEO：正式原稿を見出し・本文へ反映し、画像説明、リンク、検索用情報を設定します。構造化データは実商品とURLの確定後に検討し、モデル価格や架空の在庫を登録しません。
AIO：商品内容や送料の条件を読み取れる文章として配置し、ショップ責任者が確認した情報へ更新します。
アクセシビリティ：キーボード操作、選択位置の表示、画像の読み上げ、移動順序を実装して確認します。購入・検索フォームは今回なく、採用する販売システムに合わせた設計が必要です。
モバイルフレンドリー：狭い画面、文字拡大、縦横表示、タップ操作を確認します。写真の配信用軽量化と表示領域の確保を行い、速度は別途測定します。軽量化・速度測定とも今回は未実施です。
3. 公開時の設定・確認と残っている作業
SEO：管理者が公開URL、検索エンジンの閲覧可否、内部リンク等を設定・確認します。担当者は未定です。
AIO：ショップ責任者が商品・容量・原材料・産地・価格・販売条件と写真を確定します。事業者情報や購入前の案内も整備が必要です。
アクセシビリティ：実装担当者が販売システムを含め、操作・読み上げを確認します。購入や決済の動作は今回未実装です。
モバイルフレンドリー：実装担当者が実機表示と速度を確認します。今回の環境はWindows上の画像目視・寸法確認・指定色計算です。担当者は未定です。検索順位・登録・AI回答への掲載や引用、規格への全面準拠・全端末動作は保証しません。
ページデザイン（PC/Tablet/SmartPhone）ZIPをダウンロードできます。