2025年3月末に登場したモデル「gpt-image-1」。完全ではないものの、日本語を生成できるようになった初めての画像生成モデルです。 「gpt-image-1」で生成できるフォントは何か？ その疑問を解消するため、実際にSoraで画像生成した結果を共有します。
フォントは「人の声」のような存在です。商品やサービスの人格・世界観を表現するために、フォント選びはとても重要です。また、「文字の大きさ」 = 「声の大きさ」です。あなたの打ち出したい印象で、フォントと文字サイズを決めることで、より共通認識を生みやすくなります。
OpenAI o3 で調査し、Gemini のCanva機能で生成しました。o3 が生成したコードはとても長いため、noteの最下部に記載します。 OpenAI Sora でフォントを生成しました。 ChatGPT、Sora のその他の生成事例はこちら gpt-image-1 はChatGPTやSoraの他に「MiriCanvas」というデザインツールでも使うことができます。文字、背景、イラスト、写真など、あらゆる画像生成が可能なので、デザインツール上で全て作りたい人にはオススメです。 https://www.miricanvas.com/s/2628
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: フォント名GoogleとAdobeが共同開発したオープンソースフォントファミリー「Noto」の日本語版サンセリフ体（ゴシック体）です。「あらゆる言語で文字化け（豆腐）をなくす」ことを目標に作られており、Webサイトの本文からUIまで、あらゆるデジタルデバイスで非常に使いやすいのが特徴です。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Noto Sans JP上記「Noto」ファミリーの日本語版セリフ体（明朝体）です。Noto Sans JPと同様にGoogleとAdobeによって開発されました。優雅で落ち着いた印象を与え、Webサイトや電子書籍などで長文を読ませたい場合に適しています。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Noto Serif JP字游工房が開発した、可読性の高さを追求したゴシック体です。「時代小説が組めるような明朝体」を目指した游明朝と共にデザインされ、すっきりとしていながらも温かみのあるデザインが特徴です。WindowsやmacOSにも標準搭載されており、ビジネス文書からWebまで幅広く使われます。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Yu Gothic游ゴシックと同じく字游工房によって開発された明朝体です。小説などの長文でも読み疲れしないように設計されており、上品で知的な印象を与えます。書籍の本文やフォーマルな文書に適しています。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Yu MinchoSCREENグラフィックソリューションズが開発した、現代的でシャープなデザインのゴシック体です。macOSに標準搭載されていることで広く知られ、クリアで視認性が高いため、広告やポスターの見出しからWebサイトの本文まで、プロのデザイナーに愛用されています。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Hiragino Kaku Gothic ProN独立行政法人情報処理推進機構（IPA）が配布するオープンソースのフォントです。JIS X 0213:2004の文字セットに対応しており、公共の文書やソフトウェアへの組み込みなど、無償で幅広く利用できることを目的としています。クセのない標準的なゴシック体です。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: IPAex Gothic森下浩司氏が中心となって開発しているオープンソースフォント「M+ FONTS」に、丸みを加えたフォントです。モダンで直線的な骨格と、角の丸みが組み合わさり、優しく親しみやすい印象を与えます。Webサイトやアプリ、ゲームのUIなどで人気があります。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: M PLUS Rounded 1cフォントデザイナーのArtakana氏によって制作された、非常に太くインパクトの強いデザインフォントです。ビデオゲームのロゴや見出し、サムネイルなど、力強さや遊び心を表現したい場面で大きな効果を発揮します。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Dela Gothic OneGoogle Fonts向けにモトヤが開発した丸ゴシック体フォントです。伝統的な日本の丸ゴシック体をベースにしており、低解像度のスクリーンでも読みやすいように設計されています。親しみやすく柔らかな雰囲気で、Webサイトやアプリに適しています。
- text: "あいうえお↵アイウエオ↵漢字12345"
- background: white
- font: Kosugi Maru- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: フォント名1957年にスイスのハース鋳造所でマックス・ミーディンガーとエドゥアルト・ホフマンによって制作されました。簡潔で読みやすく、汎用性が高いため、企業のロゴ（例: BMW, TOYOTA）から公共のサインまで、あらゆるデザインで使用されるサンセリフ体フォントの代表格です。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Helvetica1927年にドイツのデザイナー、パウル・レナーによって設計されました。幾何学的な形状（円、三角形、正方形）を基にしており、モダンで洗練された印象を与えます。ファッションブランドのロゴ（例: Louis Vuitton）や見出しに適しています。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: FuturaRasmus Anderssonによって、特にコンピューターの画面上で高い可読性を実現するために設計された比較的新しいフォントです。UI（ユーザーインターフェース）デザインでの使用を主眼に置いており、小さなサイズでも文字が潰れにくく、クリアに表示されます。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Inter1931年にイギリスのタイムズ紙が新聞用フォントとしてスタンリー・モリスン監修のもと、ヴィクター・ラーデントによって制作しました。伝統的で信頼感のある印象を与え、論文や公式な文書など、長文の印刷物に適したセリフ体フォントです。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Times New Roman1996年にマシュー・カーターによってマイクロソフト社のためにデザインされました。コンピューターの低解像度スクリーンでも読みやすいように設計されたセリフ体フォントです。Webサイトの本文など、オンラインでの長文に適しています。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Georgiaハワード・ケトラーがIBMのタイプライター用に設計した「Courier」を元に、エイドリアン・フルティガーがデジタル向けに調整したフォントです。すべての文字が同じ幅を持つ等幅フォントであり、プログラミングのコードや脚本、事務的な書類などでよく使われます。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Courier NewAdobeがオープンソースで公開しているフォントで、ポール・D・ハントによってデザインされました。プログラマーがソースコードを読みやすくするために特化しており、文字の識別性（特に0とO、1とlなど）が高いのが特徴です。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Source Code Pro18世紀後半の啓蒙時代に見られた、ジョン・バスカヴィルなどの活字から影響を受けたクラウス・コルテシ・デ・イェーガーによるデザインです。エレガントでコントラストが強く、見出しやタイトルに使うと華やかな印象になります。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Playfair Displayパブロ・インパラリによってデザインされた、手書きの筆記体をベースにしたフォントです。大胆で親しみやすい雰囲気があり、ロゴやポスター、SNSの画像などで目を引くアクセントとして人気があります。
- text: "The quick brown ↵ fox jumps over ↵ the lazy dog↵1234567890"
- background: white
- font: Lobster- "ChatGPTでデザインを生成"という文字をデザイン違いで6パターン生成してください。
- 背景は白
- 1枚に6パターンのデザインを生成
1. 光彩を取り入れた派手な文字
2. ツヤのある3D文字
3. 黄金でキラキラしている文字
4. 水で作られた文字
5. フチ文字のポップな文字
6. 赤いボックスを強調したい部分に敷いた文字ChatGPT、Sora のその他の生成事例はこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Specimen Poster</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Importing specified web fonts from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Inter:wght@400;600;700&family=Kosugi+Maru&family=Lobster&family=M+PLUS+Rounded+1c:wght@400;600;700&family=Noto+Sans+JP:wght@400;600;700&family=Noto+Serif+JP:wght@400;600;700&family=Playfair+Display:wght@400;600;700&family=Source+Code+Pro:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* General body styling */
body {
background-color: #f0f0f0;
font-family: 'Inter', sans-serif;
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
align-items: flex-start; /* Align to the top */
}
/* Poster container for screen viewing */
.poster {
background-color: #FFFFFF;
width: 100%;
max-width: 1400px; /* Optimized width for standard screens */
padding: 4rem; /* Adjusted padding */
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
box-sizing: border-box;
border-radius: 8px;
}
/* Main Title Styling */
.main-title {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 48px; /* Adjusted size for screen */
font-weight: 700;
text-align: center;
color: #111111;
margin-bottom: 60px; /* Adjusted margin */
}
/* Container for the two columns */
.specimen-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
gap: 80px; /* Increased gap between columns for clarity */
}
/* Column header styling */
.column-title {
font-size: 28px;
font-weight: 700;
color: #111111;
border-bottom: 2px solid #eee;
padding-bottom: 12px;
margin-bottom: 32px;
}
/* Styling for each font specimen block */
.font-item {
margin-bottom: 40px; /* Adjusted margin */
}
/* Styling for the font name */
.font-name {
font-size: 24px; /* Adjusted size */
font-weight: 600;
color: #111111;
margin: 0 0 8px 0; /* Adjusted margin */
}
/* Styling for the sample text */
.font-sample {
font-size: 18px; /* Adjusted size */
color: #333333;
margin: 0;
line-height: 1.6;
word-break: break-all; /* Prevents long text from overflowing */
}
/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
.specimen-container {
grid-template-columns: 1fr; /* Stack columns on smaller screens */
gap: 60px;
}
.poster {
padding: 2rem;
}
.main-title {
font-size: 36px;
}
}
</style>
</head>
<body>
<div class="poster">
<!-- The title of the poster -->
<h1 class="main-title">Font Specimen (2025-06-07)</h1>
<!-- The grid containing all the font specimens -->
<div class="specimen-container">
<!-- Left Column: Latin Fonts -->
<div class="font-column">
<h2 class="column-title">Latin Fonts</h2>
<div class="font-item">
<p class="font-name" style="font-family: 'Helvetica', 'Arial', sans-serif;">Helvetica</p>
<p class="font-sample" style="font-family: 'Helvetica', 'Arial', sans-serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Futura', 'Century Gothic', sans-serif;">Futura</p>
<p class="font-sample" style="font-family: 'Futura', 'Century Gothic', sans-serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Inter', sans-serif;">Inter</p>
<p class="font-sample" style="font-family: 'Inter', sans-serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Times New Roman', Times, serif;">Times New Roman</p>
<p class="font-sample" style="font-family: 'Times New Roman', Times, serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Georgia', serif;">Georgia</p>
<p class="font-sample" style="font-family: 'Georgia', serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Courier New', Courier, monospace;">Courier New</p>
<p class="font-sample" style="font-family: 'Courier New', Courier, monospace;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Source Code Pro', monospace;">Source Code Pro</p>
<p class="font-sample" style="font-family: 'Source Code Pro', monospace;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Playfair Display', serif;">Playfair Display</p>
<p class="font-sample" style="font-family: 'Playfair Display', serif;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Lobster', cursive;">Lobster</p>
<p class="font-sample" style="font-family: 'Lobster', cursive;">The quick brown fox jumps over the lazy dog 1234567890</p>
</div>
</div>
<!-- Right Column: Japanese Fonts -->
<div class="font-column">
<h2 class="column-title">Japanese Fonts</h2>
<div class="font-item">
<p class="font-name" style="font-family: 'Noto Sans JP', sans-serif;">Noto Sans JP</p>
<p class="font-sample" style="font-family: 'Noto Sans JP', sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Noto Serif JP', serif;">Noto Serif JP</p>
<p class="font-sample" style="font-family: 'Noto Serif JP', serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', sans-serif;">Yu Gothic</p>
<p class="font-sample" style="font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;">Yu Mincho</p>
<p class="font-sample" style="font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;">Hiragino Kaku Gothic ProN</p>
<p class="font-sample" style="font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'IPAexGothic', sans-serif;">IPAex Gothic</p>
<p class="font-sample" style="font-family: 'IPAexGothic', sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'M PLUS Rounded 1c', sans-serif;">M PLUS Rounded 1c</p>
<p class="font-sample" style="font-family: 'M PLUS Rounded 1c', sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Dela Gothic One', cursive;">Dela Gothic One</p>
<p class="font-sample" style="font-family: 'Dela Gothic One', cursive;">あいうえおアイウエオ漢字12345</p>
</div>
<div class="font-item">
<p class="font-name" style="font-family: 'Kosugi Maru', sans-serif;">Kosugi Maru</p>
<p class="font-sample" style="font-family: 'Kosugi Maru', sans-serif;">あいうえおアイウエオ漢字12345</p>
</div>
</div>
</div>
</div>
</body>
</html>