Onebox株式会社様のメール共有システム『yaritori』のサービスサイトのリニューアルを担当しました。

URL

https://yaritori.jp/

担当

デザイン／コーディング／WordPress

リニューアルの目的

コンバージョン率の改善／ユーザービリティの改善

制作期間

デザイン：３日間（TOPページの他、下層ページを合わせて８ページ）
コーディング＆WordPress：４日間

デザインについて

・サイト全体の配色は、ロゴの青色とリニューアル前のサイトデザインから乖離しすぎないように、引き続き青系の色を使用しました。目立たせたい箇所には反対色の黄色を採用し、メリハリをつけるようにしています。青色と黄色を使うことで、競合が多い中で、サイトを見るユーザーにとってフレッシュで新鮮な印象が出て差別化になるよう意図しています。

・メインビジュアルでは温かみのあるキャラクターのイラストを配置し、ユーザーに安心感を与え、また使用イメージを直感的に持ってもらうようにしています。

・TOPページ「yaritoriの特徴」の箇所では、サービスの画面を大きく表示し、サービスの特徴についてユーザーに理解してもらいやすいようにしています。

・TOPページ「導入の流れ」の箇所では担当者の顔とコメントを出すことで、親近感と担当者が実際にちゃんと存在するというサービスへの信頼感を出しています。

実装について

・作業前はHTMLにはほとんど手を加えずCSSの書き直しと画像の変更のみの対応の予定でした。しかし、改修前のWordPressのテーマのコードを見ると、リニューアル後のデザインを再現するには、ほぼイチから書き直すの方が速いと気づき、結果的にWordPressテーマをほぼ最初から作り直した形となりました。

・スマホでは、ハンバーガーメニューとドロワーを設置し、下層ページへ遷移しやすいようにしました。

・スクロールに応じて要素が下からフェードインで登場するようにし、ユーザーの視線を誘導するようにしています。