デザイン＆エンジニアリング

本

YUIDEAのデザイナー・エンジニアによる共同マガジンです。クリエイティブの考え方、ノウハウ、制作ストーリーなど発信していきます。

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

#YUIDEA

サステナビリティサイトの重要性とトレンドや参考サイトをご紹介！

こんにちは。 YUIDEAでWebディレクション＆開発に携わっているRomiです。今や当たり前のように耳目に触れるようになったサステナビリティ（持続可能性）やSDGs（持続可能な開発目標）といったワードですが、企業活動においてもサステナビリティ経営はもはや避けては通れない重要なテーマとなっていますよね。昨今の投資への関心の高まりやESG投資(*1)の市場規模の拡大などの社会的背景も相まり、環境保護や社会貢献を重視する企業が増えていくなか、企業サイトにサステナビリティ関

絵コンテ：構成表で必要な項目

株式会社YUIDEAでアートディレクターをしているハネトアキです。今回は、絵コンテを描く構成表について描いてみました。ご参考になれば、幸いです。まとめご覧いただき、ありがとうございました。以前に比べ動画を色々な場面で見かけるようになった気がします様々な受取手に発信する為環境によって動画を公開する画面サイズ・比率も異なったりしますそのため絵コンテを作る際は最終的な公開サイズを理解した上での制作が大事だなぁと思います一緒に作るメンバーにも伝わる分かりや

代替テキストをChatGPT-4oと一緒に考える｜webアクセシビリティ

こんにちは。YUIDEAでアートディレクターをしているTottiです。 webアクセシビリティに対応したサイト制作を行う中で、地味につまづく"代替テキスト"。この身近で奥深い問題をAIと一緒に考えてみました。そもそも代替テキストって何？代替テキストは、htmlで画像要素<img>に追加される属性の一つ（alt属性）で、画像が読み込まれない場合や、ユーザーがスクリーンリーダーを使用している場合などに、代替テキストが画像の代わりに表示されたり読み上げられたりします。そ

新人デザイナーが挑む！After Effects学習記④

昼夜の寒暖差が激しい今日この頃、いかがお過ごしでしょうか。 YUIDEAデザイナーのマイです。このnoteでは引き続き After Effectsの学習の様子を記録していきます。今回は文字と円形のアニメーションを組み合わせて「動く円グラフ」を作りたいと思います。 TORAERA DOUGAさんの「アフターエフェクトのシェイプアニメーション入門」講座を参考に作っていきます。学習開始1.ベース作成まず最初に背景を追加し、次に楕円形ツールでグラフの元となる円

知っていると便利！？お助けツール

こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。この記事を公開するのは５月中頃で、初夏と言われる季節ですが過ごしやすい気温が続いていてやたら眠くなっております。なのでお仕事を少しでも楽に進められるようなツールって重宝するよなぁ、と今更ながらに思ったので、今回の記事ではコーディングの時に知っていると便利なツールをご紹介します。レイアウトを表示させる方法を自分で考えて頑張るのも大事ですが、お仕事上でのタイムパフォーマンスを考えるのも必要です

【YUIDEAグループオフィスツアー】みんなでつくる、育てるオフィス

こんにちは。YUIDEAでアートディレクターをしているTottiです。今回は、2024年2月26日、東京都港区南青山に移転したグループ本社を紹介したいと思います！みんなでつくる、育てるオフィスに今回の移転でグループ会社（株式会社デパート、株式会社プランズ）も同じオフィスとなりました。 4つのコンセプトを形にした青山本社は、YUIDEAグループの誰もが、いつでも気軽に来られる場所。拠点や業務の違いも飛び越えて集まる、話す、つながることができる場所。みんなの声を生かし

絵コンテ：１コマに対しての考え方

株式会社YUIDEAでアートディレクターをしているハネトアキです。前回、動画制作の工程について描かせていただきました。今回は、絵コンテの１コマに対しての考え方のポイントについて描いてみました。ご参考になれば、幸いです。まとめご覧いただき、ありがとうございました。 1コマにいろいろな情報を詰めてしまいがちですが、複数コマに分けて、伝えたい順に伝えることで、相手に伝わりやすくなると思います。絵本のようでもあるなぁ…とも思います。もし、伝わらなければ、順番を変えた

『microCMS入門』でヘッドレスCMSを実際にさわってみたお話 - Part2

こんにちは。YUIDEAのウェブディレクターRomiです。さて、前回の microCMS 実装体験レッスンのレビューに続き、今回は従来型CMSとの違いやヘッドレスCMSを導入するメリット・デメリットについて考察してみようと思います。 ▼ 前回記事『microCMS入門』でヘッドレスCMSを実際にさわってみたお話 - Part1 従来型CMSとヘッドレスCMSの違い従来型CMSとヘッドレスCMSの大きな違い、それはその構造とコンテンツ管理のアプローチにあります。 Wo

Fireflyの新機能構成参照を試してみます　

YUIDEAのクリエイティブディレクターzackです。 Adobeの画像生成AIであるFireflyが先月大幅アップデートしましたね。なかでも注目の追加機能「構成参照」が話題になってるのでちょっと触ってみます。以前にPhotohopの生成AIを簡単に紹介した記事もあるので機能が全然わからない方はそちらもご覧ください。構成参照機能とは構成参照って日本語訳がちょっとわかりづらいですが、意味的には「レイアウトを参考にする」って感じかと思います。機能自体は従来の「テキストから

民間企業40社のアクセシビリティ方針を調査してみた

こんにちは。YUIDEAでアートディレクターをしているTottiです。前回、ウェブアクセシビリティの基礎知識についてまとめてみました。今回は、ウェブアクセシビリティに取り組むにあたって必要なアクセシビリティ方針について、民間40社を調査してみたのでご紹介したいと思います。アクセシビリティ方針とはウェブアクセシビリティ基盤委員会では、ウェブアクセシビリティを高めるプロセスとして、以下の流れでPDCAを回し、継続的に取り組んでいくことを推奨しています。ウェブアクセシ

新人デザイナーが挑む！After Effects学習記③

三度目まして、 YUIDEAデザイナーのマイです。 3月末ということで、桜の開花時期が近づいてきていますね！ということで、今回は少し趣向を変えて桜の花びらが舞うアニメーションを作ってみたいと思います。今回参考にさせて頂いた講座はこちらの動画です。花びらアニメーション作成開始1.花びらの用意 AfterEffectsを開く前に、まずはアニメーションに使用する花びらを用意します。今回はこちらのフリーイラストを調整した画像を使用します。 2.コンポジション

主要ブラウザが対応になった！コンテナクエリって？

こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。今回は2023年の中頃から主要ブラウザに対応したコンテナクエリについて、自分の学習がてらざっくり書かせていただきます。 ※認識違いなどありましたらコメントなどで教えていただけたら幸いです！使用可能なブラウザはCan I useからご確認いただけます。コンテナクエリとはざっくりご説明すると、ビューポートの幅ではなく、コンテナの幅(親要素など)を基準にスタイルを変更できるcssです。メディアク

動画の制作工程

株式会社YUIDEAでアートディレクターをしているハネトアキです。前回、動画制作を依頼するときの整理ポイントについて描かせていただきました。今回は、動画制作の工程について描いてみました。ご参考になれば、幸いです。まとめご覧いただき、ありがとうございました。世の中にあるどんなものも、その背景には多くの方々が関わっていて、誰かに必要とされて、そこに存在しています。そのことを思うと、世の中に対して少し優しくなれそうと思いませんか？＃YUIDEA　＃動画制作　

『microCMS入門』でヘッドレスCMSを実際にさわってみたお話 - Part1

こんにちは。 YUIDEAのウェブディレクターRomiです。前回の記念すべき第一回記事ではCMSについての基本的な話を書き綴ったのですが、今回はCMSのメインストリームとなりつつあるヘッドレスCMSについて解説してみようと思っていたところ、ちょうどよいタイミングでドットインストールさんの公式noteに以下 ▼ の記事を発見！これを利用しない手はないということで、実際に国産ヘッドレスCMSの代表格であるmicroCMSをさわってみた感想や、従来型CMSとの違いなどをレビ