2022 Sep 6

田口冬菜

necco note

ACESのウェブサイトができるまで｜情報設計・デザイン・モーション制作編

Motion Design
Web Design

こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。

2022年7月、neccoがウェブサイトリニューアルを担当した、株式会社ACES（エーシーズ）さんのサイトが公開されました。

この記事では、ACESさんのウェブサイトができるまでの過程を、情報設計・デザイン・モーション編として紹介します。

ACESさんのウェブサイト：株式会社ACES
実績詳細（necco）：ACES Corporate site｜Project

プロジェクトの概要

株式会社ACESは、AIアルゴリズムを用いて、属人化しているヒトの知見や業務をデジタル化するAI事業会社です。「アルゴリズムで社会はもっとシンプルになる」というビジョンのもと、2017年に東京大学松尾研発のAIスタートアップとして立ち上がりました。

AIアルゴリズムを軸に、保健、金融、小売、介護、人材、建設、スポーツなどさまざまな業界のパートナーと並走し、DXを推進・支援する「DXパートナー事業」、DXパートナー事業の中で蓄積した知見をもとに開発した「AIソフトウェアサービス」を提供しています。

そんなACESさんのウェブサイトリニューアルをご依頼をいただき、neccoでは情報設計からウェブデザイン、コンテンツデザイン、モーションデザイン、実装、撮影などを担当させていただきました。

情報設計

まずはサイトマップ、ワイヤー、制作資料などを作成する情報設計から。

ACESさんが想定しているサイトマップ案、リニューアルの目的と解決すべき課題、ウェブサイトの役割などを共有いただき、その内容をもとにneccoでも検討、調整を行いました。

リニューアルの目的と解決すべき課題

ミッションや事業、採用情報などACESの今がわかるサイトにする
すべての情報の窓口となり、訪問者が求める情報へアクセスしやすい状態にする
更新のリソースを削減し、担当者に完結して随時更新できる仕組みを作る

リニューアル前のサイトでは、最新の事業内容が反映できておらず、ミッションやビジョン、ACESの考えを伝えきれていませんでした。また、クライアント候補、採用候補者、メディアなど、ウェブサイトを訪れるターゲットが求めるコンテンツが十分に掲載できておらず、外部リンクも多い状態。情報を集約できていないなど、明確な課題がありました。

これらの課題はプロジェクト開始時からACESさんが言語化していただいていて、同じ方向を見てプロジェクトを進める上でたいへん参考になりました。ありがとうございます。🙏

ACESにおけるウェブサイトの役割

クライアント候補：自社課題を解決できる、技術力のある企業かどうかを検討してお問い合わせいただく。
採用候補者：採用ページや記事コンテンツ、事業内容などを見ておもしろそうな会社かどうかを判断し、カジュアル面談の申し込みをしてもらう。
メディア：メディア担当者がACESのウェブサイトを閲覧し、取材の切り口を検討の上、取材しようと思う。

上記の内容をふまえ、サイトマップやワイヤーフレームの作成を進めました。

サイトマップ作成

サイトマップはACESさんの案をベースにブラッシュアップしました。

本当にこのページは必要か、こんなページを作成すればより課題を解決しやすいのではないか、3つの課題が解決できるか、この構成でウェブサイトの役割を果たせるかなど、CDの阿部さん、編集者の夏井さんと検討を重ねました。

ワイヤーフレーム作成

ワイヤーは技術や実績のページなど、「これまでのサイトにはなかったけど、リニューアル後はしっかり見せたい情報」を掲載するページから作成しました。

ページの内容を決めるため、まずは話し合いの土台としてのワイヤーを作成。社内やACESさんとミーティングを繰り返し、必要な情報、見せ方を決めていきました。

例えば技術ページなら、どのような粒度で技術を掲載するのか、アイコン・テキストなど何がどれだけあれば伝わるか、技術の分類や親子関係などはあるかなど… できるだけ具体的なワイヤーを作成します。

また、ソートやフォーム、CMSのカスタマイズなど実装面での検討が必要そうなページも優先的に作成しました。ワイヤーの作成順はCD阿部さんと相談して決め、仕様については社内のエンジニアさんとも相談します。

私たちについて（ACESについて）、代表メッセージ、事業紹介のページなど文章の作成・編集が中心になるページは、編集者の夏井さんと阿部さんが中心になって進めてくれました。

デザイン作成

コンテンツの全体像が見えてきたところで、メインビジュアルや各ページのデザイン、スタイル作成などをはじめます。

情報設計と同じく、今回のウェブサイトリニューアルで達成すべき課題やサイトの役割を意識し、必要に応じてモックアップ動画も作成しました。

今回はメインビジュアルのイメージ案から作成。画像はデザイン案の一部です。トップのデザインはワイヤーを少し発展させた仮のもの。

いまとこれからの「ACESらしさ」を探りながらデザイン検証を行い、いくつかは静止画とあわせて動きのパターンイメージも作成しました。

ACESさんらしさの表現を考えるにあたり、下記の記事を参考にさせていただきました。素敵な記事を書いていただき、ありがとうございます。🙇‍♀️

1つ目は、ACESの代表である田村さんのnoteです。

アルゴリズムで社会はもっとシンプルになる。

Deep Learningは、複雑なものを複雑なまま扱うことのできるアルゴリズムです。そんなアルゴリズムの力で、私たちの社会は、複雑でゆとりのないものではなく、シンプルなものにできるはず。私たちのストーリーは、この「問い(ビジョン)」からはじまっています。

ACESは事業を通じて、その「問い」に対する研究と実践を重ねることで、「アルゴリズムで人の働き方に余白をつくる」 ことを目指しています。
ACESの目指すシンプルな社会と余白のある未来｜田村浩一郎@ACES

ACESの目指す「シンプルな社会」とは何か、シンプルな社会を実現する上で解決すべき課題、それに対してACESがチャレンジすることなどが書かれています。

デザインにおいては、「シンプル」「余白」「複雑なものを複雑なまま扱う」「柔軟性」「構造化（価値がつみ上がる）」「知性」などを重要なキーワードとして抽出し、表現に活かしました。

2つ目の記事は、ACESさんのロゴ、リニューアル前のウェブサイト、名刺デザインなどを担当されたCIALさんのnoteです。

「アルゴリズムで、社会はもっとシンプルになる」というビジョンを「社会が含む複雑性を、一本の線で、解きほぐしていく」と解釈。「シンプルさ」を一本の斜線で、「複雑性」を重なり合う幾何学の造形で表している
“企業柄” のデザインは、思考過程の共有と対話から生まれる。ACESロゴリニューアルの裏側｜CIAL

ロゴデザインができるまでの過程がていねいにまとめられていて、ACESさんとの対話、ブランドパーソナリティ、デザインの意図などを知ることができました。

デザインにおいては、上記ビジョンの解釈や幾何学が使われている理由、「ハッキリした声」「端正な顔立ちをしている」などのブランドパーソナリティ、「40〜50代の方の目にもふれる」「信頼感」「プロフェッショナリズム」などのキーワードをヒントに、これまでACESさんが大切にしてきたブランドを発展できるような表現を目指しました。

お仕事が決まる前の打ち合わせで「ブランドを大切にしているんだな」という印象があったので、ロゴやブランドのイメージを強化できる、よりACESらしさが世の中に発信できるデザインを作りたいと思っていました。その上で、田村さんやCIALさんの記事はなくてはならないものでした。

ブランドの歩みを見える形で残しておくこと、ストーリーをつむぐことの大切さも学ばせていただきました。🙏

こちらは実際に使用したスタイルガイドです。

日本語はやわらかさと堅さのバランスが絶妙で美しい「たづがね角ゴシック」、欧文はロゴタイプのイメージと合わせて「Futura Pro」を使用しました。見た目のACESさんらしさはもちろん、カタカナや数字表記が多くなることも想定してフォントを選びました。

配色は無彩色を基調としています。ACESさんのロゴに合わせた部分もありますが、AI、技術、アルゴリズム、少しのインダストリアル感を出しつつ、余白や言葉のよさを最大限に引き出すため、色を抜きました。

ただ色を使わない分、血色がなく冷たい印象になってしまう恐れもあったため、言葉、余白、オブジェクトのサイズ感、文字のサイズ、ウェイト、幾何学柄やロゴのモチーフ、白黒ベースのグラデーション、機能、動き、写真などの使い方に注意してデザインしました。

メインビジュアルのデザイン

上記の内容をふまえ、メインビジュアルではACESさんのミッション、ビジョンを打ち出し、モーションと実装を組み合わせてブランドイメージを強化するビジュアルを作成しました。

動画はデザイン提案のために作成したモックアップです。After Effectsで作成しています。

「背景に広がる複雑な世界を、複雑なまま、ACESの視点で切り取ってシンプルにする」という意味を持たせたデザインを作成しました。

シェイプの動きやインタラクションはあくまでイメージですが、速度感もふくめてCD阿部さんと相談し、ご提案しました。実際のサイトでどのようにして動きを作っているのかは、このあとモーションのパートでご紹介しています。

実装イメージのモックアップ動画作成

（動画のサイズが小さくてすみません🙏）

メインビジュアルの方向性を決めつつ、トップページおよび配下のデザインを進めました。

技術セクションはインタラクションのイメージがわかるようにモックアップ動画も作成しご提案。実装の参考にもしてもらいました。こちらの動画もAfter Effectsで作成しています。

技術アイコンの作成

技術ページで使用するアイコンは、デザインのトンマナと参考資料を用意し、デザイナーの今ちゃんに作ってもらいました。参考資料の作成はACESさんにもご協力いただきました。

技術のアイコン化は抽象化や差別化がむずかしそう、しかも16個もある。何日かかかるかな…と思っていましたが、約1〜2日で修正も含めて完成させてくれました。今ちゃんありがとう🎉

ロゴ・MV・ページ遷移のモーション制作

デザインのフェーズが落ち着いてきたところで、モーション制作にとりかかります。今回は以下3つをAfter Effectsで制作しました。

オープニングで表示するモーションロゴ
メインビジュアルで使用するシェイプアニメーション
ページ遷移時のアニメーション

モーションロゴ以外はLottieアニメーションを作成し、PC・SPサイズをそれぞれ用意しました。

1. モーションロゴ

オープニングで表示するモーションロゴです。実際のウェブサイトではホームを表示するときに現れます。

モーションロゴを使用することで、ローディングアニメーションとして間をもたせながら、ACESのサイトに入ったことがわかる、敷居をまたぐ瞬間のようなちょっとしたワクワク感があります。

表示の演出や速度感など、動きにおいてもACESさんらしさを表現できるように意識しました。

2. メインビジュアルのシェイプアニメーション

続いて、メインビジュアルで使うシェイプアニメーションの作成です。

モックアップを作った時点では「そんなに時間かからないと思いますよ！」と言っちゃってましたが、実際は少し苦戦することに（なめてました😂）。

モーション制作中のAfter Effectsの画面です。
複数のシェイプを組み合わせて青い部分の動きを作っています。

「ななめラインの部分をシェイプアニメーションにしてマスクで抜けばよいのでは？」と思った方もいますよね。私もそう思ってました…。モックアップ作成時点ではそうしていたのですが、実装の検証でその方法は使えないことが判明しました。

背景透過モードでプレビューするとこんな感じです。

マスク作戦が使えないことにより、ラインの部分ではなく白い部分を動かす方向にチェンジしました。シェイプの形状が大きく変わるモーフィングの部分で少し苦戦し、さらにSP版は画角の問題でほぼ作り直すことに。思っていたより苦戦しましたが、なんとか完成しました。

実際のウェブサイトでは「ななめラインのシェイプっぽい部分」が動いているように見えますが、実はそのまわりの背景が動いています。シェイプの中に見える複雑な世界の部分はWebGLで、阿部さんに実装してもらいました。

3. ページ遷移アニメーション

ページが変わるときに表示される黒とグレーの幕は、シェイプアニメーションをLottieで書き出し、エンジニアさんたちに実装してもらいました。

黒1枚の幕ではコントラストが強すぎて「分断されている感」があり、なめらかさ、あいまいさを表現するためにグレーの幕をはさんでいます。動きのスピード感は出しつつも、イージングを使用して後半に重みをもたせ、少しリッチな印象のアニメーションを作成しました。

オフィスでの写真撮影・インタビュー

サイト内で使用する写真にも統一感を持たせ、よりいっそう世界観を引きしめるため、オフィス写真の撮影も行いました。

撮影はパートナーの bayashi くんにお願いしました。

「AIアルゴリズムを軸にしたプロフェッショナルの集まる会社」というと堅いイメージを持たれてしまいそうですが、実際にACESで働く人やオフィスの風景を切り取った写真を使用することで、人の存在が感じられる、適度に血色感のあるサイトになりました。

透明感となごやかな雰囲気が伝わる写真の撮影、サイトのトーンに合わせたレタッチ、bayashiくんありがとうございました。🐿

当日はACES代表の田村さんにお話をうかがうお時間もいただきました。

以上、ACESさんのウェブサイトができるまで、情報設計・デザイン・モーション編でした。実装編の記事化は未定ですが、もしかすると別の記事としてご紹介するかもしれません。

お客さまの声

最後に、今回のプロジェクトをご担当いただいたACESのお2人から、素敵なコメントをいただきました。実績ページにも掲載していますが、こちらでもご紹介させていただきます。

neccoさんにお声がけして最初のMTGの開始5分後に、『なんとなく優秀な人たちの会社なのだろうと思ったが、具体的に何がすごいのかが普通の人にはわからない』と課題にズバッと切り込んでいただき、neccoさんとなら弊社の悩みに伴走をしてもらえる！という確信を持ちました。ウェブサイトを開発するプロセスで「ACESが提供する価値とは何か」、「競争力の源泉とは何か」を紐解いていく丁寧なコミュニケーションをしていただいた結果、アイデンティティとデザインと言葉が一体化したACESらしいコミュニケーションツールになったと感じています。
株式会社ACES　脇水美千子

ウェブサイトに感じていた課題の解決に留まらず、これまで私たちがビジョンやロゴに込めた想い、意匠を丁寧なコミュニケーションで汲み取り、それらを大切にしながら、デザインやアニメーション、言葉などの細部までこだわってくださいました。その1つ1つのこだわりで「ACESらしさ」を感じてもらえる、これまでの何倍もパワーアップしたコーポレートサイトになったと感じています。これから多くのお客様とこのウェブサイトを通して出会えることがとても楽しみでワクワクしています。
株式会社ACES　小林香菜子

脇水さん、小林さんありがとうございました！

おわりに

ACESさんのウェブサイトができるまで、情報設計・デザイン・モーション編のご紹介でした。最後までお読みいただき、ありがとうございます。

制作実績の詳細、制作メンバーのコメント、お客さまの声などは実績ページにまとめています。ぜひあわせてご覧ください！🙌

実績詳細（necco）：ACES Corporate site｜Project

ACESさんのウェブサイト：株式会社ACES

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせからお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は採用情報をご覧ください。

アシスタントデザイナー
フロントエンドエンジニア
アシスタントフロントエンドエンジニア
エディター・ライター

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料からダウンロード可能ですので、ぜひご活用ください。

（2024年4月時点）