BlueGriffonというホームページ作成ツール |画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/n304b5f63db5f
BlueGriffon(ブルーグリフォン)とは
BlueGriffonは、オープンソースの「WYSIWYG HTMLエディタ」です。かつては「革新的」と評される特徴をいくつか持っていました。HTML5とCSS3対応しています。WYSIWYGは「ウィジウィグ」と読みます。編集画面で見たままのデザインが、そのまま実際のWebページや印刷物として出力されるタイプのツールです。今のホームページ作成の主力が「テキストエディタ + ブラウザ」でWebブラウザで確認しながら進めていくので一時的には頭の中でどんなイメージかを思い浮かべながら補完してテキストエディタにhtml、cssをコードで修正しています。そんな時、BlueGriffonを使うと補完していたイメージを実際のWebページとして見ることが出来ます。なんといってもこのソフトの良いところは起動が速い、動きも速い。ホームページビルダーみたいに遅くないところが良いですね。
1. 概要:
開発者: Daniel Glazman氏(元Netscape/Mozillaのエンジニアで、CSSワーキンググループの共同議長も務めた人物)が中心となって開発されました。
レンダリングエンジン: Firefoxと同じGeckoレンダリングエンジンを搭載しています。これにより、Firefoxで表示した際とほぼ同じ見た目で編集作業ができました。
対応OS: Windows, macOS, Linuxで動作するクロスプラットフォーム対応です。
ライセンス: MPL (Mozilla Public License) / GPL (GNU General Public License) / LGPL (GNU Lesser General Public License) のトリプルライセンスで提供されていました。基本機能は無料で利用でき、一部高度な機能は有料アドオンとして提供される形式でした。
2. 革新的とされた点(リリース当時):
HTML5とCSS3への早期対応: BlueGriffonが登場した2010年代初頭は、HTML5とCSS3がまだ新しい技術でした。多くのWYSIWYGエディタが古いHTML規格に留まる中、BlueGriffonはこれらの新しいウェブ標準に積極的に対応し、モダンなウェブサイト制作をWYSIWYG環境で実現しようとしました。
SVGエディタの統合: ベクターグラフィック形式であるSVG(Scalable Vector Graphics)を編集するためのエディタ「Caikoo」を統合(またはアドオンとして提供)し、Webページ内で直接SVGを扱えるようにしました。
EPUB出力: Webページだけでなく、電子書籍フォーマットであるEPUB形式での出力にも対応していました。
アクセシビリティへの配慮: WAI-ARIA属性の編集など、ウェブアクセシビリティに配慮した機能も搭載していました。
3. 主な機能・特徴:
直感的なドラッグ&ドロップ操作によるページレイアウト。
テキスト、画像、表、フォームなどの要素の簡単挿入・編集。
CSSスタイル(色、フォント、余白など)の視覚的な設定。
HTML5の新しい要素(<article>, <nav>, <video>など)のサポート。
CSS3の新しいプロパティ(角丸、影、グラデーションなど)のサポート。
ソースコード表示・編集機能(WYSIWYGとコードビューの切り替え)。
アドオンによる機能拡張(テンプレート、CSSユーティリティ、プロジェクト管理など)。
4. メリット:
直感的な操作: HTMLやCSSの知識が浅い初心者でも、比較的簡単にWebページを作成できます。
無料: 基本機能は無料で利用可能です。
標準準拠: Geckoエンジンにより、Web標準に準拠したコード生成が期待できました。
5. デメリット・現在の状況:
開発の停滞: 残念ながら、BlueGriffonの開発は近年停滞しているように見受けられます。公式サイトの更新も少なく、新しいバージョンも長らくリリースされていません(2023年時点)。
現代のWeb制作との乖離: React、Vue.js、AngularといったJavaScriptフレームワークや、JamstackのようなモダンなWebサイト構築手法が主流の現代においては、BlueGriffonのような伝統的なWYSIWYGエディタの役割は限定的になっています。
生成コードの最適化: WYSIWYGエディタ全般に言えることですが、手書きのコードに比べて冗長なコードが生成される場合がありました。
複雑なデザインや動的な機能への限界: 高度なインタラクションや複雑なレイアウト、サーバーサイドとの連携などは苦手としています。
結論として:
BlueGriffonは、リリース当時はHTML5/CSS3へいち早く対応した革新的なWYSIWYGエディタの一つでした。特に、Web標準への意識が高い開発者によって作られた点は評価できます。
しかし、Web技術の進化と開発の停滞により、現在では主流のWeb制作ツールとは言えなくなっています。もしこれからWebデザインを学ぶのであれば、以下のようなツールや学習方法を検討する方が現代的かもしれません。
WYSIWYGの読み方と意味
WYSIWYG は「ウィジウィグ」と読みます。
これは、"What You See Is What You Get" の頭文字を取ったもので、「あなたが見ているものが、あなたが得るものである」という意味です。
つまり、編集画面で見たままのデザインが、そのまま実際のWebページや印刷物として出力されるタイプのソフトウェアや編集方式を指します。プログラミングの知識がなくても、直感的にデザインを作成できるのが大きな特徴です。
CMS (Contents Management System): WordPressなど。プログラミング知識が少なくても高機能なサイトを構築・運用できます。
ノーコード/ローコードWebサイトビルダー: Wix, Squarespace, STUDIO, Webflowなど。より洗練されたUIでデザイン性の高いサイトが作れます。
テキストエディタ + ブラウザ: VS Codeなどの高機能テキストエディタでHTML, CSS, JavaScriptを直接記述し、ブラウザで確認しながら制作する(本格的なWeb開発の基本)。
もし、シンプルな静的HTMLページをオフライン環境で素早く作りたい、あるいは古いWebサイトの簡単な修正を行いたいといった特定の目的であれば、BlueGriffonがまだ役立つ場面もあるかもしれません。
ご参考になりましたでしょうか?
BlueGriffon - 無料・ダウンロード
https://bluegriffon.softonic.jp/
下記のページをリニューアルしてみました。これにはcssのコードを作成するのにGemini2.5 Proを使っています。また確認のためにBlueGriffonを使っています。
田園みどり共生国(表組でレイアウトを作成)
https://www2s.biglobe.ne.jp/~ouji/oldindex.html
田園みどり共生国(cssでレイアウトを作成)
https://www2s.biglobe.ne.jp/~ouji/