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

本

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

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

使い勝手は如何ほどか？モダンCSSの所感

普段ロクに読みもしないメルマガの見出しに「モダンCSS」の見出しを見かけ、気にはなっていたけどちゃんと調べたことないなーという状態だったので、調査がてら学習。その中でも、業務ですぐに出番がありそうと思われるものを数点列挙してみます。コンテナクエリレスポンシブデザインにおいてブラウザなど、メディア類の横幅に応じてスタイルを当てていたのが主流でしたが、この仕様で、入れ子など要素の大きさに応じてスタイルを切り替えることが可能になります。詳しくは、この共同マガジンにも投稿

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

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

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

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

サイト運営を成功に導く！効果的なサイトマップの作成方法

皆さんこんにちは！かんです！ 5月も下旬になり、GWの余韻もすっかり消え、仕事モードに完全に切り替わったこの時期、webサイトのリニューアルや新規立ち上げを計画している方も多いのではないでしょうか。そんなリニューアル時などに欠かせない存在が「サイトマップ」です。皆さんは、サイトマップという言葉を聞いたことがありますか？ webサイトの設計や運営において、サイトマップは欠かせない重要な要素です。サイトマップは、webサイト全体の構造を明確にし、ユーザーが目的の情報にアクセ

代替テキストを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グループの誰もが、いつでも気軽に来られる場所。拠点や業務の違いも飛び越えて集まる、話す、つながることができる場所。みんなの声を生かし

簡単にデザイン作成ができると噂の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を簡単に紹介した記事もあるので機能が全然わからない方はそちらもご覧ください。構成参照機能とは構成参照って日本語訳がちょっとわかりづらいですが、意味的には「レイアウトを参考にする」って感じかと思います。機能自体は従来の「テキストから