WordPressオリジナルテーマでショッピングサイトの作成
ピアーレ桃花台の公式のHPを制作しました。figmaでHPのデザインを作成し、wordpressオリジナルテーマでHTML、CSS、JavaScript、PHPでコーデイングを行ました。
ピアーレ桃花台のホームページを作成させていただきました。
デザインから実装、サーバーのアップロードまですべて一人で行いました。
１．概要
・サイトURL
・使用言語
HTML、CSS、Javascript、PHP
・使用ツール
wordpress、Visual Studio Code、figma、ロリポップ
・開発期間
1か月
・要望
ターゲット層はスマホ利用者のためスマホのデザインに注力しPCは最低限のデザインに
全体的にシンプルなデザインでメインカラーを青に
ショップニュースとイベント・キャンペーン情報を載せる
２．デザイン案
【TOPページ】
スライダー部分のデザインを実装段階で変更しました。
【ショップリストページ】
【ショップ詳細ページ】
【ショップニュースリストページ】
【ショップニュースページ】
イベント・キャンペーンページはほぼ同じため省略します。
３．実装したHP
【TOPページ(スマホ版)】
その他下層ページは実サイトをご覧下さい。
ショップニュース・イベント・キャンペーンに関してはダミーデータを入れてあります。
４．制作にあたり工夫した点
全体的にアイコンを入れて視覚的にわかりやすくしました。
TOPページのスライダーの挙動を右から左に常に流れているように見えるようにしました。
ショップニュースを簡易的に表示させている箇所はデザイン通りになるようにコーディングを工夫しました。
５．制作にあたり苦労した点
レスポンシブデザインになるようにコーディングしたのですが、スマホ版とPC版で、ナビゲーションメニューの位置を変えたり、ショップニュースの配置の仕方を変えたりするためのコーディングに苦労しました。また、フロントエンドだけでなく、管理画面にショップニュースやイベント・キャンペーンの記事を投稿できるようにするためのシステムやショップ詳細情報をユーザーに登録できるようにするために独自の入力項目を追加できるようにするシステムを実装するのに苦労しました。