マガジンのカバー画像

AQ CASE&KNOWLEDGE

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

記事一覧

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

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

スキ
29

p5.jsでshadowBlurにグラデーションを適用する

こんにちは、AQUARING かに です。 p5.js で drawingContext.shadowBlur を使うと簡単にシャドウを描画することができますが、drawingContext.shadowColorには単色しか設定できませんよね。 今回は shadowBlur にグラデーションを適用する方法を紹介します。 最終的なコードはページ下部の 追記220401:p5.Image.mask()でアルファマスクする にあります。 黒背景に白でシャドウを描画let d

スキ
7

GLSL Tips #02 輪郭のジャギーをなめらかにする

こんにちは、AQUARING かに です。 今回はGLSLでテクスチャをマスクする際によくある輪郭のジャギーをなめらかにする方法について書いていきます。 GLSL側で円形のマスクを作成するコードを例に説明していきます。 マスクがジャギる例まず普通に円形のマスク関数を書くと以下のようになります。 precision mediump float;varying vec2 vTexCoord;/** * 円形マスク * @param {vec2} uv UV座標 * @pa

スキ
8

GLSL Tips #01 レイヤーの結合

こんにちは、AQUARING かに です。 WebGLやopenFrameworksなどでGLSLを書くたびに毎回「どうやるんだっけ?」となることが多々あるので、こまめに記事にして備忘録として残していこうと思います。 今回はレイヤーの結合についてです。 距離関数で描いた複数の円を重ねるコードを例に説明していきますが、テクスチャを使ったマスクでも同様の処理でレイヤーを結合できます。 背景レイヤーと結合precision highp float;varying vec2 v

スキ
3

妄想からはじまるイノベーション。SFプロトタイピングとは?| METHODLOGUE #03

いわゆる、イノベーションのジレンマ。「現実」に侵され、突き抜けたアイデアが出てこない──。そんな時は思いきってファンタジーの世界へ飛び出してみませんか? アクアリング主催イベント「METHODLOGUE(メソドローグ)」の第三回ではSF作家の樋口恭介さんをお招きしました。 今回お話いただくテーマは「SFプロトタイピング」。SF作家の想像力で未来のストーリーを紡ぐことで、事業のプロトタイピングを行うというもの。では、さっそくSF作家の頭の中を覗き見てみましょう。 プロフィ

スキ
13

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

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

スキ
7

チームの「対話」を促す、オンラインワークのアイデア

こんにちは、アクアリングの樽見です! 制作ディレクションや広報を担当しています。 2020年12月、アクアリングはCI・VI刷新をリリースしました! 新たに定義されたCIにおいて、大切にする価値観(Value)のひとつに「チームの力を信じる」という言葉があります。 難易度の高いミッションでも、このチームなら実現できる。一人では得られなかった視点・気付き・アイデアを、このチームなら得られる。 そんな信頼関係・相乗効果のあるチームに成長していくために、インナー広報がフォーカ

スキ
9

【太刀川英輔】生物の進化のように発想する。進化思考とは | METHODLOGUE #01

地球に生命が誕生してから約36億年。生物は環境の変化に適応するため、「進化」によって今日まで生き残ってきました。そして、人類が「進化」の過程で手に入れた最強の武器こそが「創造性」です。 VUCAと呼ばれる現代。私たちは再び生き残りをかけて「創造性」を発揮し、新しい時代に適応しなければなりません。 アクアリング主催イベント「METHODLOGUE(メソドローグ)」の第二回ではNOSIGNER代表 太刀川英輔氏をお招きしました。 企業、そしてビジネスパーソンがVUCA時代に

スキ
10

辿りついたのは"Oneness for good design." - CIリニューアルの記録。

2020年、AQUARINGは中京テレビグループに参画し、その前年、代表が交代するという組織としての岐路を迎えていました。2019年の代表交代とともに、会社の核となる経営方針の考え方や、CIを再定義するプロジェクトが始動します。 私たちが歩んだプロセスを時間と思考を遡って公開することで、組織をデザインする様々な方への参考になればと思い、完成までの道のりを振り返りたいと思います。 前に進むためには、カルチャーの再定義が必要だった。 2015年当時、それまでクラフトマンシッ

スキ
55

ORIGAMI LETTER フロントエンドBreakdown

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

スキ
17

自走するコラボラティブ・プロジェクトの作りかたとは? | METHODLOGUE #00

アクアリング主催オンラインイベント「METHODLOGUE(メソドローグ)」さまざまな業界・業種で活躍されるクリエイターとの対話から、これまで不確実だった“イノベーション創出”をメソッド(方法・手法)化しようという実験的な試みです。 初開催となる今回のテーマは「自走するコラボラティブ・プロジェクトの作りかた」。 コロナ禍で特に重要性が高まる「チーム」「組織」のデザインに焦点を当てて、武蔵野美術大学クリエイティブイノベーション学科教授 岩嵜博論氏とINFOBAHN DESI

スキ
11

リモートユーザーテストで気を付けること

AQUARINGでディレクターをしている渡辺です。僕は主にサイト制作におけるUXリサーチやそれを基にした情報設計なんかをやっています。 今回はAppのモックアップ画面を用いて、海外の被験者にリモートでユーザビリティテストを実施した事例を、一連の流れを説明しつつ、テスト時の注意点も合わせて紹介したいと思います。 あるべきUI/UXはユーザビリティテストからきっかけはグローバルに事業展開されているクライアント様から、PoCのためのアプリUIを開発してほしいという依頼でした。

スキ
9

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

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

スキ
20

スポーツの力で社会貢献を促進。日本財団HERO’sIDEAプロジェクト アイデア創出支援を行いました。

こんにちは、AQUARINGのかねこです。 アクアリングは、お客様とワンチームとなって「いいモノづくり」を目指す名古屋のデザイン会社です。 今回ご紹介するのは、日本財団様が行うアスリートの社会支貢献活動促進プロジェクト「HERO’s Sportsmanship for the future」。 愛知県を基盤に活動するプロバスケットボールチーム「シーホース三河」様と一緒に、スポーツの力を使った「新しい社会貢献の可能性」を探りました。 日本財団「HERO’s IDEA 」

スキ
122