加藤文明社｜メディア制作課
当noteの中からHTML/CSSに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！
当noteの中からAdobe Illustratorに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！
当noteの中からAdobe After Effectsに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！
当noteの中からUnityに関する記事だけをまとめました。日々の学習や、お困りごとの際にお役立てください！
こんにちは！WEB制作担当のYです。 今回は、Figma初心者の方向けにコンポーネントについて紹介していきます。 コンポーネントとは、デザインのパーツや部品のようなものです。家を建てるときに、同じような窓やドアを何個も使うように、デザインでも同じような要素を何度も使います。Webサイトでいえば、ボタンやフォームなどがあります。 Figmaのコンポーネント機能は、このような同じ要素を何度も作り直す必要がなくなります。一度作ったコンポーネントを保存しておけば、後で簡単に再利用
こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 皆さん、ドット絵って聞いたことありますか？？ ドット絵とは、絵や画像を表現する、最小要素(ドットorピクセル）が視認できる程の大きさで描かれたグラフィックのことです。 小さなドットを一つ一つ並べて、まるで魔法のように絵を作り上げるこの手法、実はとっても面白いんですよ！🪄 低解像度でありながらも、その独特の魅力とレトロな雰囲気がたまらなくて、今、じわじわと人気が復活しているんです！🔥 最近では、古くて
こんにちは！動画編集＆デザイン担当のTです🐱 今回は、After Effectsで「水面が上昇するアニメーション」を作る方法をご紹介をします。 ぜひ参考にしてみてください！ 平面を作成・テキストを入力新規平面を作成し、テキストを入力します。今回はsampleとしましたが、テキストでも画像でも動画でも大丈夫です！ 水面を作成するテキストレイヤーの上に長方形ツールで水面の素となるシェイプを作成します。 長方形ツールのマークをダブルクリックしたあと、長方形パス内の「サイズ」の値
こんにちは！ エンジニアの宮Pです😎 前回に引き続き、今回もSourcetreeについて話していきます。 今回は「ファイルの変更内容の破棄」と「特定のファイルをコミット対象にさせない方法」を試してみます。 変更内容をコミットする前回の記事では、新規作成したファイルをコミットしました。 今回は、そのファイルの内容を一部変更して、その変更履歴をコミットします。 前回は、このような内容のindex.htmlファイルを作りました。 <!DOCTYPE html><html l
こんにちは！WEB制作担当のYです。 今回は、WEBページに掲載している画像の色などを変更したい時に便利なCSSとサイトを紹介します。 既に使っているアイコン画像の色を変えたいな…ということは改修などの作業を行っている中で頻繁に起こると思います。前回の記事で紹介した、アイコンフォントであれば色の変更も楽々できるのですが、色を変えたいのは画像ファイルなんだよな…ということも多々起こります。そんな時にサクっと使えるCSS、filterプロパティというものがあります。 以下はf
こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 今回はIllustratorのブレンドツールを使った3Dのライン文字の作り方をご紹介していきます！ ライン文字というのは、一筆書きで書いた文字のことで、ロゴやアートなどのデザインで使われています。 今回はこちらの画像のデザインが完成系になります！🍭 手順まずは一筆書きになるようペンツールやブラシツールなどを使用してライン文字をデザインしていきます。 そして楕円形ツールで適当なサイズの円（塗りのみ）を
こんにちは！動画編集＆デザイン担当のTです🐱 今回は、After Effectsで「数字がカウントアップする動画」を作る方法をご紹介をします。 ぜひ参考にしてみてください！ 平面を作成・テキストを入力新規平面を作成し、テキストを入力します。 カウントアップする数字とその他の文字はレイヤーを分けて入力しておいてください。 数字部分は段落パネルから、テキストの右揃えを選択しておきます。 入力後はこんな感じです。今回は東京都千代田区の人口をカウントアップで表現しようと思います。
こんにちは！ エンジニアの宮Pです😎 今回はSourcetreeというツールについて話したいと思います。 はじめにプログラミングで避けて通れないのがバージョン管理です。 「ソースコードを変更したけど、念のために以前の状態も保存しておきたい」というのは誰もが考えることと言えます。 この問題をSourcetreeで解決しましょう。 「使い方がよく分からない」「gitって、なんだか怖い」という声も良く聞きます。実際、私もそんな風に考えていた時期もありました😋 でもSourcet
こんにちは！WEB制作担当のYです。 今回は、WEBページによくあるアイコン画像について、多くの現場が取り入れている便利な「アイコンフォント」を紹介していきます。 そもそもスクールとかではアイコン画像は自作のものを作らせて載せるパターンが多いですが、実際はFontAwesomeやGoogleのMaterialSymbols＆Iconといったアイコンフォントを使用する場合が多いです。 なぜなら、アイコン画像をこちらで制作＆サーバーにアップする手間を省けられますし、何よりユー
こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 もうあっという間に4月も終わってしまいますが、なんだかすでに暑くないですか...? 先日外出した際にえ？夏？？と疑うくらい蒸し暑かったのですが、そう感じているのは私だけでしょうか…🫠 そんなこれからやってくる暑〜い夏に向けて、清涼感のあるポスターのデザインを考えてみました〜🪼💦 どん！🐠🐡🐢🏝️☀️ 要するにダイビングしてみませんか〜という内容のポスターです。 まあ、そこはそんなに重要ではなくて、こ
こんにちは！動画編集＆デザイン担当のTです🐱 今回は、After Effectsで「アニメーション風の炎」を作る方法をご紹介をします。 ぜひ参考にしてみてください！ 平面を作成・フラクタルノイズを適用新規平面を作成します。今回は黒で作成しました。作成した平面にエフェクト＆プリセットから「フラクタルノイズ」を適用します。ここでは初期設定のままでOKです。 平面を複製・グラデーションを適用フラクタルノイズを適用した平面を複製します。複製はcommand＋Dで行うことができます
こんにちは！ エンジニアの宮Pです😎 今回は立体オブジェクトをマーカーにしたARコンテンツを、Vuforiaを使って作ってみます。 はじめにマーカーとして設定するのは、こちらの置物です。 「なんじゃ、こりゃ？」と思われるかもしれませんが、身近に面白そうな立体物が見つからず… この牛が面白いかと言われると、そういう訳でもありませんが、マーカー選定に時間をかけるのも勿体ないので、これで進めましょう😁 Vuforia Model Target Generatorを用意Vufo
こんにちは！WEB制作担当のYです。 今回は、WEB制作に便利なツールを紹介します。 みなさんって文書やコードのコピペの時どんなツールを使ってますか？Windowsユーザーの方ならWin＋Vで出すデフォルトのクリップボードを使用されている方が多いかもしれません。 もちろん、デフォルトのクリップボードも便利なのですが、Cliborというアプリを使えば日常的に使う文章をデフォルトのものと比べて大量に保存できたり、かゆいところに手が届く機能が沢山ついています。「Ctrlキー2回タ
こんにちは！WEB制作担当のYです。 今回は、WEBページにダミーの画像を掲載したいときに便利なサイトを紹介します。 WEB制作では「素材の用意がまだ無いから、とりあえず仮の画像を載せておきたい」ということが多々あると思います。 その際に一個ずつ自分でダミーの画像を作る必要がなく、画像サイズさえ入力すれば自動で画像を生成し、生成した画像のURLを直リンクで使える神サイトがあります。 それがこちら↓ 詳しい使い方はこちらに記載があるので割愛します。（※詳しく書かなくても、
こんにちは！メディア制作課のVRコンテンツ＆デザイン担当のCです🍋 皆さんはイラレの「クロスと重なり」という機能をご存知ですか？？ こちらは2022年10月に追加された機能なんですが、知らずに使ってこなかった方はもったいない！と言えるほどの便利な機能なんです…！😳 簡単に説明すると、オブジェクトをわざわざ切り分けなくても部位ごとに重なり順を切り替えられることが可能なんです…！ つまり複雑な奥行きのあるデザインを簡単に表現することができます！！ うーん、文章だけだとど
こんにちは！WEB制作担当のYです。 今回は、WEB制作初心者の方向けにBootstrapについて説明します。 ざっくり言うと、Bootstrapはコーディング作業が少し楽になるツールです。Bootstrap側が用意したHTML・CSSとJavaScriptを入れれば、簡単にレスポンシブデザインのサイトが作れてしまいます。 ※たまにHTMLやCSSの基礎知識が無くてもBootstrapだけでWEB制作ができると思っている人がいるのですが、それは無理です。基本的にBoots
