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

本

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