ACES Corporate Site

Web Design

ACESのビジョンと確かな技術力、誠実さが伝わるデザイン

「アルゴリズムで、社会はもっとシンプルになる」ACESさんのミッションであり、ストーリーのはじまりでもある言葉を軸に、構造的でシンプルなデザインを目指しました。サイト全体で使用する色や装飾は最小限にし、構造がわかりやすいレイアウトを意識して組むことで、確かな技術力と実績、伝えたい言葉などのコンテンツが際立つようにしています。ただ情報を詰めこむだけのサイトではなく、コミュニケーションを取るようにしてACESさんの事業や「いま」がわかり、誠実さが伝わる。そんなサイトにしたいと考えながらデザインしました。

また、今回のコーポレートサイトリニューアルの目的のひとつとして「ACESの事業やビジョンに共感してくれる人・企業と繋がりたい」というお話があったため、ロゴやモーションと合わせてミッション・ビジョンをメインビジュアルで見せることで、会社のイメージと言葉をひもづけて印象に残せるようにしました。背景に広がる複雑な世界が、ACESのロゴを通して複雑なまま柔軟に切り取られるモーションは、ACESさんの強みであるアルゴリズム、Deep Learningをイメージしています。

Contents Design

「ACESとは」を構造化・言語化し、サイトを通して表現

リニューアルの目的のひとつとして、ACESさまより「ミッションや事業内容、採用情報といった“ACESのいま”をしっかり伝えたい」という要望がありました。

ACESは何をしている会社なのか、アルゴリズムとは何か、シンプルな社会とは何か。これらをウェブサイトを通して伝えられるよう、何度もヒアリングを行い、推敲を重ねながら構造設計や言語化を行いました。

Motion Design

モーフィングと緩急を利用した、大胆で余裕のあるモーション

メインビジュアルの背景モーションとページ遷移時のアニメーションには、Lottieアニメーションを使用しています。メインビジュアルでは背景の複雑な世界を切り取るようなにパスが動くモーフィングを作成しました。静かに、でも大胆に、そして有機的な動きをイメージしています。オープニングで表示されるモーションロゴも作成し、社名とロゴを印象付けつつ、ページ遷移のアニメーションやメインビジュアルへとなめらかにつなげています。

Icon Design

幅広いAI技術をシンプルに端的に伝えるアイコン

ACESさんが提供するAI技術を解説するアイコンを作成しました。
細分化された各AI技術の要点をとらえ、端的にわかりやすく、他技術との違いを見せながら補足できるかに注力しました。要素を極力減らした線のみのシンプルなアイコンで、ACESさんの目指す「なめらかでシンプルな世界」を表しています。

WebGL / Interaction Design

なめらかシンプルな世界と複雑な世界をWebGLとAnimation、Interactionで表現

メインイメージにはアルゴリズムから生まれるACESのVisionとMissionをテキストアニメーションを利用して表現。テキストの背景には「なめらかでシンプルな世界」を表すモーフィングをLottie Reactで実装し、Aマークの中の「複雑な世界」はThree.jsを利用したWebGLで作成しました。ランダムに形づくられる、ガラスのようなボックスをアニメーションさせ、カーソル位置やタッチでインタラクティブなグラフィックにしています。

Frontend Development

Next.jsとWordPressを使用したJamstack構成

フロントエンドのフレームワークにはNext.jsを採用しました。WordPressのコンテンツをGraphQLで取得し、SSGモードで動作するJamstack構成となっています。

ホスティングにはAWS Amplifyを使用しCMS更新時の再ジェネレート、デプロイフローを自動化しています。

Headless CMS Development

WordPressをHeadless CMSとして採用

更新頻度が高いニュースや実績、メンバー、ダウンロードなどのページをCMSで更新できるようにしました。カスタムブロックやパターンを活用することで、柔軟な構成とデザイン性を両立させました。プレビューやデプロイも実装し、利便性を高めています。

Creative Direction

複雑で高度な技術力はそのままに情報の密度を上げ、伝わりやすい言葉とデザインへ

お問い合わせいただき、キックオフMTGを始めるときからすでに明確な課題を言語化、資料化されていて、成果を出すことに対して強く意識をしたプロジェクトになりました。

課題でいただいていたのは、大きく３つ

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

ウェブサイトの機能として非常に重要で得意な課題がありました。

もちろんそれ以外にもお問い合わせや採用応募数などはすでに課題感をもっておられました。課題が明確だったことでさらに先を考えることができました。

上記３つの課題はクリアするのは当然として、neccoの役割としては下記の様なことを強く意識してプロジェクトを進めていきました。

• 複雑で高度な技術を分かりやすい言葉に、かつ情報の密度はあげる（平易にしすぎない・抽象化しすぎない）
• 新しさと安心感をあわせもち、勢いだけのような表現にはしない。技術力や誠実さ信頼感を強化する
• ACESさん社内のメンバーにも納得感のある言葉に調整、バランスをとり、決定する。（デザイン表現主導になりすぎない。言葉を大切にする）

などを意識してプロジェクトの過程でも提案と納得感のバランスを大事にしていきました。その中からACESさんらしさと世界観を強化できるようにデザイン、言葉づくり、エンジニアリングを行い制作しました。

Client Voice

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

株式会社ACES
脇水 美千子

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

株式会社ACES
小林 香菜子