WordPress を静的に活用するSaaS「Shifter」日本語サイト

Creative Direction

「Shifter」を利用したい、利用すべきお客さまに届くようにウェブサイトを再構築

WordPressを静的ファイルに変換し、そのままホスティングできるサービス「Shifter」。運用コストやセキュリティ的にも、利用者さんにメリットの多いサービスです。

SaaSであるShifterのサービスを伝えるウェブサイトとして、メリットや利用方法、Shifter StaticとHeadlessの違いなどを網羅的に説明する必要があると考え、掲載内容を再設計。言葉づくりを軸に、情報を再構築しました。

ShifterとWordPressの利用方法はチュートリアル動画も多数作成し、言葉を補完、強化できるようにしました。

Contents Design

Shifter について、1から言語化を行いワイヤーを作成

世界中の有名企業で使用されている Shifter ですが、デジタルキューブさまはおもに2つの課題を抱えていました。ひとつめは「Shifter がウェブサイト作成サービスであることがいまいち伝わっていない」。もうひとつは、「Shifter が WordPress とどのような互換性があり、WordPress の機能をどのように向上させるのかを詳しく伝える必要がある」。

リニューアルを通してこれらの課題をクリアできるよう、まずは要件整理と情報設計をしっかりと行いました。また、実際に Shifter を触って検証を重ねながら、1から言語化を行いワイヤー作成を進めていきました。

Web Design

コンテンツの充実したサイトで円滑に情報を取得できるデザイン

今回のリニューアルではShifterの特徴や機能、導入方法、サポートなど、これまでより一層コンテンツが充実し、Shifterを使ったことがない方にも、既存ユーザーの方にも役立つ情報満載のサイトになりました。

そんな充実度の高いコンテンツをしっかり機能させるべく、デザインではアイコンや図版、動画などを積極的に使用し、スムーズに情報を取得できるようにしています。2つのプロダクト「Static」と「Headless」についても異なるシンボルを与えることで、2種類のプロダクトがあることを理解しやすく、選択肢の多いメニューでも直感的に必要な情報へたどりつけるようにしています。

また、特徴的なShifterのロゴのパーツを各所にあしらうことで、どのページを見てもShifterらしさを感じられ、「ウェブサイトの制作がもっと楽しくなりそう！」とポジティブな感情を持ってもらえるようなデザインも意識しました。

Motion Design

導入方法やサービス利用の流れがわかる説明動画を作成

Shifterをはじめて利用される方にも導入方法やウェブサイトの作成手順がわかるよう、合計15本の短い説明動画を用意しました。文章や画像だけではイメージしにくい操作手順も、一連の流れを時間軸に沿って見えるようにすることで、理解しやすく導入のハードルも下げられます。すべての動画は数秒間のスライドショー形式になっており、自動再生・ループ動画でも現在地がわかるようインジケーターのモーションを取り入れています。

Client Voice

外のモノサシで私たちのサービスを整理・言語化してくれました

自社サービスである「Shifter」のサービスサイトリニューアルにあたり、デザインをneccoさんにお願いしました。
Shifterのサービスリリース当初から数年経ち、ユーザー層が変化し、また類似のホスティングサービスが増えるなかで、改めてShifterとはどんなサービスなのか？どんな人にどのように役に立てるのか？を整理し直さなければならないと感じ、サイトリニューアルを計画しました。

その際、外からの視点を取り入れた方が良いということでneccoさんにデザインを依頼しました。
市場の状況や、その中でのShifterの立ち位置を整理していただき、ビジュアルだけでなくメッセージングも総合的にデザインしていただきました。

リリース直後から、社内や知り合いに「わかりやすい、かっこよくなった」という声をもらっており、手応えを感じています。
ありがとうございました。

株式会社デジタルキューブ
小賀 浩通