AQ CASE＆KNOWLEDGE

本

アクアリングの事例やナレッジを紹介するマガジンです。実際のプロジェクトで、アクアリングが強みとする「UI/UX」「共創的課題解決」がどのように発揮されているのか、PJメンバーか… もっと読む

運営しているクリエイター

#web制作

企業の人格を捉えるためのブランド・アーキタイプ：導入編

企業やブランドを12種類の「人格」になぞらえるフレームワークである「ブランド・アーキタイプ」。平たくいえば、対象を人物に例えることでより包括的にそのブランドが持つ印象や特徴をポジショニングするための手法です。最近ではウェブ記事も多く散見され、特にグローバル大企業やto C向けの事例を引き合いに語られることが多いこの手法ですが、この記事では一般的な意味について、続編となる「実践編」ではto Bのプロジェクトにおいての有用性と利用法について紹介します。ブランド・アーキタイプの

Adobe MAX Japan 2023にディレクターが登壇しました

去る11月16日、東京ビッグサイトで開催されたAdobe MAX Japan 2023に弊社ディレクターが登壇、「手のひらのセントレア」と題したセッションで、UXリサーチを取り入れたWeb構築についてその手法をご来場の多くの方々にご聴講いただきました。中部国際空港株式会社セントレアの村松氏、千葉氏にもゲストとしてご登場いただきました。当時、セントレアには国内の空港としては先駆けとなったSNS活用をはじめとしたデジタル活用戦略がありました。Webサイトのリニューアルにあ

ブラザーSDGsストーリーリニューアル WebGL舞台裏

こんにちは、AQUARING かにです。今回は今年２月にサイトリニューアルを担当した Brother様の「ブラザーSDGsストーリー」サイトの WebGL の舞台裏をご紹介します。リニューアルの経緯リニューアル前のサイトでも同じキャラクターを用いた表現をしていましたが、旧サイトではアニメーション付きの glTF モデルを WebGL でリアルタイムで再生する形で実装していました。幅広いデバイスでのキャラクターのクオリティ担保やローディング軽量化などを考慮した結果、

JavaScript(ES2015~)でウィンドウサイズをシングルトンライクに管理する

こんにちは、AQUARING かにです。ウィンドウのリサイズ時やCanvas表現の実装などでよく使う window.innerWidth, window.innerHeight ですが、みなさんウィンドウサイズのユーティリティクラスは作っていますか？せっかくクラスで綺麗にカプセル化していても、ウィンドウサイズが必要になるたびに毎回 window の変数を取りに行くのはクラス外に依存する記述が増えてあまり良くないですよね。そこで今回は、プロジェクト全体で共有するウィ

ORIGAMI LETTER フロントエンドBreakdown

こんにちは、AQUARING かにです。昨年制作したブラザー工業さまの「ORIGAMI LETTER」が今年4月にiFデザインアワード2021 コミュニケーションデザイン部門でゴールドを受賞しました！🎉 このWebサイトでは、Webサイト上で折り紙を折るDigital Origami Letterと、プリントした折り紙を折るPrinted Origami Letterの、2つ方法でメッセージを送ることができます。今回はCanvas2DやWebGLなどのフロントエン

ユーザーインタビューから組み立てる要件定義プロセス

こんにちは、AQUARINGという会社でディレクターをしている渡辺です。僕は主にサイト制作におけるUXリサーチやそれを基にした情報設計なんかをやっています。いきなりですが、サイトの新規構築やリニューアルをすることになった際、どのようにRFP（提案依頼書）を作成していくか、頭を悩ませる企業担当者様も多いのではないでしょうか？今回は、同様の悩みを持つ企業様からのご依頼で、RFP作成までの要件定義フェーズを担当した際の取り組みを紹介したいと思います。アクアリングが要件定

AQUARINGサイトリニューアルフロントエンドBreakdown

こんにちは、AQUARING かにです。今回は昨年12月にリニューアルしたAQUARINGサイトのフロントエンドについて解説していきます。 WebGL表現まずGLSLとp5.jsで２種類のスケッチを作成しました。メタボール円のスケッチ（GLSL）距離関数を用いてふたつの円を重ねて、44行目のstep関数を通すことで画像を二値化してマスクを作成し、最後に水色で塗っています。この行をコメントアウトすると二値化前の状態が確認できます。 mask = step(0.5