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

本

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

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

簡単にデザイン作成ができると噂のAdobe Expressを使ってバナーを作ってみた

みなさんGWはいかがお過ごしでしたでしょうか。私はこれでもかというほど遊び倒しておりました。その反動でしょうか、まったく仕事に精がでません。（自業自得）自分のNoteの担当日は刻々と近づいているのにやる気がでない….（クズ過ぎる）。そのNoteの記事を書く上で私がいつも時間がかかるなと思っているのが、サムネイルの作成。「そうだ、記事内でサムネイルを作ってしまえば一石二鳥ではないか。」ずるがしこい山口青年はそう考えたのです。ということで、個人的に気になっていた「Ad

アクセシビリティ対策用カンニングコード

以前ポストした「コーディング視点からの、ウェブアクセシビリティ対応」を基に、実際どう組んでいたか、（自分が）特に忘れやすい部分を思い出すため用のカンニングコードをまとめてみました。フォントの相対指定直観的に記述するなら、ベースとなるサイズ指定の時点で10px相当のサイズを指定し、rem指定で調節。 /* CSS */html { font-size: 62.5%;}/* 10px = 16px * 0.625 *//* 以降 10px = 1rem *//* 14px

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

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

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

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

webディレクターって？

皆様こんにちは！「かん」です！今回は私がYUIDEAでwebディレクターとしてどんな仕事をしているかをご紹介したいと思います。「Webディレクターって実際にはどんな仕事をしているの？」この記事をご覧の皆様の中には、そんな疑問をお持ち方もいらっしゃるかと思います。今回はそんな疑問に答えていきます。また弊社は2024年の2月にオフィスを青山に移転しましたので、webディレクターの1日＆新オフィスを少しご紹介したいと思います。それでは張り切って参りましょう！！

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です。メディアク

UIデザインの暗黙知 - いくつかのケースを考察してみた

先日、社外向けの研修のデモで上司が「UIデザインの暗黙知」についての話をしていました。研修の中で軽く触れていただけなのですが、興味深い内容だったので皆さんに共有したいと思います。 UIデザインの暗黙知、例として以下のようなものが挙げられます。・リンクテキストには下線を引く・ボタンにホバーすると、ボタンの色が変化するこのように、UIデザインの暗黙知とは、WEBデザイナーなら知っていて当然の知識（意識せずともデザインに組み込んでいる知識）のことを指します。勿論、デザイナー

納品前チェック項目のアレやコレ

最近チェックシートを見直すことがあったので「これ忘れっぽいよなー」とか「これ後回しにしがち」とか、作業している中で割と遭遇する出来事の掘り起こし。主にソースコード関連titleタグ、descriptionタグの記述内容コーディング作業期間中はコンテンツ部分に集中しているので、それ以外の部分は「落ち着いてから」と結構後に回されがちです。特にdescriptionは、作業途中に内容決定することが多々あり、コーディング難度の高いページの作業後などは、燃え尽き気味でよく忘れ

動画の制作工程

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

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

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

ChatGPTで自社キャラを作りたい

こんにちは、YUIDEAでアートディレクターをしているTottiです。クリエイティブにもChatGPTやFireflyなどの生成AIがなくてはならない存在となりました。 2023年10月には、ChatGPT-4に「DALL-E3」という画像生成機能も実装されハイスピードで進化しています。使いこなすにはまだまだ、、といったところですが、とにかく色々やってみよう！ということで、私たちYUIDEAの自社キャラクターを作ってみたいと思います！まずはChatGPTに命を吹き込も