Webデザイン

AIにWebデザインの仕事を手伝ってもらった

ビジネス

ChatGPTにCSSの見出しデザイン例を無限に作ってもらう方法【コピペでOK】

  • 「おしゃれ」「かわいい」「シンプル」など、簡単な対話でChatGPTにCSSのデザイン例を無限に作ってもらうことができます。見出し以外でももちろんOK。
  • 出力されるCSSのコードはそのままコピペで使えます。しかも「サブタイトル付きの見出し」など、単一のHTML要素だけじゃ構成できない複合的なコードも生成できます。
  • 希望する選択肢が無い場合は自由な指示を出すこともできます。
  • 作ってもらったコードもChatGPTに聞きながら希望に沿った内容に修正してくれるので、時間のムダになりません。
  • デザインやコードはもちろん仕事の現場でそのまま使えるレベルではまだないけど、ビギナーが勉強しながら作るなら十分すぎるといった感じ。
  • とりあえず初心者のGoogle検索はもう不要。【初心者向け】【CSSデザインサンプル〇〇選】のコンテンツもオワコンです。。。

あなたは、優秀なフロントエンドエンジニアです。
これから私との対話で、その対話の内容に沿ったCSSのソースコードを提示してください。
対話は以下の流れに従ってください。この流れはひとつの手順ごとに返答してください。

1. 私が提示するWebサイトのHTML要素について、「シンプル」「かわいい」「ビジネス」のような代表的なデザインテイストを10項目リストアップし、どのデザインテイストのCSSソースコードが知りたいかを私に聞いてください。
2. 私が返答したWebサイトのHTML要素、デザインテイストについて、「立体感のある」「吹き出しを使った」「下線付き」のような代表的なデザインの構成要素を10項目リストアップし、どのデザインの構成要素のCSSソースコードが知りたいかを私に聞いてください。
3. 私が返答したHTML要素、デザインテイスト、デザインの構成要素を満たすCSSソースコードの例を1つ、表示してください。
では、始めます。
CSSを提示してほしいHTML要素は「H2見出し」です。

(さらに…)
ビジネス

ChatGPTにSVG形式のピクトグラムアイコンが作れるか聞いてみた結果

  • 現在ChatGPTでは画像は作れないけど、テキストで描画できる「SVG」形式のイラストなら多少は書けるかも、と思ってChatGPT(GPT4)に聞いてみました。
  • 結果は、一応エラーにならないSVGコードは出してくれるけど、使えるイラストはほぼなかった。
    単純な記号ならより正確かな、と思ったけどあまり関係ない様子。
  • ただ可能性は感じる。ピクトグラムのAI生成などは近いうちに広がりそう。

以下のピクトグラムのSVGコードを教えて。
・「車」を表すピクトグラム。
・配色は白黒で、イラストは黒で塗りつぶし、背景は透明に。
・サイズは128×128ピクセル。
・SVGのコードの書式はHTML。

(さらに…)
ビジネス

ChatGPTにプログラムを読ませてどのような動作をするか教えてもらうプロンプト

  • ChatGPTで「以下のコードをレビューして」と聞くだけでプログラムの詳細な動作を教えてくれる。

以下のコードをレビューして

class Speaker_sapi5:
    def __init__(self, voice_index=2):
        self.engine = win32com.client.Dispatch("SAPI.SpVoice")
        self.engine.Rate = 1
        self.engine.Volume = 100

        voices = self.engine.GetVoices()

        for i, voice in enumerate(voices):
            print("{}: {}".format(i, voice.GetDescription()))

        if 0 <= voice_index < len(voices):
            self.engine.Voice = voices[voice_index]
            print("音声を「{}」に設定しました。".format(voices[voice_index].GetDescription()))
        else:
            print("音声インデックスが範囲外です。デフォルトの音声を使用します。")

    def speak(self, text):
        self.engine.Speak(text)
(さらに…)
ビジネス

もうGoogleも解説ブログも要らないよね。ChatGPTにHTML、CSSコーディングをやってもらう方法

  • 会話の流れを事前に伝え、こちらからコードを与えることで自分のサイトに即したコードをChatGPTが作ってくれる。
  • コードがあまり読めない場合なども代わりにChatGPTが確認してくれるのでめちゃくちゃ便利。
  • 実際は細かい表示調整が必要になるケースも多いけど、そもそもGoogleや情報ブログが自分に合った答えを教えてくれるわけじゃないのでChatGPTに頼ったほうが楽。

HTMLのマークアップについて教えてください。
私から現在の「HTMLソースコード」、現在の「CSSソースコード」と、私の要望をお伝えします。
要望を取得後、適切な回答を提示してください。

(さらに…)
ビジネス

ChatGPTにStable Diffusionのプロンプトを自動生成するツールの作成を手伝ってもらった

  • コードのリファレンス、サンプルコードの提示、実際のコーディングまでお手の物。
  • コミュ力の高いエンジニアと一緒にリモートで仕事してるみたい。直接回答を聞くだけでなく、話を振るときにこちらの状況も伝えることで自然と回答の精度も上がる。
  • 長いコードも出力してくれるけど途中で切れてしまうみたい。そんなときも処理単位で区切って聞き出すような質問にするといい感じ。会話の流れで判断してくれるので偉い。
  • こうやってできたページがこちらです。

オモやん、JavaScriptを使ってユーザーが選んだ選択肢から自動的に文字列を生成する簡単なツールを作りたい。

ChatGPT
ChatGPT

わかりました。具体的にどのような機能が必要でしょうか?例えば、選択肢には何が含まれるのでしょうか?自動生成される文字列はどのようになるのでしょうか?

選択項目は複数あって、それらの選択項目は例えばポートレート写真の構成要素となるもの。

例えば「カメラアングル」「フォーカスする部位」「背景」「時間帯」「モデルのポーズ」「モデルの表情」「モデルの目線」「モデルの服装」「手足の細かい表現」など。 また、それぞれの選択項目には適切な選択肢の例を挙げてほしい。

自動生成される文字列は、それらの選択肢の内容を英語に翻訳して、それぞれの文字列を「,」で結合したものにしてほしい。

(さらに…)
ビジネス

ChatGPTにこのサイトの「ChatGPTの使い方」ページを作ってもらった

  • テキストライティングは表現などを変えて複数のバリエーションを書き上げることができる。
  • オープンクエスチョンの回答が自然でコミュニケーションが途切れにくい。
  • 発言にちょっとした補足情報など加えるとそれを拾ったリアクションで更に会話のキャッチボールをしてくるのがおもしろい。

今作っているサイトのコンテンツとしてAIチャットの簡単な利用方法などを紹介したい。
ターゲットは一般向けに、スマホやパソコンなどで導入から使い方、ちょっとしたTIPSや応用のアイデアなどを載せたいんだけど、これらのコンテンツを適切に分類するカテゴリはどう設定するのがいいかな?

ChatGPT<br>(GPT-3.5)
ChatGPT
(GPT-3.5)

一般向けの利用方法やTIPSなどをまとめたコンテンツをカテゴリ分けする場合、以下のようなカテゴリが考えられます。

  1. 初めての利用方法
  2. 便利な使い方
  3. 設定のカスタマイズ
  4. よくある質問とその回答
  5. 関連するアプリやツールの紹介
  6. その他のアイデアや応用例

このように、利用目的や内容に基づいてカテゴリを分けることができます。

(さらに…)
ビジネス

ChatGPTにこのサイトのSEO対策について相談してみた

  • オープンクエスチョンの回答の流れが自然
  • 少し否定的な返答に反応して代替案を挙げてくるのがすごい
  • こちらのアイデアの評価などもそれっぽくしてくれる

オモやん、今作っているサイトのSEO対策をざっと行っておきたいんだけど、ポイントはあるかな?

ChatGPT<br>(GPT-3.5)
ChatGPT
(GPT-3.5)

はい、一般的なSEO対策のポイントをいくつか挙げますね。

  1. 適切なキーワードの選定 サイト内で扱うキーワードを適切に選定し、コンテンツ内に適度に配置することで、検索エンジンに対してサイトのテーマを明確に伝えることができます。
  2. ページタイトルの最適化 ページタイトルは、検索エンジンの検索結果ページに表示される重要な要素です。適切なキーワードを含め、短くわかりやすくまとめることが大切です。
  3. メタディスクリプションの作成 メタディスクリプションは、ページタイトルの下に表示される説明文です。適切なキーワードを含め、サイトの内容をわかりやすくまとめることで、検索エンジンの評価を高めることができます。
  4. URLの最適化 適切なキーワードを含むURLを作成することで、検索エンジンに対してサイトのテーマを明確に伝えることができます。また、簡潔でわかりやすいURLを作成することで、ユーザーにとっても利便性が高くなります。
  5. コンテンツの質の向上 検索エンジンは、ユーザーがより役立つ情報を提供するサイトを評価します。そのため、コンテンツの質を向上させ、ユーザーにとって役立つ情報を提供することが大切です。

以上が一般的なSEO対策のポイントです。

(さらに…)
ビジネス

ChatGPTにCSSの書式を聞いてみたら便利すぎた

CSSの書式は答えられる?

ChatGPT<br>(GPT-3.5)
ChatGPT
(GPT-3.5)

はい、答えられます。CSSはCascading Style Sheetsの略で、HTMLなどのマークアップ言語で書かれたコンテンツの見た目を整えるためのスタイルシートです。

CSSの書式は以下のようになります。

selector {
property: value;
}

セレクターはスタイルを適用する要素を指定し、中括弧内にプロパティと値のペアを指定します。プロパティは要素のスタイルを決定するための特性で、値はそのプロパティに設定される値を指定します。

たとえば、以下のように書くことで、背景色を赤色に変更することができます。

body {
background-color: red;
}

また、複数のプロパティを一度に指定することもできます。

h1 {
font-size: 24px;
color: blue;
text-align: center;
}

このようにして、HTML要素のスタイルをカスタマイズすることができます。

(さらに…)
ビジネス

ChatGPTにサイトのFaviconを作る簡単な方法を教えてもらった

  • 「どうすればいい?」「どうかな?」などのざっくりとした質問の回答も上手
  • Webサービスなどの例も挙げてくれるのでネット検索の代わりにも使える
  • とりあえずこのサイトのFaviconができた

サイトのFaviconを作りたいんだけどいい方法はないかな?

ChatGPT<br>(GPT-3.5)
ChatGPT
(GPT-3.5)

Faviconを作る方法はいくつかあります。

Faviconジェネレーターを利用する方法
Faviconジェネレーターと呼ばれるサイトでは、アップロードする画像ファイルを指定するだけで簡単にFaviconを生成することができます。Favicon.ccやFavicon Generatorなどが有名です。

画像編集ソフトを利用する方法
Faviconを作るためには、画像編集ソフトを利用することもできます。PhotoshopやIllustratorなどのプロフェッショナルなツールを使えば高品質のFaviconを作ることができますが、操作が複雑で初心者には難しいかもしれません。

オンライン画像編集ツールを利用する方法
オンライン画像編集ツールも利用することができます。Canva、Pixlr、GIMPなどのオンラインツールは、基本的な操作であれば無料で利用できます。ただし、高度な編集や高品質のFaviconを作るには、有料のプランにアップグレードする必要があるかもしれません。

以上の方法を参考に、自分に合った方法でFaviconを作成してみてください。

(さらに…)
ビジネス

ChatGPTにStable Diffusionのプロンプトを作ってもらった

  • 英語の翻訳も可能
  • Stable Diffusionのプロンプトとしての出来は不明だけど一応通ったから良し
  • とりあえずサイトに掲載するアバターができた
  • Stable Diffusionのプロンプトを生成するツールを作りました。ツールのページはこちら↓
    Stable Diffusion自動プロンプトジェネレータ

Stable Diffusionのプロンプトを作ることはできる?英語が苦手でうまく動かせないんだよね。

ChatGPT<br>(GPT-3.5)
ChatGPT
(GPT-3.5)

はい、もちろんできます。Stable Diffusionのプロンプトを作成するために必要な情報を教えてください。

(さらに…)
スポンサーリンク
タイトルとURLをコピーしました