制作実績

2021.04.27

【制作実績紹介 #08】PayB(ペイビー)

今回は、弊社(スピカデザイン)で制作した実績紹介の第8回目です!

制作にあたってのこだわりポイントをお伝えいたします。

紹介サイト「PayB」

今回ご紹介するWebサイトは、「PayB」です。

▼URL
https://payb.jp/

▼制作実績掲載ページ
https://spiqa.design/works/payb/

PayBは、スマートフォンのアプリを使って公共料金や税金などの支払いができる便利なサービスです。

制作はディレクター1人、デザイナー1人、コーダー1人で担当しました。

こだわりポイント

①見やすいデザインとスタイリッシュな色合い

幅広い年齢層の方がサイトを使いやすいように、わかりやすく見やすいデザインを意識しました。
また、アプリのイメージカラーである紫をメインにし、薄いブルーやグレー、ネイビーで親しみやすさだけではなくスタイリッシュな印象も与える色合いを意識しています。

②オリジナルイラスト

トップページにはいくつか弊社でオリジナルで描き起こしたイラストを使っています。

サイトをデザインしたデザイナー自身がイラストも得意なため、シチュエーションや実際の動作・画面に合わせたイラストを作成いたしました。

③FV(ファーストビュー)のアニメーション

また、トップページのファーストビューのアニメーションにもこだわっています。
バーコード読み取り→支払金額の確認画面→パスワード入力→完了まで、一連の動作に沿って実際の画面をデフォルメした手書きイラストを作成し、アニメーションで表現しています。
短いループアニメーションですが、ずっと見ていたくなるような分かりやすく柔らかい動きにしました。

こちらもオリジナルでイラストを作成することにより、こうした表現の仕方を可能にしています。

④更新のしやすさを意識したWordPress構築

こちらのサイトは、各情報の追加・更新をクライアントが簡単にできるようにWordPress(以下、WP)で構築しました。
部分的ではありますが、ほぼすべてのページがWPで更新できるようになっています。

トップページ

対応金融機関、ご利用可能請求書、アプリの対応OSなど…

推奨環境・端末

対応金融機関一覧

ご利用可能請求書

その他、「お知らせ」、「よくあるご質問」、「プライバシーポリシー」などのページも投稿やテキストの変更が可能です。
また、WordPressの管理画面の各入力欄はクライアントが直感的に更新できるように、わかりやすく・使いやすい構築をこころがけました。

※掲載している内容は3月24日現在の情報です。

制作のご依頼は…

スピカデザインでは、Webサイトの制作だけではなく、ロゴ制作や動画制作、パンフレットやチラシといったDTPデザインも承っております。
ぜひお気軽にご相談ください!

0

関連記事

  • 2021.04.03

    【制作実績紹介 #07】SPIQA DESIGN

    制作実績

  • 2021.03.20

    【制作実績紹介 #06】R.O.clinic

    制作実績

  • 2021.03.13

    【制作実績紹介 #05】オアスパ(OASIS RESORT SPA)

    制作実績

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!