弊社ホームページを自社で制作しました
こんにちは。代表の高橋です。
会社の事業開始に向けて会社のHPを自社で開発、制作しました。 HP制作で今回利用した技術スタックとして主なものは以下です。
フロントエンド
- Next.js
- Tailwind CSS
- shadcn/ui
CMS
- Contentful
ホスティング環境
- Firebase App Hosting
アイデア壁打ち
- ChatGPT
- Bolt.new
イラストデザイン
- Adobe Firefly
ロゴ制作等
- Brandmark
ReactベースのフレームワークNext.jsを中心としていますが、UIについては統一されたスタイルにしやすいTailwind CSS、そして共通のコンポーネントで再利用しやすいshadcn/uiを用いて構築しています。これによりコードの可読性が良くなり、保守のしやすいフロントエンドのコードになります。 ニュースやブログ記事の管理にはヘッドレスCMS（コンテンツ管理システム）で著名なContentfulを使用しており、柔軟なコンテンツ更新が行えるようにしました。ここで編集したニュースやブログがNext.jsにAPI経由で取得され、描画されるようになっています。
ホスティング環境のクラウド利用ではFirebase App Hostingを今回は使ってみました。Firebase Hostingは今までも私自身で使った経験があったのですが、App Hostingは今回使ったのが初めてで、Google I/O 2024で発表された新しめのサービスで、動的なNext.jsやAngularアプリケーションをデプロイが簡単にできると言われている、フルスタック ウェブアプリ向けのホスティングサービスです。
弊社では現在注目されているAI技術の活用にも積極的に取り組んでおり、ホームページを制作する上での基本的なレイアウトや文言等についてはChatGPTやBolt.newを利用して壁打ちをしながら検討を進めました。また、イラスト作成にはAdobe Fireflyを使っています。AIでは何の情報を学習したかによって商用利用の可否に気を付ける必要がありますが、Adobe Fireflyに関してはAdobeが学習素材に慎重な配慮をしており、ビジネスシーンでの利用も可能となっています。また、ロゴデザインに関してもAIを今回活用してみて試作したもので、BrandmarkでAI生成したアセットを有料購入して利用しています。
画像生成AIとして著名なサービスの一例
サービス名 | 概要 | 商用利用可否 |
|---|---|---|
DALL·E 3（OpenAI） | 高品質なテキストから画像を生成。ChatGPT Plusで利用可能。 | 可（条件付き） |
Midjourney | 高い芸術性と独特なスタイルの画像生成で人気。Discord経由で操作。 | 可（有料プランのみ） |
Stable Diffusion | オープンソースの画像生成AI。ローカル実行も可能。 | 可（モデルにより異なる） |
Adobe Firefly | Adobe製の生成AI。Photoshopなどと連携可能。 | 可（Adobeライセンスに準拠） |
Bing Image Creator | DALL·EベースのMicrosoft提供サービス。 | 可（Adobeライセンスに準拠） |
Canva（AI画像生成） | デザインツールCanva内の画像生成機能。 | 可（Proプラン推奨） |
なお、Adobe Fireflyであっても、ベータ版によって生成したものは商用利用できない制約があるので、この点には注意が必要です。また、上記で商用利用可と書いたStable Diffusionでもimage to imageで生成した画像の場合、元画像の版権が絡んできますので、一概に何でも商用利用できるとは言えません。こういった形で各々のツール、サービスの利用規約を良く確認した上で利用する必要があります。
AIについては日々新しい情報が出てきており、精度もどんどん良くなっていますので、本当に目まぐるしい速さなのですが、キャッチアップしつつ、利用方法をさらに模索していきたいと思います。 今回はホームページ立ち上げに向けて主に上記に挙げた技術スタックを用いておりますが、これが必ずしも最善の組み合わせという訳ではなく、日々より良い方法があれば、ページ改修等のタイミングで入れ替えていきたいと考えております。 弊社ではLP制作に関するご相談を随時受け付けております。 忙しくてホームページの改修や整備に時間が取れない、良い商品やサービスがあるのだがアピールするLPページの制作に時間を割けない、といったお悩みをお持ちでしたら、弊社へ一度ご相談ください。