株式会社ピエラス様

ピエラス様のプロポリンス製品のみを販売されているサイトになります。売りたい商品を絞り上げ、コンテンツ内ではキャッチコピーなどをふんだんに使い製品アピールに力をいれて、まとめあげておられます。また販売ができるようになっているサイトになっております。
URL:http://propolinse.jp/

プロジェクトの流れ

構成について

今回、新たなミッションとして依頼されたのがシングルページでカート実装の要件定義でした。さらにレスポンシブにも対応です。コンテンツとしてはテキスト だけではなく、動画をつかってのアピールも提案内容として盛り込んでいます。

デザインについて

テーマカラーはオレンジ系でユーザー様の印象に残るのではないかと提案はこちらからさせていただき承認をいただきました。WEBサイトはレスポンシブでスマートフォンユーザーに対して、あまり長くなりすぎないように各コンテンツにアコーディオンを提案し閲覧時に負担にならないように考えています。デメリットはコンテンツが隠れてしまうので興味のない部分に関してはスルーされる可能性があります。シングルページなので将来的にコンテンツの追加があってもいいようなデザインを意識しています。

コーディング・マークアップについて

レスポンシブにつきフレームワークの導入をしています。Bootstrap4を取り入れています。もちろん不必要なファイルはnpm時に取り除き必要なものだけをモージュルで読み出しています。ファイル数も減り、使用していない不要コードもなくなり軽量化をはかっています。さらに演出としては、サイト両脇にある模様をスクロールして動かすというアニメーションを施しており、ブラウザが可変しても問題ないようにマークアップしています。技術的にはフロントエンドエンジニアのフルスクラッチによる目玉の部分となります。SEOを意識したコーディングをしています。

カート実装への組込み

全体的なカートのシステムを開発するにあたり、テンプレートエンジンとして「Twig」を採用しています。「Twig」を利用することでページ全体の統一感と、見た目のビューとカート機能のロジックがコード的に分離されていることによって保守性の向上を図っております。今後の運用や保守性までを考えてテンプレートエンジンの導入をして正解だと感じています。弊社ではCMS組込みの際でも必ず組込み作業がある場合はスタテッィク（静的）サイトを用意します。それから組込みを開始いたします。コーディングの美しさを追求した開発が可能となっております。

運用について

今でも変わらず更新をしています。大きな内容としては「商品自体がなくなれば取り下げる」、「内容が変われば変更する」、「新商品がでれば登録をする」などあります。キャンペーンなどもされており、お問い合わせも随時きているので長い目でみても、いいWEBサイトだと感じています。今後の経過も含めて楽しみなWEBサイトとしています。