クリエイティブ の記事一覧

どうも、こんにちは。GMOインターネットグループ株式会社でデザイナーをしている板垣と申します。私はタイトルの通り、デザイナーであってエンジニアではありません（HTML/CSS/Javascriptは読み書きできるが、エンジニアレベルではない）。そんな私と同じように、非エンジニアでありながらXDのプラグイン開発をしてみたい、という方に、「こうやったらできたよ」というひとつの例をお見せできたらと思ってこのブログを書きました。エンジニアの方は、自力でゴリゴリ開発していただければと思います。 なぜデザイナーがプラグイン開発をするのか ぶっちゃけ、なんでも話を聞いてくれて迅速に開発してくれるエンジニアが隣の席に座っているなら、自分で開発する必要なんてないと思います。 でも、そんな都合のいい環境はそうそうありませんよね？そもそも、「ちょっとこんな機能が軽くほしいだけなんだよなー」と思っても、エンジニアに開発を依頼するとなったら、仕様書を用意したり工数とスケジュールを算出したり、準備がとても大変です。また、エンジニアの方に依頼すると、きっちり動くものを作ってくれる反面、開発のリソースもコストも消費します。でも……自分だけが使うプラグインであれば、バグがあろうが、うまく動かなかろうが、使う自分が条件を理解さえしていればいいのです。「こういう条件の時だけうまく動く」というものなら、それを頭に入れて使えばいいだけ。自分が使うだけなのであれば、自分で作るのが結局いちばん省エネだと思うのです。 XDのプラグインを作るということ Adobe XDは、アップデートが止まって久しいアプリケーションです。現在のWebデザインの現場でのトレンドは、FigmaやCanvaだと思います。 しかし、例えばチームでずっとXDを使用してきた場合などでは、過去のデータの活用という意味でもアプリを乗り換えることができず、今後アップデートされないのは承知の上でXDを使い続けている、という会社も多いのではないでしょうか（かくいう私の所属するチームも同様です）。 XDを使ってるからってこんなに迫害されるわけではない いや……いいアプリですけどね、XD。 XDを業務で使用していて「こんなことができればいいのに」「こんな機能があればいいのに」と思うことは多々ありますが、上述したようにすでにアップデートが止まっているため、公式から機能の追加がされる見込みはほぼありません。……と、なると、諦めて我慢するか、ストアからちょうどいいプラグインを見つけてくるか、「自力でプラグインを開発するか」しかない、ということになります。 とはいえ、「XDのプラグインの開発って、どうやればいいの？」と、非エンジニアであれば誰しもが疑問に思うところ。ストアに並んでいる、誰かが作ったプラグインも、「これをどうやって作ったのか知っているか」と言われると、見当がつかないのではないでしょうか？イメージするのは、バリバリのエンジニアが、すごい開発環境で、謎の言語を書きながらプログラムを組んでいる姿だったりするのではないか、と思います。 自分には到底できない、と、やる前から挫折するようなイメージ。 そんなイメージをぶっ壊すツールが、ふたつあります。・UXP Developer Tools・ChatGPT（みたいなLLM）です。 UXP Developer Toolsとは？ 「Adobe Creative Cloud」を利用しているのが前提となりますが、Creative Cloudの画面を開いた際に、並んでいるアプリの中に「UXP Developer Tools」はあります。 不思議なことに、いつも使っているPhotoshopやIllustratorと同じ並びにあるのに、なぜか目に入ってきません（周りのデザイナーに聞いてもみんな気付いていませんでした）。自分には関係のないアプリだ、と無意識に決めつけちゃってるのだと思います。しかし何を隠そう、このツールで、デザイナーでもプラグインは作れるのです。Adobeがわざわざ「プラグイン開発用のアプリケーション」を用意してくれているのですから、これを使わない手はありません。 このアプリを起動して、ウィンドウ右上にある「Create Plugin」というボタンをクリックすると新しくプラグインを作れるようになります。が、最初の画面でいきなり何をしていいのか分からないと思いますので軽く説明しておきます。 6）のプルダウンメニューで、プラグインテンプレートを選びます。私も違いがよくわからなかったのでChatGPTに質問したところ、いろいろ説明してくれたのですが、まぁ最初は「Quick Starter」一択でいいと思います。複雑なものを作りたくなった時には、残りの二つを使う局面もあるかも。それぞれの意味が知りたかったら、ChatGPTに質問してみてください。 設定後、右下の「Select Folder」をクリックすると「どこのフォルダに作る？」と聞かれるので、自分で好きなフォルダを作って保存してください。これで準備完了です。 私が作ろうとしているもの ちなみに今回、私が作りたかったプラグインは、「書き出し対象のチェックが入ったオブジェクトを探し出し、すべてのチェックを外す」というものです。こういうやつ↓です。 XDの書き出しはPNG、JPG、SVGなどを混在してまとめて一気に書き出すことができないので、 ・まずPNGで書き出すオブジェクトの「書き出し対象にする」のチェックをすべて入れて書き出し　↓・いまチェックしたものをすべて外す　↓・次にJPEGで書き出すオブジェクトの「書き出し対象にする」のチェックをすべて入れて書き出し　↓・いまチェックしたものをすべて外す　↓・次にSVGで（以下略） ……という感じで、いちいち「チェックしたものをすべて外す」という作業が挟まるのが地味に面倒。それに、他のスタッフが作ったXDファイルを流用してデザインする際に、前の人が書き出し対象チェックを入れたままにしていると、書き出すたびに想定外の（そしてどこのレイヤーグループに潜んでいるのかわからない）画像が一緒に書き出されたりするのもフラストレーションが溜まります。これをプラグイン一発で解決できたら、とても便利です。 AIばんざい さきほどUPX Developer Toolsで作ったフォルダの中身を見ると、いろんなファイルが生成されていて、その中にJavascriptファイルとJSONファイルが入っています。 「main.js」と「manifest.json」 これをテキストエディタで開くと……。こんな感じ。 このソースを書き換えて、プラグインを作ります。 「おい、非エンジニアでも作れるんじゃないのかよ」そういう怨嗟の声が聞こえてきそうですが、ここで登場するのが、世にいうLLM。ChatGPT、Claude3、Geminiといった会話型のAIです。 私も最初に、こんなふうにChatGPTに投げかけました。 そうすると、こんな返答が返ってきます。 こうやって返ってきたソースコードを丸々コピーして、さきほどのJavascriptファイルの中身を上書きします。あと、さきほど生成されたファイルの中に「manifest.json」というファイルがあったと思いますが、こちらもChatGPTに、「今の内容に合うやつ考えて」とお願いして生成させて、同じく上書きします。 次に、なんでもいいのでXDファイルを開きます。※この「XDファイルを開く」というのが重要で、ここでXDファイルを開いておかないとエラーが出て進まないので要注意！この状態で、さきほどのUXP Developer Tools上で、いまつくったプラグインの右の方にある「Load」というのをクリックすると、いま制作したプラグインがXDファイルに読み込まれます。これで、普通のプラグインと同じように、クリックして走らせてみましょう。 で……試してみたら分かるんですが……この段階でプラグインが完成しているのは、「稀」です。 まず間違いなく、想定していた挙動になりません。エラーが出たらまだいい方で、多くの場合、何も起きません。 UPX Developer Toolsに戻って「Debug」というテキストをクリックすると、コンソールが開きます。ここにエラーが表示されていることもありますが、基本、何も表示されていないことが多いです。 私の場合は、ある程度JavaScriptの読み書きができたので、ここからいろいろログをコンソールに出力させたりバグつぶしの王道を辿ったりして原因に迫っていきましたが、そもそも、間違ったソースを書いたのはChatGPT。なので、ChatGPTに責任を取らせましょう。 ChatGPTに描かせた「自分の書いたソースコードの責任を取らされるChatGPT」の図。こいつ、自分のことをこんなかわいいキャラだと思っているのか……。 「なんかおかしいから修正して」というと、改善案を提示してくれます。そのソースを使っても直らないのであれば、「コンソールログを使って原因を究明しましょう」というと、さきほど「Debug」をクリックして開いたコンソールを活用しながら、ステップを踏んでバグを修正しようとしてくれます。ChatGPTでらちが明かないな、となったら、Claude3やGeminiにバトンタッチして聞いてみましょう。そちらである程度先に進んで、また止まったらChatGPTに戻りましょう。 私は、そうして100ターン以上の応酬を経て、なんとか動くところまでたどり着くことができました。 まったくソースが分からないと手詰まりになることもある 非エンジニアでもプラグインが作れる、と言いましたが、実際にはそれだけではにっちもさっちもいかなくなることがあります。 手詰まりでにっちもさっちもいかない、の図 AIの回答も、ループに陥って堂々巡りになったり、挙句の果てに「XDをバージョンアップしてください」などと言ってくる状態になったりします（もうバージョンアップが止まっているから自分でプラグインを作っているんだよ……！）。 そうなったときに、自分でソースを読んで、「ここがおかしいんじゃないか？」「こういうアプローチはどうか」と提案すると、そこがブレイクスルーとなって改善することがあります。 「素晴らしいデバッグ能力ですね」などとChatGPTに褒められたりして、「いや、おまえにその役割をお願いしてるんだよっ」と思ったりはするものの、結局、AIはあくまでサポート役として最適なのであって、すべてを委ねるにはまだ足りない部分もいっぱいある、ということなのでしょう。 「AIってそういうもの」と割り切って、できるだけAIの能力を引き出すためにどうやって問いかければいいか、最適なプロンプトを考えながら対話を繰り返し、ときには自分の脳みそも活用しながら二人三脚で進んでいくと、ゴールへの道筋が見えてくるのだと思います。「なんとかしろ」とだけ伝えても、なんともならないことって、世の中にはいっぱいあるんですよね。 まとめ 「結局、コードが全くかけない非エンジニアにはプラグインは作れない、って結論なのか？」と、思うかもしれませんが、そうではありません。要は、AIの使いようです。AIに「100」任せることはできなくても、「90」までAIが作ってくれるなら、残りの「10」は自力でググったりして、ゴールを手繰り寄せることができるかもしれません。これが、AIがなかったら、どうですか？自分で「100」作りますか？XDのプラグインを自分で作ってみたい、と思ったときに、ゴールテープを切れるかどうか、という以前に、スタートラインがどこにあるのかも分からないんじゃないでしょうか？ 最初の一歩のハードルが低いことは、すごく大事 AIが目覚ましい進化を遂げる昨今、スキル的に自分には手の出せなかったさまざまなことが、AIの力を借りてできるようになってきました。この時代を生きていくためには「AIをどう使うか」がカギとなる気がします。世間では「AIに仕事を奪われる」という論調もいろいろ見かけますが、だからといってAIを忌避し目を背けたところで、なにも解決しません。避けるのではなく、「うまく使うことで自分のできることを増やしていく」ということを積極的に考えるべき時代になった、と思うべきなのでしょうね。

こんにちは。GMOインターネットグループ株式会社のデザイナー 勝俣です。デザイナーといえば、制作会社に所属し外部企業から依頼された制作物を担当するデザイナーを想像される方が多いのではないでしょうか。一方、私を含め企業に属し自社ブランドの制作物を担当するインハウスデザイナーも知る限りでは半数近くいらっしゃいます。インハウス歴15年の経験をもとにインハウスデザイナーの解像度を少し上げてみたいと思います。 自己紹介 私は昨年11月にGMOインターネットグループに入社したばかりの新人です。まぁ46歳なんですけどね（笑）専門はグラフィックです。業務的には「お名前.com byGMO」と「ConoHa byGMO」など事業に関連した制作のサポートをしつつ、技術広報チームのサポートや、GMO SONICなどのアドベンチャータスクと呼ばれる案件を兼任しています。 GMOインターネットグループの中には隠れたデザイン系猛者がたくさんいます。大変刺激的でありつつもそこはクリエイター同士話せばあっという間にワイワイできる素敵な方ばかりです。また昨今流行りの生成AI方面に関しても目下全社的にアンテナ感度高めで、様々な業務やプロジェクトで活用されておりとどまる所を知らない感じです。 左がCopilot Designer（DALL·E 3）が描いた「男性 40代 日本人 グラフィックデザイナー 坊主頭」。右が私です。　いかがでしょうか。 改めてインハウスデザイナーとは？ 最近「あの会社、社内にインハウスチームを作ったんだって」「フリーだったあの人が⚪︎⚪︎社に入社してインハウスしてるんだって」なんて話を界隈で耳にする機会が多いです。変化の多い時代において経営的にもメリットが大きいと言われるインハウスデザイナーについて、改めて言語化すべくChatGPTにまとめてもらいました。 "インハウスデザイナーとは、特定の企業や組織に常勤しているデザイナーのことを指します。彼らは、その企業の社内でデザイン業務を行い、外部のデザインエージェンシーやフリーランスのデザイナーとは異なります。以下にインハウスデザイナーの主な特徴を挙げます。 企業内でのデザイン業務：インハウスデザイナーは、所属する企業のために一貫してデザイン業務を行います。これには、ブランディング、マーケティング資料の作成、ウェブサイトやアプリのデザイン、製品デザインなどが含まれます。 企業の一員としての役割：彼らは、企業の他の部門（マーケティング、開発、営業など）と密に連携して働きます。これにより、企業の目標やビジョンに沿ったデザインを提供します。 継続的なデザイン品質の維持：インハウスデザイナーは、企業のブランドイメージやデザインガイドラインを一貫して維持・発展させる責任があります。長期的な視点で企業のデザイン戦略をサポートします。 迅速な対応：企業内にいることで、急なデザイン依頼や変更に迅速に対応できる点がメリットです。また、内部のプロジェクトに関する知識や背景情報が豊富であるため、効果的なデザイン提案が可能です。 コスト効率：外部のデザインエージェンシーやフリーランスに依頼するよりも、コストを抑えることができる場合があります。特に継続的なデザイン業務が多い企業にとっては、インハウスデザイナーを雇用する方が経済的です。 インハウスデザイナーは、企業のビジュアルコミュニケーションやブランド戦略の中心的な役割を果たし、企業の成長や成功に貢献しています。” とのことです。自分で書いたらここまでの文章にするにはどれほどの時間がかかったでしょう。ありがとう、ChatGPT。さらに文章量を稼いでくれて最高だよ、ChatGPT。ズッ友だよ。 「企業や組織に常勤し、所属する企業や組織のために一貫してデザイン業務を行い、他の部門と密に連携し、内部の知識や背景情報が豊富であるため、より効果的なデザインを提案できるデザイナー」と、要約してくれたものをさらに要約してみました。 なぜインハウスデザイナーの道を選んだのか 制作会社でデザイナーをしていた頃、普段代理店の向こう側にいる発注企業の代表者にロゴデザインを直接プレゼンテーションする機会がありました。それまで案件をマネジメントしてくれる方々に支えられ、デザインに集中できていた私。突如として矢面に立つこととなり大いに怯みました。 必要以上に準備をした記憶があります。考えれば考えるほど客観的に自分のデザイン案を見ることになり、浮かんだ疑問をデザイン的に解消することを繰り返しました。案を説明する言葉もそれっぽいものではなく、趣旨が正しく伝わるかどうか二重三重に精査していきました。場合によってはデザイン自体に手を加えることも。そんなこんなで結果としていつも以上にクオリティを高めることができたと思います。 そして当日を迎えます。広くてモダンなフロアを闊歩する完成された人たちに気圧されて猛烈に家に帰りたくなったこと、閻魔様を想起させる代表の目力が凄くて顔をガチっとつかまれるような感覚になったことは今でも鮮やかに思い出せます。とはいえ、提案したロゴデザインは概ね好評でした。 それまでは単発案件が多く納品したら終わり。社内ではディレクターを介し、間に立つ代理店の担当者を介した先はすでに霞んでいました。接点も「細い線」でしかなかった印象でした。しかしロゴデザインを通して知ったその会社は、事業やサービス、そして中の人にまで詳しくなっていたこともあり、接点は「確かな線」になりました。勘所をおさえられたようでご贔屓にしていただき、最終的には線が束になり「面」になったように感じました。 事業やサービスの決裁者の近くでその視座に呼応していくダイナミズム、組織や事業を理解することで生まれる密度のあるクリエイティブ、これによりデザインで組織に貢献する喜びに気付けたのでした。 緊張のプレゼンシーン。当時のオレよ、ポッケに手を突っ込んで偉そうだなぁ オイ 義父さん、インハウスデザイナーになったよ その後、縁あって弊社の近所にある上場企業でインハウスデザイナーとして働き始めました。当時は今の奥さんとお付き合いしていた時期で、結婚を一向に認めてくれない義父から「ちゃんとした会社に勤めろ」とかなりザックリとした条件（笑）を突きつけられたことが転機でした。 インハウスデザイナーは一般的にデザイン部や制作部に所属し、営業や総務と横並びのことが多いのですが、そこでは代表自身が新規事業やサービスを発案をすることが多いため社長室内にクリエイティブセクションがありました。猛烈なオーラを放ち続ける発電所みたいな代表が半径10m以内にいる異空間でした。 中に誰かいるよ！！ 人生初のインハウスデザイナーとして働き出し、会社の動きに応じた様々な経験します。「新事業の立ち上げじゃ！」となればコンセプト立案しロゴやビジュアルに展開。「プロモーションに力を入れるべし！」となればひたすらチラシやLPや広告バナー作り。「採用こそ重要だ！」となれば新卒・中途採用特化モードに。果てはIRや広報にも片足をつっこんでおりました。開催するイベントの運営や企画なども経験し、「これデザイナーの領域なのか？」と疑問に思ったことは数知れず。おかげで「特技はイベント会場の設計やオペレーションの構築、お客様のアテンドです」とプロフィールに書けるくらいになりました。 その他、ネット回線、着物着付け、経営者サロン、アーティストマネジメント、メディア、遺伝子解析、設備リース、電力、エステ、飲食、TV番組等かなり雑多で幅広い分野のクリエイティブを経験できました。それらが糧となって肥沃な土壌を作っていると信じています。多分。いや、きっと。 インハウスデザイナーの責任と自由 事業やサービスには様々な分野のプロが関わっています。事業戦略を立案される方、商品・サービスを開発される方、市場や顧客を開拓する方、ブランドの認知度向上を考える方、正確な財務状況の把握する方、従業員が働きやすい環境を整える方などです。役割は違えど互いに連携しながら目標達成に向けて動いているわけです。 そして我々インハウスデザイナーは、その中で世の中やお客様とのコミュニケーションを確立するポジションにいます。商品やサービスを多角的に理解し正しく伝える機能面と、魅力や親しみを感じる情緒面を補完していきます。グラフィックでもWebでも動画でも。 関わった人々の期待を背負う責任と、世の中にリリースしても遜色ないむしろ光るクリエイティブを作り出していく自由があります。予算とスケジュールがありつつ、なかなか計画通りに行かないこともあります。フロー的には最後に位置する制作が帳尻を合わせることも少なくありません。絶望的でヒリヒリイライラする状況もあります。そんな時は深呼吸をしてPinterestとAdobe stockを見ましょう。わからなかったら恥を忍んで担当者にもう一度聞くか、競合他社のサンプルを集めましょう。切り替えが必要ならオフィスから出て散歩するか、家に帰って寝て明日やりましょう。できる中で最善を尽くしましょう。 最後に 紆余曲折ありつつ縁あって15年近くインハウスデザイナーをしています。クリエイティブをジョブに組織と並走することが性に合っているんだと思います。「私の働き方と違う！」とガチのインハウスデザイナーから怒られかねない内容であることも理解しています。そこはひとつ大目に見ていただいて「こういうデザイナーもいるんだ」とプロファイルの1ページに加えていただけたら、記事を書くために費やした労力も報われそうです。

「VIDEOGRAPHERS TOKYO（VGT）」は、Vookが主催する、日本最大級の映像クリエイター向けカンファレンスイベントです。GMOインターネットグループ株式会社は、座談会形式のインハウスクリエイター対談セッションにて、本体事業統括 ドメイン・ホスティング事業本部 クリエイティブ部 映像チーム 映像クリエイター・加藤 優真が登壇します。 VIDEOGRAPHERS TOKYO（ビデオグラファーズトーキョー）とは 「VIDEOGRAPHERS TOKYO（VGT）」は、日本最大級の映像クリエイターのためのカンファレンスイベントです。 映像制作スキルを高めたい。 自分のキャリアを考えたい。 そんなニーズに応えるべく、多彩なクリエイターたちによるセッションや先進的な映像制作ソリューションの展示など映像制作の意欲を刺激し、多くのインスピレーションを得られる“交流の場”として、2019年から現在のスタイルで開催するようになり、今回で4回目を迎えます。 イベント概要 開催日時：2024年7月9日（火）10日（水）10:00 – 19:00開催会場：虎ノ門ヒルズ ステーションタワー TOKYO NODE（45F・46F）参加費用：3,000円 / 1 day（両日参加する場合は6,000円）　　　　　アンケートに回答すると入場券無料（詳細はこちら）対象：映像関係者、映像作家、ビデオグラファー志望の方、動画・動画制作に興味のある方公式HP：VIDEOGRAPHERS TOKYO 2024 | Vook(ヴック) GMOインターネットグループの登壇情報 DAY2｜7月10日(水)10:20～＠BLUE STAGE＜１＞インハウスクリエイター対談セッション「クリエイターの新しいキャリア　ビジネスの舞台で映像の力を解き放て」 日時：2024年7月10日（水）10:20 - 11:10会場：虎ノ門ヒルズ ステーションタワー TOKYO NODE / ギャラリースペース　　　BLUE STAGE＜１＞ 「映像クリエイター、事業会社に就職！」 　企業の中で、映像制作の強みを活かしてクリエイターが活躍する。 　そんな時代が、もうすでに始まっています。 　 "インハウスクリエイター"、その実態を一緒にのぞいてみませんか？ 　 実際の働き方は？ 仕事の魅力は？ キャリアとして有り・無し？ 　事業やブランドのために映像をつくる、その苦労も楽しさも噛みしめて活躍する3人のインハウスクリエイターが意見を交わします！ 　 ◆登壇者 GMOインターネットグループ株式会社 本体事業統括 ドメイン・ホスティング事業本部 クリエイティブ部 映像チーム 映像クリエイター加藤 優真（@kayuuuma） 新卒3年目のインハウス映像クリエイター。学生時代は映像制作について学びながら、フリーランスとして様々なジャンルの映像制作や配信に関わる。その他に映像ツールの講師や記事執筆などの活動なども行う。2022年4月に入社後は、「お名前.com byGMO」や「ConoHa byGMO」、「GMOとくとくBB」などの商材系を中心として、グループのイベント関連の映像まで幅広く制作を担当している。最近の趣味は近所のねこ観察と、ときどき山登り。 GMOインターネットグループ株式会社では、私を含めた4名の映像チームが、自社サービスに関連するコンテンツを中心に、多様なジャンルの映像の企画、制作、そして分析などを担当しています。今回は、なぜインハウスの道を選んだのか、仕事の内容、そしてインハウスならではの醍醐味や魅力、どのように事業に貢献しているかについてお伝えします！ 映像クリエイター・加藤の主な作品 サポート動画「【公式】お申込みの流れ｜お名前.comデスクトップクラウド」（制作）https://youtu.be/zZz7CkF3jQ0広告動画「【コンセントにさすだけ】とくとくBBホームWi-Fi」（制作）https://youtu.be/YZsTIX_JfqIイベント「GMO Developers Day 2023」（配信映像統括）https://youtu.be/dUQJYiJKsro さいごに 「VIDEOGRAPHERS TOKYO（VGT）」は、映像クリエイターが集結する日本最大級のカンファレンスイベントです。 インハウス映像クリエイターというイメージがついていない方も、そのリアルをのぞける機会となっています！インハウス映像クリエイターの魅力がお伝えできることを願っています。 イベント詳細や、お申込みは以下よりご覧ください。皆さまのご参加、心よりお待ちしております！ お申込みはこちら

こんにちは。GMOインターネットグループ株式会社のクリエイティブ部です！2023年12月15日（金）、株式会社ビビビット主催のデザナレ展忘年会というデザイナー向けイベントに、デザインチームのみんなで参加してきました！当日はスペース出展とシンポジウムでの登壇をし、GMOインターネットグループのクリエイティブに対する考えや日々のデザインナレッジを来場者のみなさまに共有してきました。当日までの準備の様子や当日の会場の様子など、詳しくご紹介したいと思います。 デザナレ展忘年会とは？ デザナレ展忘年会は、2023年12月15日（金）に、株式会社ビビビットのオープンスペースにて行われたデザイナー向け外部イベントです。シンポジウム（登壇）とスペース（出展）の同時オフライン開催で、「心を動かすビジュアル、そうでもないビジュアルを分かつデザインプロセス」をテーマに、ポーラ、日産、キヤノン、そして弊社GMOインターネットグループの4社が登壇。スペースでは各企業が自社のデザインナレッジやプロダクトの展示、会社やチームの紹介をし、来場者と軽飲食をとりながら気軽にコミュニケーションをとることができるとても有意義で楽しいイベントです！ イベント詳細：https://vivivit.connpass.com/event/297728/ スペース出展について スペースのコンセプトと準備 実はデザインチームで外部のイベントに出展するのはお初！でした。 普段サービスや会社などのイベントのスペース制作に携わる機会は多くありますが、イベントチームから依頼を受けて制作しているため、今回のように自分たちで一から企画を考えて自分たちを一番に表現するスペースの制作となるといつもとは全然違って、とっても新鮮でわくわくしました。 企画メンバーで決めたスペースのコンセプトはずばり、GMOインターネットグループらしく、シンプルに、わかりやすく！です。 GMOブルー（企業カラー）を基調に、装飾や展示コンテンツやポップを極力シンプルに、来場者目線になってより立ち寄りやすい導線を意識しながら制作しました。人事部や情報システム部や総務部など他部署のみなさんに協力を仰ぎながら、なんとか完成！ 展示したデザインナレッジについて 展示したいデザインナレッジがたくさんありすぎて、正直選定がとても大変でした・・・ 企画メンバーでそれぞれアイデアを出し合って、大きく２つにわけてまとめて、極力全部盛り込む形となりました。 展示したナレッジ内容① 展示したナレッジ内容② 実際の様子（一部） 特製ノベルティについて さらに、当日来場者にお配りする特製ノベルティとして、トートバッグとステッカーも制作しました。 エグゼクティブリードが直々に制作した、サービス愛に溢れたデザイナー心をくすぐる素敵なデザインです！ 当日の様子 当日はたくさんの来場者がスペースに立ち寄ってくださり、自身のデザインの悩みやキャリア相談など、いろんな話ができました！ トートバッグは特に人気で、トートバッグのためにスペースに立ち寄ってくださる方も・・・★ また、ホスティングサービスConoHa byGMOのキャラクター美雲このはのグッズや動画なども展示したのですが、予想以上に興味を持ってくださる方が多くいました。 そしてスペースに足を運んでくださった方の多くが、「堅い企業という印象だったが、キャラクターや多様なデザインに携わり、デザインにも力を入れている企業という印象に変わった！」と言ってくださり、堅い企業イメージを持った方がたくさんいたことに驚きつつ、実際の雰囲気をお伝えできたことにとても満足しました。 シンポジウム登壇について シンポジウムのテーマと内容 20:20〜はエグゼクティブリードが登壇！ 「心を動かすビジュアル、そうでもないビジュアルを分かつデザインプロセス」をテーマに、「デザイン・映像制作にも役⽴つ佇まいのつくり⽅」についてお話をしました。普段からチームにも浸透している、制作の際に心がけるべきことや制作に対する考え方、そしてビジュアル制作のコツについて、今回はより詳しく実績を交えながらの紹介となりました。 シンポジウムの効果は絶大。ありがたいことに、登壇後はスペースに人が溢れかえってました。 登壇者感想 丸山弊社が扱うサービスは特に形がないサービスが多いため、情報をいかにわかりやすく、速く伝えられるかに日々奮闘しています。目的を、美しいビジュアルを制作することだけにフォーカスするのではなく、伝えたい情報をいかにわかりやすく正しく速く伝えるかを考えて作ることで、結果として心を動かすビジュアルに繋がるということをお伝えしたかったです。来場者の皆さんのこれからの制作に、なにか少しでも役に立てたら幸いです。ちなみに本番は、自分の出番の一つ前のポーラさんが、自分の準備した内容とは異なるジャンルの、ビジュアルの核心についたような素敵な発表をされていたので、余計に緊張しました（笑） 全体振り返りと今後の展望 デザインチームとしては初めてのイベント参加ということで手探りで当日までの準備を進めましたが、準備を通してデザインチームの今の強みや課題を改めて認識することができたので、良い機会だったなぁと感じます。また当日は、来場者の方たちとたくさんコミュニケーションが取れて、堅めの企業イメージが払拭できたのがかなりの収穫でした！！今後も積極的に情報発信やイベント登壇を通して、デザインの知識やチームの取り組みを広めていきたいと考えています。 デザインチーム採用情報 最後に、こんな私たちと一緒に働きたいと思ってくださる方、募集してます！ご興味のある方、ぜひエントリーをお待ちしております。 採用情報はこちらから デザインチーム体制（幅広いスキルを持ったデザイナーが活躍してます！）

こちらは、クリエイターを目指す人や、クリエイティブに関わる仕事をしているが一周回ってよくわからなくなってしまった人のための記事です。コーヒーや紅茶を片手に、肩の力を抜いた状態で読まれることを、強く推奨いたします。 はじめに はじめまして。豆腐は食べられるけど、豆乳を飲むと喉がかゆくなる方の、丸山です。 クリエイターとして成長するための心得として紹介するこの記事は、GMOインターネットグループ株式会社のクリエイターとして成長するための方針として、まとめた内容になっています（でもこの記事をキッカケにちょいちょい変えちゃいました）。 「ちょっとそこはウチとは違うなー」という部分も当然出てくるとは思いますが、そこも含めて「そっちではそうやってるのね〜」という、制作の裏側を垣間見るような気持ちで、気軽に読んでいただけたら幸いです。 その中でも、「あ、これは使えそう！」という内容が一つでも見つかって、あなたの明日からのクリエイティブ制作の一助になれましたら大変うれしく思います。 クリエイターって何をする仕事？ それは「答えではなく、問いをつくるしごと」と考えています。 いきなり禅問答みたいな入りですみません。 この考えは、世界的な広告クリエイターとして有名な杉山恒太郎さんの言葉を引用しています。 AI（人工知能）が普及する時代、人間に求められる力は「課題解決力」ではなく「自ら問いを作る力」。つまり時代は「ソリューション」から「クエスチョン」へ変化している。面白い作品を作るために面白い問題を見つけて自ら作り出す力。この人間にしかない力を身につければ、AIを恐れることはなく、むしろAIを利用できる。したがって、これからのクリエイティブのお仕事は、面白い「インサイト」すなわち洞察力を磨くことで良い「クエスチョン」を作り、良いクリエイティブを生むことである。 私たち、インハウスのクリエイターに当てはめると、「課題・問題を見つけて問いを作り、より良いクリエイティブを生むことで、結果として事業に貢献していく力」を持つ人が、いわゆる「クリエイティブ力がある」と言えるのではないでしょうか。 ではクリエイティブ力を身につけるにはどうしたら良いのか・・・ クリエイティブ力って算数かもしれない まずはもちろん、会社やサービスにとっての課題・問題が何なのかを知る必要があります。そして、その課題に対して、何ができるのか必要なのかを問いかけてみます。 「おーーーい・・・」 ・・・と声をかけても、返事はしてくれないので、私の解釈になりますが、この内容を算数に置き換えてみます。「課題・問題を見つけて問いを作る」を「算数の計算式を考える」に置き換えてみましょう。 「3」が、仮に課題だったして、そのための問いは、「1＋2」「3×1」「12-9」などなど、いくらでも考えられます。クリエイティブに答えが無いとよく言われるのも、こういう事なのでしょうか。違うかもしれません。でもなんだかデザインが計算式を作る作業と似ていると考えると、ちょっとだけ身近に感じていただける方もいるのではないでしょうか。 この「式＝問い」を考えていき、その見え方、伝わり方が、伝えたい相手にとってベストな形であるかどうか、またはより良く見せるためにはどうしたら良いか、を整理していく事が、クリエイティブ力につながっているようにも思います。 要するに、ただ闇雲に計算式（問い＝デザインなど）を並べても、どれが良いのか判断基準はありませんし、なぜその計算式（問い＝デザインなど）がベストなんですかと言われた時に、「なんとなく」しか答えられない状態ではクリエイティブ力が高いとは言い難いと思います。そこで、情報をいかに整理しわかりやすく伝えられているかが鍵となってくるのではないでしょうか。 情報を制するものがクリエイティブを制す 課題や問題がわかった後、じゃあどうするべきかを悩む時、解決へと導く手法は様々（TVCM放映、LP公開、バナー掲載、既存のWebサイト改修、イベント企画等）なので、今回は「デザイン」に特化した例で進めたいと思いますが、クリエイターのお仕事には、情報との向き合い方がとても大切、という共通点があると思います。 いかに早く、適切な情報を収集・ヒアリングし（収集スピード）・・・つくる前いかに早く、美しくかっこよく処理し（制作スピード）・・・つくっている時いかに早く、的確にわかりやすく伝わるか（伝達スピード）・・・つくった後 上記3つをクリエイターに必要な3つのスピードとして考えています。因みに、ここまでで「わかりやすく」という単語を使ってきましたが、これはあえて入れています。制作物によっては「逆にわかりにくくする」など奇を衒（てら）う手法もあると思いますが、まずベースを考えるという意味で、大事な要素と考えているためです。 話を戻します。この3つのスピードを実現するために、結果としてAdobe製品などのソフトウェアを活用する必要があります。 言いたいことは何かというと、クリエイティブ力を発揮するために必要なことは、情報をいかに整理し伝えるかであって、ソフトが使えるだけがクリエイターではない、ということです。 いくらソフトの知識が豊富でも、その技術が日の目を見るのは、情報がわかりやすく美しく整理されて相手に刺さりやすいものになっているクリエイティブだけなのです（基本的には）。 制作したものがきちんと世の中に触れてもらうためには、まずは3つのスピードなどを意識しながら、情報をいかに整理していくべきかに特化して考えても良いくらいです。その結果、この色を見たらこう感じやすいから、とか、こういう構成にしたらこの順番で読んでくれるから、とか、文字だけだとわかりにくいから挿絵を入れよう、とか、見る人・使う人の気持ちになって考えようと、自然とシフトしていくのではないでしょうか。 「見る人のこと考えなきゃ〜・・」と頭から突っ込むのではなく、まず課題を明確にし、伝えるべき相手や情報の整理方法を考え、その上で最終的な見え方（デザイン）を決めることで、無理なく正解にたどり着くことができるのではないかと思います。 それをより快適に実現させるためにソフト（技術）がある、と考えれば、クリエイターってAdobeがすべてじゃないんだな、と立ち返る事ができるのではないでしょうか。個人的には、ソフトはAdobeがすべてと言っても過言ではない気がしておりますが・・・ おわりに そんなわけで、ここまで読んでいただいた方はもうお気づきかもしれませんが、最終的に辿り着くのは、クリエイターにとって大事な要素って、別にクリエイターっぽくない！ということです。クリエイターを前提に物事を考えるのではなく、伝えたい相手にとって（またはサービスにとって）何が最善かをより深く想像できる人の方が、よりクリエイティブ力を身につけることができるのではないでしょうか。クリエイターになるために技術を学ぶこともさることながら、まずは身近な人に対して、思いやりを持つ習慣から始めてみる事などが、クリエイターにとって意外と大切なポイントだったりするのではないでしょうか。 最近のお仕事 最後におまけとして、そんなアンタはなんなのよ、ということで最近のお仕事を少しご紹介して終わりたいと思います。最初から最後まで読んでいただいた方も、この部分だけ読もうとしている方も、貴重なお時間を使っていただけることに感謝いたします。ありがとうございました！ GMO SONIC 2023／クリエイティブディレクション、ロゴデザイン GMO渋谷FUTURE 2023／ロゴデザイン GMO Web3株式会社／Webサイトデザイン インターネットインフラ事業系サービス／アートディレクションなど

どうもこんにちは。新卒3年目の隅谷です。今回はCSSアニメーションに関して調査・考察などしてみたので記事に致しました。 CSSアニメーションとは CSSアニメーションとは、javascript等の他言語を使わずに、CSSのみでWeb上の要素を動かす技術です。現状アニメーションの設定はCSSで、アニメーションを発火させる条件付けをjavascriptで行う。という運用方法が主流になっています。 取り上げた背景 同期がPHPerKaigiの案件を進行していて、どんなイベントなんだろう？と思い調べたことがきっかけでした。ド派手な動きというのはないのですが、1つ1つの動きが気持ちよく美しく動いており、一切邪魔だという気持ちが起きないアニメーションで、自分も自然なアニメーションが使えるようになりたいと思い、CSSアニメーションの世界を調べ始めました。 PHPerKaigiKaigi2022 https://developers.gmo.jp/17318/ CSSアニメーションのメリット・デメリット CSSアニメーションにもメリットとデメリットがあります。 メリット 学習コストが低く、手軽に利用できる CSSの延長線で利用することができ、javascriptを使用する工程が圧倒的に少ないため、プログラミングの経験が浅い方・苦手な方でも実装することができ、簡単なアニメーションであればjavascriptよりもパフォーマンスが良いのがメリットです。 デメリット コード量が多くなる CSSではアニメーションの設定と、アニメーションを利用する箇所どちらにもコードを書かなくては行けません。さらに、アニメーション用の要素をHTMLに記入しなくてはいけない場合があるため、全体的にコードの量が増える傾向にあることがデメリットです。 CSSアニメーションの基礎 CSSアニメーションには「transition」を使う方法と、「@keyframes」と「animation」を使う方法、大きく分けて2つの実装方法があります。どちらにもメリット、デメリットがあります。 「transition」を使った実装方法 「transition」を使った実装方法のメリットは、手軽さにあります。hover等の状態変化が起きる要素に対して「transition」で秒数を設定するだけで実装できます。ですので、簡単にマウスカーソルを合わせると大きさが変わる、回転する、動く等であれば、「transition」を設定するだけで実装できるものがほとんどです。しかし裏を返せば細かいアニメーションを実装したい場合は、「transition」は向いていないということになります。また、繰り返し複数箇所に同じアニメーションを実装したい場合にはも、同じような記述を書かなくてはいけないため、可読性が下がり、こちらも向いていないと言えます。これが「transition」のデメリットになります。 実際にコードとして書くとこのようになります。 <div class="box"></div> .box { width: 100px; height: 100px; background: #000; transition: 1s; } .box:hover { width: 200px; height: 100px; background: #000; } 注意点としては、transitionを使う場合は、hover内に書かず元の要素にtransitionを記述しましょう。意図的でない場合は、hoverが外れた瞬間アニメーションなしで元の要素に戻ってしまいます。 「@keyframes」と「animation」を使った実装方法 「@keyframes」と「animation」を使った実装方法のメリットは、汎用性の高さにあります。それぞれの役割と書き方を紹介します。 「@keyframes」の役割と書き方 「@keyframes」は動きのテンプレートの役割があり、簡単に言えば動きの設計書です。例えば要素を90度回転させた後に、逆側に180度回転させる動きを付けたいときは下記のように記述します。 @keyframes rolling { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } このように記述することで、rollingアニメーションテンプレートが定義されます。この定義したアニメーションテンプレートをどのように使うかを次の「animation」で操作します。 「animation」の役割と書き方 「animation」は、先ほど定義した「@keyframes」を使って、どんな速度で、どんな緩急で、どのように繰り返して、など細かく指定してアニメーションを実行することのできるプロパティです。「animation」で定義できる値はこのようなものがあります。 使用するキーフレーム名(animation-name)1再生にかける時間(animation-duration)どのような緩急で再生するか(animation-timing-function)アニメーションをいつ開始するか(animation-delay)何回再生するか(animation-iteration-count)アニメーションの向きの指定(animation-direction)アニメーションの終了後のプロパティ状態の指定(animation-fill-mode)再生、停止の指定(animation-play-state) ※アニメーションプロパティの詳細はこちらhttps://developer.mozilla.org/ja/docs/Web/CSS/animation 実際に「@keyframes」と合わせて「animation」を使用するとこのようになります。 <div class="box"></div> @keyframes rolling { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } .box { width: 100px; height: 100px; background: #000; animation: 3s linear infinite normal both rolling; } このように実装したアニメーションを、javascriptを使って発火タイミングを作り、アニメーションをさせたい要素にclassをつけるといった流れが主流になっています。 効果的なアニメーションの考え方 これは自論になってしまうのですが、アニメーションには、「能動的なアニメーション」と、「受動的なアニメーション」があります。どちらにも考え方として押さえておきたいポイントがあります。 「能動的なアニメーション」のポイント 能動的なアニメーションとはユーザーが何かしらの操作をした際に、フェードイン、フェードアウトや、ポップアップなどの、要素の表示、非表示に関わるアニメーションだと考えています。このような場合、ユーザーにストレスを与えないことがポイントになります。アニメーションを作り始めると、こんな動きはどうだろうか、あんな動きはどうだろうか。と考え始めますが、本来の目的を見失ってしまう場合があります。例えばポップアップする要素にアニメーションを当てる際に、「ポップアップの際のストレスを軽減」という目的で製作していたら、気づけば目的を見失って5秒のアニメーションになってしまいました。ユーザーがこのポップアップを開くと、ストレスで離脱してしまう可能性が高くなります。それはシンプルにストレスを感じるからです。ですので、「能動的なアニメーション」を実装する場合は、「ユーザーのアクションに対してのレスポンスとわかりやすい上で、スピーディーに展開する。」こちらを意識すると効果的なアニメーションになります。 人間の反射反応時間は約250ミリ秒(1/4)と言われています。実際にクリックしてからアクションが起こるまでが遅いと、不安感、ストレスを感じてしまいます。もしリンゴを持ったときに、大きさ、重さ、表面の質感等が伝わって来なければ、自分がしっかりリンゴを持てているかわかりませんよね。アニメーションも同じく自分がアクションを起こし際に、レスポンスが即座に来て、待たされることなく情報を取得できることが大事です。 「受動的なアニメーション」のポイント 「受動的なアニメーション」とはいわゆるテレビなどで放映されているアニメのようなものです。Webで言えば、ローディングアニメーションや、装飾に対するアニメーションなどです。このようなアニメーションを作る際は、あまり予想ができない意外性のあるアニメーションが引きつけると考えています。そのような動きの実装を考える上で、最も必要なことはアニメ、映画、ゲームなどのオープニングなどの分析をすることです。そしてこの動きはどうすれば実装できるかを考えることで自分のアニメーションの幅が広がります。また、アニメーションに活かすために、普段は触らないようなCSSプロパティにも触れてみることで、できないと思っていた動きが案外できてしまったりするパターンもあります。 CSSアニメーションの今後 CSSアニメーションの今後として、2022年6月15日にIEのサポートが終了したことにより、更なる発展をすると考えられます。IEでの動きを考慮しなくても良くなった現在では、実装できないアニメーションなどないといっても過言ではありません。flashが生きていた時代のようにあらゆる動きができる時代もそう遠くないのかもしれませんね。

こんにちは。GMOインターネット新里です。iPhoneにはLiDARを使った3Dスキャンをしたり、フォトグラメトリという複数の写真から3Dを生成するアプリがあったりします。今回は、このアプリを使って遊んでみたいと思います。 とりあえずスキャンしてみる キャプチャー対象 - 東京タワー・外階段・下り・600階段 キャプチャー結果 : クリックするとPolyCamのサイトに飛びます 池袋・サンシャイン通り・ポスト キャプチャー結果 : クリックするとPolyCamのサイトに飛びます とりあえずiPhoneに3Dスキャンアプリ（ここではPolyCam）を入れて、スキャンしてきました。東京タワーのような巨大な物から、道端にあるポストのような物までスキャンすることができました。余談ですが、東京タワーは実際に階段を歩く必要があるので、体力的にかなり大変でした。 スキャンした3Dモデルは、データとしてエキスポートできて、XRのようなアプリケーションに組込んだり、3Dプリンターで印刷したり、メジャーで測定したり...色々と使うことができます。 アプリについては、色々な3Dスキャンアプリを説明されている素晴らしい内容があるので、そちらを参考にした方が良いでしょう。 3Dオブジェクトを配置してみる スキャンしたデータを使って本来は存在しない所に物を配置して、置いてみたときの状態を確認できます。よくあるのは、家具を置いて配置した感触を確かめたりするといった感じですね。 さきほどの池袋にあったポストを配置してみます。 配置前 配置後 何もない弊社オフィスフロアのエントランスに派手なポストを置いてみると、テンションがあがってきますね。僕自身はポストが好きという訳ではないのですが、ほかにも道端にあった赤いポストをスキャンして、GMOインターネットの本社があるセルリアンタワーの入り口に置いてみました。 配置前 配置後 シックな感じの入り口に、これはさすがにマッチしない感じがしますね。このように実際に物を置いてみるまえに確認する意味でも、既存の物を持って来られるというのは便利でおもしろいです。 世界を切り取ってみよう ここ数年で、手軽に3Dスキャンがスマホで出来るようになったのは凄まじい進化だと感じています。従来のようなToF/LiDAR/大量の写真でフォトグラメトリといった事が、手元のスマホだけで簡単に出来るので、いつでも自分のスマホから世界を切り取って使える時代になってきました。 みんキャプ "みんなで今を斬り撮って、保存して、共有して楽しむムーブメントです。" たくさんの人が手持ちのスマホで街や地域・建物を切り取ってデータ化すると、同じ街・世界ができるというのはとてもおもしろいですね。とても簡単に参加できるので、手持ちのスマホで参加してみても楽しいでしょう。 他にも、みんキャプのtoMapでも使える、PLATEAU（国土交通省が行っている、日本全国の3D歳モデルの整備・活用・オープンデータ化プロジェクト）のように、都市の3Dモデル化はデジタルツインを実現するため・おもしろいアプリやシミュレーションを行うといった用途では必要不可欠ですね。 自分の手持ちスマホでお手軽に3Dデータ化できるのは、それだけでも楽しいです。街を歩いていて気になった建物やオブジェを3D化したり、身の回りのありふれた風景に楽しみを発見するきっかけにもなるでしょう。