Hiroki Saiki 株式会社スタートライン様は、障害者雇用の総合コンサルティングを軸に、障害者の雇用を考えている企業様と就労を求めている当事者を結びつけ、各企業様向けには障害者雇用のためのサービスを提供し、企業就労を求めている方向けには職業訓練や就労支援を提供している企業です。
既存の WordPress 製サイトのリニューアル
スタートライン様はこれまでも WordPress でウェブサイトを運用されていましたが、サービスの拡大に伴って都度部分的にウェブサイトの改修を続けてきたこともあり、サイト全体としての統一感が減ってしまっていると感じられていました。
また、新しく追加したいコンテンツがあっても反映に時間を要していたり、いまのウェブサイトが100％有効に活用できているとは言えないとも感じられていました。
そこで、今回のウェブサイトのリニューアルに際しては、まず必要なコンテンツを網羅した上で情報を整理して、閲覧者が必要な情報にたどり着きやすくすると同時に、より「スタートラインらしさ」が表れたWebサイトとなるよう、ウェブサイトのトーン＆マナーから新たなデザインをご提案することとなりました。
リニューアルに伴う「スタートライン様らしい」デザインの提案
デザインに着手する前のヒヤリングの段階では、まず「デザインでどんな『らしさ』を表現したいか」「どんな雰囲気のデザインをイメージしているか」を伺い、参考のサイトやラフとして作成したデザインをご覧いただきながらイメージのすり合わせを行いました。
この段階では、スタートライン様の理念やビジョン、以前から用意なさっていたブランドガイドラインをもとにして、それをどのようにデザインとして表現するかという観点から打ち合わせを繰り返して検討し、その内容を反映したデザインをご提案してスタートライン様が求めているデザインのイメージを具体的にしていくためのサポートを行いました。
カラーパターンについても複数の作例を比較検討いただき、最終的にサイトのメインカラーをコーポレートカラーより採用し、それをもとにサイト全体の統一感と情報の整理を心がけて各ページデザインの作成に入りました。
「一般的には『福祉』というと柔らかいイメージを持たれやすいけれど、社会を変えていく力強さ・マインドを表せるようなデザインにしたい」というご要望もいただいていましたので、全体的に信頼感が得られてシンプル、かつ情報が見やすくユーザー様に届きやすいデザインになるよう心がけました。
スタートライン様では企業様向け・求職者様向けの多くのサービスがあり、それぞれのサービスのご紹介ページではワイヤーフレームのご提供をいただきました。
デザイン上はそれを再現しつつ、更に情報の整理や共通化、コンポーネント単位でのデザインパターンの作成など、各サービスのページごとに異なるご要望にお応えしながら全体の設計をデザインに組み込んでいきました。
ブロックエディターへの対応
リニューアルに際しての改善のご要望の中に「ページの内容が自由に編集できない」というものがありました。
事前に確認したところ、リニューアル前に利用されていた WordPress のテーマは独自に作成されたものでしたが、コンテンツ部分である「本文」の殆どがテーマ内の PHP ファイルに直接記述されており、スタートライン様の社内でコンテンツの編集をすることが困難な状況でした。
今回のリニューアルでは最新の WordPress に対応し、またブロックエディターへの対応についても Snow Monkey テーマおよび Snow Monkey Blocks プラグインなどを利用し、すべてのページのコンテンツが WordPress の編集画面からブロックエディターを利用して編集可能になりました。
また、ブロックエディターで構築されたことにより、項目の追加・並べ替えなども直感的な操作で実現でき、スタートライン様社内でのコンテンツの編集がかなり自由に行えるようになりました。
カスタムブロックとブロックパターンの活用
今回のリニューアルでは、スタートライン様の数多いコンテンツをいかに利用者様にわかりやすく伝えられるかをデザインの初期段階から打ち合わせながら考えました。そこに「あとからの編集のしやすさ」なども含めて、ご要望とデザインに合わせたカスタムブロックを数多くご用意して実装しました。
また、ブロックパターンも活用することで、ある程度フォーマットの決まったコンテンツを量産したいというご要望にもお応えすることができました。
静的化によるミドルウェアの管理の軽減
運用時の WordPress のサイトにおける心配事の一つは、OS や Web サーバー、PHP、MySQL といったミドルウェアの継続的な管理です。これらは常に定期的なメンテナンスが必要で、特にクラウドサーバーなどを利用した場合には、その管理も別途行う必要があります。
この点については、Shifter を導入することで解決を行いました。Shifter を利用すると、公開領域には静的なファイルしか公開されないため、サーバー管理にかかるミドルウェアの保守を気にする必要がなくなりました。
Salesforce との連携
今回のリニューアルに合わせて、利用者様からお問い合わせいただいた内容が社内で連携され、利用者様により良い体験をいただくために、Salesforce との連携を行いました。
具体的には、Pardot のフォームハンドラーを利用することでいただいたお問い合わせに対してより迅速に社内での情報の共有が可能になり、その結果利用者様に対しても速く的確に返信できるようになりました。
サイト内検索の高機能化と高速化のために Algolia を実装
さらに、サイト内検索機能の向上と高速化を実現するため、SaaS サービスの Algolia も実装しました。これにより、キーワードの「揺れ（表記ゆれやよみがななど）」を事前に登録しておくことで、登録したどのキーワードでも求められている検索結果を表示できるようになりました。
また、 Algolia を採用することによって大変高速な検索機能が実装できました。
デザインからフルリニューアルすると同時にコンテンツを整理し、クライアント様・ユーザー様共に使いやすいサイトに
今回のリニューアルは「フルリニューアル」といえる内容で、デザインもコンテンツも既存のものを整理・精査し、どのように情報を伝えていくかという段階からスタートライン様と打ち合わせを重ねました。
来訪者が迷うことなく必要な情報を得られるように、またスタートライン様も伝えたい情報が見やすく整理されてサイトの中に掲載されるように、サイトマップ・ワイヤーフレームの作成段階から一緒に検討し、「わかりやすい」サイトを目指しました。
弊社では、クライアント様と共にウェブサイトの構成や構造を作り込んでいくことも得意としています。
掲載したい情報はたくさんあるが、その情報をウェブサイトの来訪者へどう見せていけばいいのかお困りであれば、是非わたしたちへお声がけくださいませ。