実録！アップルップルサイトリニューアルの裏話。

デザイナーの井斉です。

さて、この度アップルップルのコーポレートサイトが新しく生まれ変わりました！今回はサイト構造・コンテンツ・デザイン・実装方法等の各フェーズで見直しを行い、サイト全体をフルリニューアル。まだ公開予定のコンテンツこそ控えているものの、無事リリースという一つの区切りを迎えることができ、スタッフ一同ホッとしています。

今回はそんなサイトリニューアルを記念して、これまでの経緯や制作フローなどの裏話をご紹介していきます！

始まりは「運用やコンテンツ変更を気軽にできるようにしたい」という声から

そもそもなんでコーポレートサイトをリニューアルしようという話になったのか。それは、社内における近年の制作方針の変更が大きく関係しています。

以前はテキストの変更こそできるものの、「サイト構造を拡張する」「トップなど目立つページにPR用のパーツを新しく追加する」といったレイアウト面は、テンプレートを介して変更する必要がありました。もちろん当時はその構造で合意を経て制作を進めていたため、実際に運用がスタートしてからもしばらくは目立つような不都合はありませんでした。

しかしここ数年、感染症の流行や社会情勢などを経て自社の主要サービスが変化したこともあり、次第に「ブラウザ上でレイアウトの拡張までできるコーポレートサイト」への社内需要が高まってきました。また実際の制作案件においても、より拡張性のある実装方法を模索していたタイミングでもあったため、自社のコーポレートサイトもその変化を取り入れようという流れになりました。

「かっこいいサイト」という言葉に隠れる願いを深掘る

メンバーが集まりいざキックオフ。当初のざっくりとした方針は下記のようなものでした。

• 運用やコンテンツ変更を気軽にできるようにしたい
• 既存のコンテンツを変えたいわけではない
• 事業内容の拡大に基づきサービスページを見直したい
• 今までの可愛らしいアップルップルのイメージを脱したい
• アニメーションのある今時のかっこいいサイトにしたい

これらの要点だけをまとめると、おそらく「コンテンツは引き継いだまま構造とデザインを変更したい」というところなのですが…。ここでデザイナー、疑問を抱えます。「かっこいいってなんだ？」と。「なんで今までのアップルップルのイメージを脱したいんだろう？」と…。

少し話が逸れてしまいますが、制作会社のデザイナーさんであればこのような抽象的な要望を誰もが一度は受けたことがあると思います。かっこいい、優しい、スタイリッシュな、信頼感のある…。そんな言葉がイメージを連想させる上でスタート地点となるようなケースは、意外と少なくないのではないでしょうか。

しかし10人いれば10通りの感性があるように、「かっこいいサイト」と感じる要素は人それぞれ異なります。そこで抽象語にたどりつくまでの願いや背景に焦点をあて、2種類のターゲットの視点から深掘りしていきました。

1. 初めて訪れたお客さんにどんな印象を抱いて欲しいか
2. 競合他社や求職者にどんな印象を抱いて欲しいか

今回はこのそれぞれに対し、「もっとも感じてもらいたい印象」「感じてもらいたい印象」「感じてもらわなくてもいい印象」をブレストしていきました。下記はその一例です。

1.初めて訪れたお客さんにどんな印象を抱いて欲しいか

2. 競合他社や求職者にどんな印象を抱いて欲しいか

こうして言葉にすると、自社としてのありたい姿がだんだんと浮かび上がってきます。キックオフで出た「かっこいい」という言葉が表しているのは、自社が誇りにしている技術面や親身なサポートへの信頼感。ギラギラと尖っているようなイメージではなく、堅実的にいい仕事をする集団としてのイメージです。

またこちらの願いを起点に展開すると、副次的に出ていた「アニメーションのある」や「可愛さを脱する」という言葉も「先進的な技術力とデザイン性のある」や「ユーモアや手軽さ重視ではなく、高品質な制作物を手がける」といった言葉に置き換えられ、さらにイメージが固まりました。

このような願いや背景をもとに、いよいよ本格的な制作作業へと展開していきます。

ワイヤーフレームで気づくユーザー視点の落とし穴

「コンテンツは引き継いだまま構造とデザインを変更する」という方針から、まずは既存のコンテンツを基にサイトマップとワイヤーフレームを準備。並行してGoogle Analyticsの蓄積データや過去にお問い合わせを受けた用件などを調査し、ユーザーが本当に必要としている開示情報が一体何なのか、予測を立てていきます。

• ユーザーは誰か？
• ユーザーはどんな状態でこのサイトを訪れるのか？
• その時のペインポイントは何か？
• 理想的なゲインポイントな何か？
• そこへ推移する上で必要となる安心要素とはどういうものか？ etc…

またこのフェーズを経て既存のテキストを読み進めてみると、「この文脈、専門的すぎてメリットがいまいちわかりづらいな…。」「というかこのテキストは長すぎて読まれない気がする…。」といった生身の心情もふつふつと湧いてきました。さらに「ここで強みとして書かれていることは自社の中でも共通認識があるのだろうか？」といった疑問も出てきました。

そこで今度は、コーポレートサイトを通じてユーザーに自社の強みを正しく伝えるべく、市場調査でも用いられるSWOT分析を使ったワークに取り組みました。

SWOT分析とは、自社やそれを取り巻く外部環境の分析に使われるフレームワークです。今回は計4時間ほどかけて、スタッフ全員で事業の強みや弱み、好機や脅威を話し合い、主観性を極力取り除いた状態でブレストしていきました。

この作業を経て特に印象的だったのは、今まで自社として強みと謳ってきたことでも視点を変えれば弱みと表裏一体になるということです。例えば自社ではCMSの開発元という立場を生かしてスピード感と品質を両立させた制作に取り組んできたのですが、訪問者の目線に立つと必ずしも「自社開発のCMS」というワードが安心要素になるとは限りません。そのような中で、自社が大切にしていることをどのように伝えるのか、また弱みに対してはどのように克服していくのかというようなことを話し合えたのは、Webサイトリニューアルの目的を考慮せずとも良い機会となりました。

ワークを終えた後は、ワーク内で出た様々な意見をマインドマップで整理しながら、Webサイトで伝えていく具体的な文脈の構想を練る作業へ。また社内の共通認識が改められたことで、既存のページに対しても新しい目でコンテンツを見直そうという動きも進められ、ページごとのストーリーも再構築していきました。

ちなみにこのブラッシュアップにおいてとても参考にさせていただいたのが、株式会社ベイジさんが公開している「BtoBサイトを成功に導く180のチェックリスト」。サイト全体においてこの用件を満たしているか1つずつ確認をして、もし満たさない箇所があれば改善、意図して外すようなことがあればその理由を全員が目につく箇所に明文化していきました。こんな便利なものをまとめてくださったベイジさんには感謝しかありません…！大変お世話になりました！

納得感を大切に。対立項目は具体例で見える化して1つずつ解消

方向性と大まかなコンテンツが確定したら、具体的なビジュアル化の作業へ。それぞれのスタッフが推薦した参考サイトからもヒントを経て、堅実的で安心感のある印象と自社らしさを融合させたテイストを模索していきます。特にファーストビューのデザイン案は、大きく印象の異なるものを数パターン展開。ビジュアル面だけでなく、実装の実現性も含めて慎重に検討しました。

そして制作が佳境になると増えてくるのが、細部の造り込みおけるメンバー内での意見の対立。頻繁にミーティングを重ねて解消を試みるも、長く平行線をたどる議題も少なくありませんでした。

そんな状況の突破に役立ったのがこの2つの取り組みです。

1. 「議題に上がった項目」と「その時点での結論」を明記した議事録を残す
2. 言葉ベースで複数の案が出てきたら目に見える形で具体化する

1. 「議題に上がった項目」と「その時点での論点や課題」を明記した議事録を残す

どんな案件においても、ミーティングの際に議事録を残すということは多くの現場で行われているのではないでしょうか。そのやり方は様々だと思いますが、今回はプロジェクトが9ヶ月という長期期間に渡ったため、主に次のようなことを意識して記録していました。

• 次のミーティングで解決したい項目を事前に参加メンバー全員で書き出しておく
• 上記とは別に議題で上がった項目が書ける欄も用意しておく
• 結論が出なくても候補に上がった検討項目はリスト化しておく
• 複雑化した場合は検討要素や問題点もメモしておく

ミーティングの頻度は平均して1週間から2週間に1度ほど。その度に毎回しっかりと議題を準備しておくことで、解決までにかかりそうな時間の見積もりや、それぞれの項目の優先度などを考えながらプロジェクトを進めていくことができました。特に「その場で結論が出なくても、その時点での論点や課題も明記する」という取り組みは、一度保留となった項目に対しても後戻りを極力抑えることができ、とても効果的でした。

2. 言葉ベースで複数の案が出てきたら目に見える形で具体化する

コンテンツの優先度やストーリー構造の話し合いでは、1つの大項目に対しても複数の着眼点から提案が飛び交う場面も。そのような時は言葉ベースでアイデアを絞り込むのではなく、なるべく全ての案を反映した資料を用意して、比較を重ねていきました。

これは普段の制作案件を含めた経験上の感覚なのですが、特にビジュアルに関わる検討項目は、机の上に何もない状態よりもある程度見える化されたプロトタイプを基に話し合うより方が圧倒的に議論が進みやすいです。これはおそらく、具体例を複数並べてみることで「この案はいいと思う」というプラスの意見だけでなく、「この案は今回は求めてない」という対極のイメージも掴みやすくなるからではないかと思っています。

このように議題そのものが混沌化した時でも、1つ1つの小項目を順番に検討する機会を用意したことで、最終的な結論におけるチームの納得感を高めていきました。

リニューアルサイトに想いを込めて、いざ公開！

プロジェクトが進むにつれ当初予定のなかったアイデアが生まれ、それに伴ってページが増えたりサイト構造を拡張したりとまるで生き物のように育っていったリニューアルサイト。普段はサイト制作を受注する側ですが、自社サイトをリニューアルする立場に立ったことで、どのようにプロジェクトを進行していけばもっとお客様に寄り添えるのか、私たちが提供していくべき品質を超えた体験は何かを改めて考えるきっかけにもなりました。今後もこの経験を生かし、Webサイト制作のプロとしてお客様が求めている価値以上のものを提供できるよう、精進していたいと思います。

また冒頭でも少し触れた通り、アップルップルのコーポレートサイトでは今後も新しいページを順次公開予定です。スタッフブログやサービスのご案内、採用情報の詳細など、さまざまなコンテンツをアップデートしていく計画を立てていますので、今後ともどうぞよろしくお願いします！

最後までお読みいただきありがとうございました。