デザイン
こんにちは、ハヤマです。 今回は、「AIイラスト」をテーマに書いていきたいと思います。 AIイラストとは AIイラストとは、大量のデータを学習したAI（人工知能）が生成したイラストのことです。イラストのテーマやシチュエーションをテキスト（プロンプト）…
こんにちは、ハヤマです。 今回は、デザインデータ共有時に起こりうるフォントのトラブルについて、注意点などご紹介します。 文字化けは発生していないのに、ウェイトが変わってしまっている...？ 「Illustratorで作成したデザインデータを開いたとき、フォ…
こんにちは、ハヤマです。 今回は、Figmaのファイルにサムネイルを設定する方法について学んでいきます。 Figmaファイルのサムネイルとは ファイル一覧画面を開いた時にファイル名とともに表示される画像のことで、デフォルトではファイル内（ページが複数あ…
こんにちは、ナカムラです。 先日、お世話になっているフロントエンド仲間と勉強会をしました。 最近のCSSプロパティの話や、実装に悩むレイアウトの実装方法のアイデア交換など、日頃気になっているフロントエンド周りの話をするとても有意義な会でした。 …
こんにちは、ハヤマです。 突然ですが、私は普段、Adobeのアプリをメインにデザインワークを行っていて、傍でFigmaについて定期的に学習を進めています。 ただここ数ヶ月は、あまりFigmaの最新情報をチェックできず…。 Figmaは定期的なアップデートを重ねて…
こんにちは、ハヤマです。 今回は、Photoshopの新機能「不要な要素の削除」について紹介したいと思います。 「不要な要素の削除」とは 2024年10月リリース（バージョン 26.0）から使用できるようになった削除ツールの新機能で、 画像の背景にある不要な電線…
こんにちは、ハヤマです。 今回は、カラーパレットジェネレーター「Adobe Color」について書いていきたいと思います。 「Adobe Color」とは Adobeが提供しているカラーパレットジェネレーターです。 2色以上でデザインを行う際に配色を検討しますが、そんな…
こんにちは、ハヤマです。 今回はIllustratorの新機能「生成パターン」について書いていきたいと思います。 「生成パターン」とは 「Adobe Firefly」を搭載して、テキストプロンプトを使用してベクターによるパターンの生成ができる機能です。 過去に記事で…
こんにちは、ハヤマです。 今回は、「バリアント」機能を使ってコンポーネントのバリエーションを作っていきたいと思います。 前回の記事はこちら tech.arms-soft.co.jp ※本記事では、Figmaの機能名は日本語化された名称で記載しています。 バリアントとは …
こんにちは、ハヤマです。 今回は久しぶりに、こちらのシリーズの続きを。 tech.arms-soft.co.jp コンポーネント化する想定でボタンを作成していきたいと思います。 コンポーネントとは デザインファイルやページの中で何度も利用する要素に対し設定する、共…
こんにちは、ハヤマです。 今回は、和文のフリーフォント探しに便利なサイトをご紹介します。 モジザイ 「モジザイ」は、和文のフリーフォントを書体の種類やスタイルから連想するイメージワードをもとに約300種類の中から検索できるサイトです。 www.mojiza…
こんにちは、ハヤマです。 今回は、比較的新しい画像ファイルのフォーマット「WebP（ウェッピー）」について紹介したいと思います。 WebP（ウェッピー）とは 2010年に米Googleが開発した画像ファイルのフォーマットのことで、ファイルの拡張子は「.webp」で…
こんにちは、ハヤマです。 前回の記事では、スタイルを1つ1つ登録する方法について書きました。 tech.arms-soft.co.jp 今回は、プラグインを用いて一括登録する方法について学習していきたいと思います。 カラーやテキストのスタイルをまとめて登録するプラ…
こんにちは、ハヤマです。 前回までは、デザインを行う前の下準備について書きました。 tech.arms-soft.co.jp 今回はもう少し進んで、制作する上で設定しておくと便利な「スタイル」についてご紹介します。 （インプットとアウトプットを同時進行で進めてお…
こんにちは、ハヤマです。 今回は、現在公開されているPhotoshop Beta版で 画像生成AI（Adobe Firefly）機能を使った画像の「生成塗りつぶし（※）」を試してみたいと思います。 ※「ジェネレーティブ塗りつぶし」は、「生成塗りつぶし」に名称が変更となりま…
こんにちは、ハヤマです。 今回からは実践を兼ね、学習しながらfigmaでWebデザインにチャレンジしていきます。 操作について未熟な点があるかと思いますが、筆者の学習を兼ねているためご勘弁を、、 手を動かしながら学んでいければと思います！ （筆者：普…
こんにちは、ハヤマです。 今回は、Webデザインを目的とした視点で「Figmaのカラーマネジメント」について書いていきたいと思います。 Figmaのカラーマネジメント Webデザインを行うにあたって、取り扱うアプリケーションやツールがどこまでカラーマネジメン…
こんにちは、ハヤマです。 今回は、Figmaのデータ管理方法についてまとめていきたいと思います。 （Figmaに関するこれまでの記事はこちらをご覧ください） Figmaのデータ構造について Figmaのデータですが、XDとは異なる構造で管理をしています。 以下の図を…
こんにちは、ハヤマです。 昨年AdobeがFigmaを買収し、これを機にFigmaの導入を検討されている方も多いのではと思います。 この記事では、もともと「XDユーザー」で、「これからFigmaへのシフトを考えている方」向けに、覚えておきたい点などをご紹介します…
こんにちは、ハヤマです。 突然ですが、Webデザインの記事などで「グラスモーフィズム」「クレイモーフィズム」「スキューモーフィズム」「ニューモーフィズム」といった「○○モーフィズム」系の名称がよく登場します。 もしくはエンジニアの方でしたら、デザ…
こんにちは、ハヤマです。 今回は、Illustratorでルビ設定をする際に便利なスクリプトについて、備忘を兼ねて記事にしたいと思います。 illustrator-ruby 「illustrator-ruby」はルビのサイズや揃え位置、進入処理・アキ挿入を調整してくれるスクリプトで、…
こんにちは、ハヤマです。 2022年9月、Adobeがデザインツール「Figma」を200億ドル（約2.9兆円）で買収することを発表しました。 blog.adobe.com 2023年内には買収を完了する予定とのこと。 Figmaは自社ツールをガッツリAdobeと比較して紹介していたりと、結…
こんにちは、ハヤマです。 今回は、「DTPの2023年問題」と呼ばれる、フォントに関する注意点をご紹介したいと思います。 （2023年、気がつけば到来まで4ヶ月を切っていますね（汗）） 「DTPの2023年問題」とは？ 2023年1月以降、Adobe製品でType 1 フォント…
こんにちは、ハヤマです。 今回は、Photoshopでのスピーディーな被写体の切り抜き方法についてご紹介します。 切り抜きは作業頻度が何かと高いと思いますので、デザイナーの方以外でも、Photoshopをお持ちでしたら覚えておくと損はないかと思います！ はじめ…
こんにちは、ハヤマです。 今回は、Illustratorで使用できる便利なスクリプトをご紹介します。 数字だけ大きくしたり、 英字だけ選択したりするスクリプト 例えばですが、タイトルやキャッチコピー、日付、金額表示などの文字組みを行う時のことをイメージし…
こんにちは、ハヤマです。 今回は、少しずつ普及し始めている「バリアブルフォント」について学んでいきたいと思います。 バリアブルフォントとは？ Adobe・Apple・Google・Microsoftが共同で開発した新しいフォントの概念のことで、通常、フォントファイル…
こんにちは、ハヤマです。 デザインを行う上で、情報を直感的に表現したり、装飾のアクセントとして配置したりと活用頻度の高いアイコン。 今回は、汎用性のあるシンプルアイコンやフラットデザインアイコンのほか、ジェネレートタイプやドット絵といった変…
こんにちは、ハヤマです。 2022年1月23日に、フォントメーカーのフォントワークス株式会社が「MOJICITY（もじシティ）」というサイトを公開しました。 テーマは“「自分らしいフォントを自由に楽しめる世界をつくる」ために生まれた実験仮想都市”。こちらでは…
こんにちは、ハヤマです。 デザインデータをもとにコーディングを行った際、カラーコードなどの値はデータに忠実に作成しているのに、「デザインデータと色味が違う」となってしまったことはありませんか？ それ、デザインデータの共有時に大事な情報を共有…
こんにちは、ハヤマです。 今回は、Illustratorを使ってWebデザインを行う際のアプリケーション設定についてご紹介します。 はじめに 個人的に、IllustratorでWebデザインを行う方というのはDTP出身のデザイナーさんに多いのではないかなと思っています（か…
