はてなブックマーク

画像生成AIのMidjourneyを1年間使い続け、特に気に入っているのが、AIによるロゴデザインの作成です。 ロゴを適当に利用してしまうと、大きなデメリットしかなく、もったいなさすぎます。 その理由はずばり、ロゴは単なるきれいなイメージではないからです。 ロゴは、ブランドのすべての価値を表す重要な略語なのです。 出典: The 7 Types of Logos And How to Use Them – 99designs それぞれのロゴの背景には、ブランドの世界観が詰め込まれています。 ロゴを見たときに、意識的にせよ無意識にせよ、あなたの脳はストーリーや感情、経験で満たされます。 実際、人間の脳はテキストの６万倍の速さで画像を処理しているそう。 もしかしたら、これまで無料のロゴを利用したり、プロのデザイナーに頼むと高くつくので、自分で作っているかもしれません。 しかし、Midjourn

そろそろ新しいフォントが欲しいとお考えの方へ。 この記事では、最近公開されたばかりの新作フリーフォントのみを集めており、いろいろなデザインに挑戦してみたいという人にオススメです。 デザインや表現の幅を広げる、クリエイティブなフォントを探してみましょう。 しかも、すべて無料でダウンロード可能。 Adobe Fontsで利用できる日本語フォント まず新しくアップデートされ、新しくAdobe Fontsに追加された日本語フォントから。 Adobe Fontsで利用できる日本語書体一覧PDFもダウンロードできます。 貂明朝アンチック 漫画のセリフに特化したアドビのオリジナルフォントで、　漫画の吹き出しに古くから使われている、仮名が明朝体、漢字がゴシック体の「アンチック体」を採用。 太さに応じて6ウェイトが揃っており、Adobe IDさえあれば無料ユーザーでも「Adobe Fonts」から利用できま

「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど

ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドでも毎年選出されており、まずます需要が高まっています。 実際に、多くの売れるウェブデザインも採用中。Webが進化したことで以前より手軽にアニメーションが表示できるようになり、Appleも採用するCSSテクニックが増えているのも事実です。 この記事では、思わず惹きこまれる素敵Webアニメーション30選をご紹介します。 心地よい遷移アニメーションの基本ルールを知っておけば、ワンランク上のウェブデザインを作成したいときにも安心ですよ。 GLASSWARE №001 by Matthew Hall ギャラリーへの心地よいページ遷移アニメーションの参考例として。新しいコンテンツが表示されるタイミングやテキストエフェ

WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。 アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。 さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。 「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。 そんな悩みを解決するのが、AIを活用したFigmaプラグインです。 今回紹介するAIプラグインを使えば、以下のようないままで時間のかかっていた作業を自動化、一瞬で作成できます。 デザインのアイデア出し レイアウトの自動生成 デザインをコードに変換 アニメーションの自動生成 デザインの品質チェック AIプラグインは、デザイン作業の「自動化」と「効率化」を実現できます。 これにより、デザイナーは、インスピレーションやアイデアを考える時間や、新しい知識や技

「ほったらかしで、デザインの作成が完了」 「配色に悩んだときの救世主」 「時間のかかっていたデザイン作業が一瞬で終了」 そんな噓のようなツールが、AIの進化によって日々、世界中で公開されています。 このまとめでは「これはやられた！」と思わずうなってしまう、最新オンラインツールや素材55個をご紹介。 カテゴリ別に整理しています、自分だけの神ツールを見つけてみませんか。 目次Web制作便利ツールデザイン制作便利ツールプロトタイプ・アイコンツール面白ツール Web制作便利ツール Progressively Enhanced WebGL Lens Refraction レンズの屈折をリアルに表現したCSSとReact Three Fiberを活用したレスポンシブなWebGLレイアウトを作成する方法を学びます。デモページ Grid Item Hover Effect 半透明グラス風のホバーエフェクト

Adobeが正式リリースしたAdobe Fireflyの画像生成機能では、「スケッチ​から​画像​作成できる」機能は、ただいま「開発中」となっており、今後追加される予定となっています。 しかし、「手描きスケッチからAI画像生成したい。」という夢を今すぐ叶えてくれるPhotoshop AIプラグイン「Alpaca」がリリースされたので、今回はご紹介します。 Alpaca AI Photoshopプラグイン 「アーティストのためにつくられたAIツール」Alpaca for Adobe Photoshop Alpaca AIツールは、テクノロジーと人間の創造性をシームレスに統合し、想像力豊かなビジョンを簡単に実現、表現できるPhotoshop用のAIプラグインで、現在ベータ版となります。 Alpacaの主な特長のひとつが、「スケッチを詳細な画像に変換する」機能。 「ラフな手描きのスケッチからでも

「どうすれば、たくさんの人に響くイラストを手に入れるには？」 「どうすれば、もっとカッコいいイラストを手に入れることができるか？」 SNSや動画、ブログ、ホームページ、プレゼン資料などでイラストが欲しいときに、あなたも悩んだことがあるでしょう。 このサイトでは、「本当に使えるデザイン素材」を15年以上集めており、さまざまな無料ツールや素材をコレクションしてきました。 まとめた記事で言えば1000件以上、記事数は3500を突破し、今も定期的に更新を続けています。 ちょっとしたデザイン素材の使い方の違いで、驚くほどユーザーの反応が変わったという場面にも、何度も遭遇しました。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、利用できるデザイン素材を知らずに損をしている人が、あまりにも多いということ。 あなたの素晴らしい商品やサービスの魅力が、消費者にまったく伝わっていないの

アドビの生成AI「Firefly」が正式リリースされたタイミングで、フォトショップの最新版となる「Photoshop 2024（v25.0）」が登場しました。 「過去最大のアップデート」と話題になるなど、フォトショップがより使いやすいツールへと進化しています。 この記事では、知っておきたいPhotoshop 2024の驚くべき新機能を、ベータ版も含めて詳しくみていきます。 Photoshopをアップデート 目次Photoshopとベータ版のアップデート方法パラメトリックフィルター削除ツールが楽ちんアップデート塗りつぶし生成ツールの商用化スタート塗りつぶし生成拡張塗りつぶし生成のクレジット数の考えかたAI生成のコンテンツ認証情報使いやすくなったコンテキストタスクバーさいごに Photoshopとベータ版のアップデート方法 まずはフォトショップの更新から。 Adobe Creative アプリ

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS

Adobeの画像生成AI「Firefly」が正式リリースされたことで、Photoshopデスクトップ版も最新版25.0にアップデート。 これまでベータ版のみで利用できたアドビ生成AI機能、「生成塗りつぶし」と「生成拡張」がついに追加されました。 この記事では、PhotsohopのFireflyによる生成AIをどのように利用できるか、実際に試しながら詳しく見ていきます。 Photoshopを無料ではじめる PhotoshopのAdobe Fireflyによる生成AIを試してみた 今回利用した画像はこちら。 アップデートされたPhotoshopでは、使い方が分からないときに使えるヘルプガイドが充実しています。 メインメニューより「ヘルプ」＞「Photoshopヘルプ」＞「ビデオシリーズ」に進み、「生成塗りつぶしを使うための6つの簡単テクニック」より同じ画像で試すことができます。 元となる画像が

AdobeはかねてよりWebアプリとして公開してきた、独自の画像生成AIツール「Adobe Firefly web版」を正式にリリースしました。 「Midjourney」や「Stable Diffusion」、「DALL-E2」など有名な画像生成ツールもありますが、どれも著作権の問題がグレーの状態で、特に商用利用はむずかしいのが現状です。 「Firefly」は商用利用に完全対応したため、仕事でも自信を持ってAI画像生成を行うことができます。 Adobeの画像生成AI「Firefly」とは？ Fireflyとは、Adobeが公開しているクリエイティブのための生成AIです。 Adobe Fireflyは、画像生成、テキスト効果、ベクター用の生成AIモデルを基盤としており、日本語を含む100以上の言語のテキストプロンプトをサポート。 商用利用として安全性を考慮した魅力的なコンテンツを、世界中のユ

「プロのカメラマンが撮影したような、人物の写真が欲しい」 「モデル写真が欲しいけど、費用がかかるので迷っている」 「撮影するには時間もかかるし、場所やモデルの確保はどうしよう」 たとえば、カメラマンに撮影場所へ来てもらって撮影する「出張撮影」。 撮影時間によって料金は変わりますが、相場は撮影1時間で２万円～３万円程度と言われています。 さらに写真のレタッチや編集などのオプション、撮影枚数が多いと数十万円の費用が必要ということも。 しかし、今回紹介するオンラインAIツールを利用すれば、誰でも簡単に人物写真を生成できます。 しかも、無料です。 超リアルな人物の全身写真を作成できるAI Human Generator AI Human Generatorは、ほんの数クリックするだけで、超リアルな人物の全身写真をリアルタイムで作成できるオンラインAIツールです。 このツールがすごいところがずばり、

「いつもやってるこの作業、実はちょっと面倒」 「アイデアを形にできるツールや素材が欲しい」 「クリエイティブの生産性を上げたい」 そんな人に朗報です。 このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。 カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。 目次Web制作便利ツールデザイン制作便利ツールプロトタイプ・アイコンツール面白ツール Web制作便利ツール On-Scroll Column & Row Animations スクロールすると、グリッド状に並べられた画像アイテムをアニメーションさせながら表示し、一瞬で目を奪う素敵エフェクト。デモページ Connected Grid Layout Animation グリッド同士の角がつながったようなスクロールアニメーションが展開し、不規則な見

「そろそろ新しいフォントを追加したい」とお考えの方へ。 この記事では、最近公開されたばかりの最新フリーフォントの中から、「本当に使える」フォントだけを厳選。 星の数ほどあるフリーフォントから探す作業や手間は必要なく、まとめて手軽に確認できます。 入力するだけでデザイン性がアップするフォントを、いつでも楽しんでみましょう。 最新フリーフォントまとめ Marige – Modern Display Serif Font コントラストがはっきりとした、力強さを感じさせるモダンなディスプレイ書体。 あらゆるプロジェクトに対応でき、どこかレトロでおしゃれな雰囲気を演出できます。 ※　個人利用可能 Bricolage Grotesuque 不規則なフォントの太さで、どこかリラックスした、ノスタルジックな雰囲気のあるヴィンテージ書体。 イギリスとフランスを象徴するデザインと、現代のトレンドやツールを融合

卵焼きや揚げ物、かまぼこ、焼き魚、煮物や漬けもの、佃煮といったおかずに、ごはんを詰め合わせた弁当箱。 いま、日本伝統の弁当箱が、WebデザインやUIデザインに与える、大きなトレンドになっています。 Traf Starlight.money Chronicle Starlight.money Apple Tubulio Bento UIを利用したWebサイト 「Bento UI」を呼ばれるこのトレンドは以前からありましたが、デザイナーがその使い勝手の良さに気づき、人気になってきたのはここ１，２年のことです。 多くのデザイントレンドと同じように、その起源には諸説ありますが、アップルが自社のUI要素にBento UIを採用したことから、「Bento UIが流行したのはアップルのおかげ」という人も。 Appleで使われているBento UI または、「MicrosoftのMetro UIが、事実上

「ウェブサイトのアイデアが浮かばない」 「刺激的なインスピレーションが欲しい」 「打ち合わせでイメージをすり合わせたい」 そんなときに目を通したい、世界で話題の最新Webデザインをまとめてご紹介します。 2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。 レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。 最新ウェブデザインまとめ Tote.design カラフルなグラデーションで埋め尽くされた空間を移動しながら、制作実績を見つけ出す超ポップなポートフォリオサイト。ハンバーガーメニューは、まさにハンバーガーそのまま。 チルするすゝめ ノスタルジックで幻想的な色使いのイラストが特長のランディングページ。モバイルでの閲覧に最適化されており、想定ユーザーに刺さる、読み

フォトショップにAIを活用した、話題の新機能「生成塗りつぶし」の使い方は、これまでの写真加工の仕方を、根本から覆してしまうかもしれません。 今回は、「生成塗りつぶし」機能で複雑な髪を選択する方法をご紹介します。 誰でもできるこのテクニックを習得すれば、わずかな作業を行うだけで、どんな写真の切り抜きも可能となり、これまでのテクニックに比べて断然楽に作業を進めることができます。 ただし、利用するときの注意点もあったので、詳しく見ていきましょう。 目次ビフォーアフター被写体を選択しようコンテキストタスクバーから被写体を選択クイックマスクモードで編集しようクイックマスクモードの使い方50%グレーは透明レイヤー気を付けたい注意点生成塗りつぶし解像度は1024pxの制限あり背景を透明で生成できない他の切り抜きテクニックと併用しよう生成塗りつぶしでできること ビフォーアフター 今回はこちらの写真を利用し

当サイトでは、毎月新しく公開されたフリーフォント素材をまとめて紹介しています。 この記事では、2023年上半期にリリースされた、商用利用でも使える完全無料の英語・日本語フリーフォントを集めました。 2023年上半期は、特に数多くの日本語フリーフォントが公開され、おしゃれな英語フォントから高級感のあるセリフ書体、人気定番の筆記体、手書き、ブラシフォント、ビンテージ、ディスプレイなど幅広いカテゴリより、フリーフォント素材81個を厳選しています。 コンテンツ目次Adobeフォント日本語フリーフォント万能フォントサンセリフ書体セリフ書体筆記体フォント手描き、ブラシフォントレトロ・ヴィンテージ書体ディスプレイ書体殿堂入りフリーフォント一覧 Adobeフォント 「日本語フォントをまとめてダウンロードしたい」 「できるだけ安く、仕事でも安心して、フォントを使いたい」 そんなときは、20,000以上の英語