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

もしも、フォトショップをつかって、写真から不要な人やものを消したいとき、あなたならどうしますか。 さまざまな方法がありますが、もっとも手軽なのが「コンテンツに応じた塗りつぶし」でしょう。 シンプルな写真では問題ないのですが、特に複雑な写真では、フォトショップにあまり良い結果を期待することができません。 今回は、フォトショップと無料のAIツールをつかって、どんな写真でも不要な人やものを消す新しい写真加工テクニックをご紹介します。 フォトショップ「コンテンツに応じた塗りつぶし」の現状 まずは、フォトショップの「コンテンツに応じた塗りつぶし」をつかって、どこまで消せるか試してみます。 こちらの写真の手前に立っている男性を、消してみましょう。 加工をはじめる前に、もとの写真をコピーして保存しておくと、もしものときのバックアップになります。 ここでは、「被写体の選択」ツールを使い、人物のみを切り抜き

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ

この記事では、Google Fontsで使える日本語フリーフォントをまとめてご紹介します。 Google Fontsには現在、64の日本語書体が提供されており、すべてのウェイトを合わせると、132フォントが商用OK＆完全無料となっています。 フォント選択の幅が広がるWebフォントを利用して、ウェブサイトのデザインをグッと良くしてみませんか。 Adobe CCの日本語フォントと、漢字も使える日本語フリーフォントも一緒に活用してみると良いでしょう。

「筆記体でかわいい、おしゃれなデザインにしたい」と思っても、いざ文字を入力してみると、「なんか思ってたのと違う」と感じたことはないでしょうか。 お気に入りのフォントをやっと見つけたら、個人利用のみだった、なんて経験も。 10年以上に渡り、コツコツと集めてきたフォントのなかから、商用利用ができる無料の筆記体フリーフォントのみを厳選してご紹介。 デザインに苦手意識があるひとも、文字を入力するだけでおしゃれに仕上げるオススメ＆定番の筆記体フリーフォントで、デザイン作業を快適にしてみませんか。 一覧リストには、現在84個の筆記体フリーフォントが揃い、今後もアップデート予定です。 好きに選べる、好きなだけ使えるAdobe Fonts 「海外サイトからのフォントのダウンロードは不安。」 「できるだけ低予算で、高品質なフォントを、安心して使いたい。」 そんなときは、20,000以上のプロフォント、500

CSSボタンデザインは、スタイルを変えるだけでガラリと印象を変えることができるウェブデザイン要素のひとつです。 Copy & Paste CSS は、AmazonやSpotify、Slackといった有名Webサイトで使われているボタンデザイン用CSSスニペット77個を集めた無料ツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSSソースコードをコピペできます。 詳細は以下から。 AmazonやSpotifyも！有名サイトのCSSボタンデザイン77個をコピペ再現できる Copy & Paste CSS Copy & Paste CSSは、海外でよく見かける有名サイトで使われれているボタンスタイルをCSSで再現し、コピペで実装できるようにまとめたCSSライブラリです。 BootstrapやGithub、Tailwindといっ

この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren