DIRECTION 01
波を見せる。思想を伝える。
赤い海、青い海、そして自分たちの海。社名の由来を映像の変化に重ねました。最後は穏やかな海へ戻さず、大きなうねりで躍動感を残しています。
OCEAN / BEHIND THE CREATION
サイト制作秘話
AIでつくる。
オーシャンの発想で、
心を動かす。
ロゴも、名刺も、資料も、映像も。AIを制作の全工程に活用し、ブランドの設計から公開・運用の準備まで。このサイトそのものが、私たちの制作事例です。
15秒の映像と、その舞台裏へ
フルAI制作。その中心にあるのは、何を伝え、どう心を動かすか。
目的を決め、表現を選び、完成度を判断するのはオーシャン。AIの生成力と実装力を使い、対話と修正を重ねて形にしました。
01 / THE FILM
15秒に、オーシャンの思想を。
会社の説明を並べるより先に、引き寄せる。海の色、うねり、文字の筆跡、そして「間」で、社名の由来を一本の物語にしました。
無音 / 15秒
00—03 sec 緊張
レッドオーシャンで競争する。
赤い海のせめぎ合いから始め、最初の視線を引き寄せる。
03—05 sec 転換
ブルーオーシャンを探す。
青への転換で、別の可能性が開く感覚をつくる。
05—07 sec 間
その先に、
短い言葉で一拍置き、次の場面を待ちたくなる間をつくる。
07—10 sec 高揚
自分たちだけのオーシャンをつくる。
複数の流れを大きなうねりへ。最後に向けて勢いを高める。
10—15 sec 余韻
AIを、経営の力に。
ロゴと手書きコピーをゆっくり現し、事業の価値へ着地する。
時間帯は構成を説明する目安です。上の映像は、現在のトップページと同じ素材・手書き原画を使った再生デモです。
DIRECTION 02
文字にも、体温を。
整ったフォントだけでは届かなかった印象を、手書き固有の筆跡で表現。下に英語を添え、自由な線と端正な文字組みを組み合わせました。
TYPE STUDY / フォント組みの表現例
AIを、経営の力に。
FINAL / 採用した手書き原画
THE LAST 5 SECONDS
急がずに、印象を残す。
ロゴの登場から、手書きコピー、英語、説明文へ。最後のキャッチは約2秒をかけて浮かび上がり、全体がそろってから約3秒の余韻を保ちます。
- 手書きコピー
- 英語
- 説明文
- 対象企業
無音でも理解できる構成。トップページはPC・スマホそれぞれに映像を用意し、停止・再開や、動きを減らす設定にも配慮しています。
02 / HOW WE CREATE
発想と判断を、AIの実行力につなぐ。
AIが出した最初の案を、そのまま完成にはしない。目的から逆算して選び、直し、確かめる。その繰り返しが、オーシャンの制作手法です。
上段：OCEAN / 発想・判断下段：AI / 生成・実装・検証支援
- 01
企画
伝える価値を決める
構成・表現の案を広げる
- 02
言葉
意味と温度を選ぶ
コピーを比較・推敲する
- 03
画像
人物・構図を演出する
参照画像を使い生成・修正する
- 04
映像
物語と間を設計する
カットを生成・合成する
- 05
実装
導線と体験を整える
HTML・CSS・JSを書く
- 06
検証
品質を判断する
ビルド・表示・配信を照合する
目的に照らして見直す → 指示を具体化する → もう一度つくる
制作環境と、実際に使った手法
Astra / Codex
企画の整理、コピーの比較、ページ構成、HTML・CSS・JavaScriptの実装、ブラウザでの操作確認まで。Astraとの対話で判断を具体化し、Codexを通じてファイル編集・ビルド・公開作業につなげました。
修正のたびに目的へ立ち返り、見た目と実ソースを照合。生成した案を、使える制作物へ仕上げています。
Image 2.5 / 画像制作
ロゴの方向性の検討、ブランドのイメージ、コンサルティング場面などの画像制作にImage 2.5を活用。人物の参照、服装、視線、会議室、光、机上の資料まで具体的に指定しました。
採用した原画を基準に、ワイシャツのロゴやホワイトボードの図など、サイトとつながる細部を調整しています。
Higgsfield / 映像制作・編集
海のカットを生成し、15秒の構成に合わせて編集。赤い海から青い海、独自の大きなうねりへとつなぎ、最後に社名とメッセージを残しました。
人物カットを除き、PCとスマホの画角を分け、手書きの原画・英字・ロゴの登場をそれぞれ調整しています。
HTML / CSS / JavaScript
映像と文字を別のレイヤーで扱い、再生時刻に合わせて濃度を制御。停止・再開・再再生でも演出がずれない構成にしました。
メニュー、FAQ、フォーム、画面幅ごとのレイアウトも実装。動画を再生しない環境でも、必要な情報と相談導線を残しています。
Canva / PowerPoint・PDF
ブランドガイドを共通の基準として、名刺と会社概要資料へ展開。媒体に合わせた文字サイズや余白を整え、Webと営業資料の印象を揃えました。
会社概要は編集可能なPowerPointと配布用PDFを用意。情報を更新しながら使い続けられる形にしています。
Claude / Obsidianへの共有
制作の決定、ソース、素材、検証結果を共有フォルダとObsidianへ記録。Claudeからも同じガイドと経緯を参照できるようにしました。
Web品質の監査手順も再利用できるスキルに整理し、次の制作や修正で判断を引き継げる状態にしています。
03 / ONE BRAND, MANY EXPRESSIONS
クリエイティブを、ひとつのブランドへ。
Webだけで完結させず、ロゴ、名刺、会社概要、映像まで。媒体をまたいでもオーシャンらしさが伝わるように、共通のガイドを制作の基準にしました。
表現を揃えるための、共通言語。
ブランド思想、ロゴの使い方、配色、書体、余白、写真の方向性、Webや資料への展開方法を整理。各媒体へ展開する前に、判断の基準を揃えました。
実装用のデザインガイド「DESIGN.md」と、色・文字・余白の共通設定も整備。AIへ渡す指示にも同じ基準を使うことで、制作物の一貫性を支えています。
ロゴ
社名の由来を「つながる海」へ。方向性の検討から採用原画、Web用サイズやアイコンへの展開まで。
ロゴに込めた想いを見るBUSINESS CARD
名刺
Canvaで縦型・両面の名刺を制作。ロゴ、配色、事業紹介、連絡先の組版を整え、対面で渡すものにも同じブランドを。
会社概要資料
理念、代表の経験、支援領域、進め方、クリエイティブ、制作事例を8ページに。編集用PowerPointと配布用PDFで用意。
WEB / FILM / IMAGE
Web・映像・写真
画面上の情報から、15秒の映像、写真の中の小物まで。共通の色と思想を、それぞれの表現へ展開。
名刺・資料・Webを別々の制作物として終わらせず、事業の強みが一貫して伝わるクリエイティブ一式にまとめました。
04 / DETAILS IN THE IMAGE
写真の中まで、会社らしく。
人物の雰囲気を保ちながら、話す・聴く・描くで場面を変える。写真の中にある小さなものまで、ブランドの一部として考えました。
掲載のコンサルティング場面はAIによるイメージです。実在のお客様との面談記録ではありません。
白いワイシャツの写真を、大きく見る
胸元のロゴ、ペンの刻印、カップの内側、ガラスの波。拡大して、探してみてください。
05 / FIND YOUR OCEAN
真面目なサイトに、
14の遊び心。
気づいた人に、少しだけ笑顔を。海にまつわる小さな仕掛けを、画像や操作の中に忍ばせました。気になるカードを開くと、答えが見られます。
01ホワイトボード話している内容にも、見覚えが。答えを見る ＋
02机上のペーパー紙の上にも、オーシャン。答えを見る ＋
03お茶の時間相談だけでなく、お茶だけでも。答えを見る ＋
FAQのお茶の質問には、小さなカップと湯気。
掲載場所へ04紙の船送信した、その先で。答えを見る ＋
送信完了ページには、小さな紙の船。
掲載場所へ05小さな島道に迷ったら、ひと休み。答えを見る ＋
404ページにも、小さな島とトップへの道案内。
掲載場所へ06隠れた魚ページのいちばん下を探して。答えを見る ＋
TOPフッターの波ボタンを開くと、魚が現れます。
掲載場所へ07灯台地域を照らす、小さな光。答えを見る ＋
地域共創・地方創生のカードに灯台。
掲載場所へ08羅針盤次の一歩の、方向を定める。答えを見る ＋
進め方のSTEP 02には、小さな羅針盤。
掲載場所へ09声と波声の線にも、海がある。答えを見る ＋
AI活用の音声タブに、声から続く波。
掲載場所へ10波紋スクロールの、その足元に。答えを見る ＋
FVのSCROLLにフォーカスすると、小さな波紋。
掲載場所へ11胸元のロゴオーシャンを、身にまとう。答えを見る ＋
12ペンの刻印書く道具にも、さりげなく。答えを見る ＋
13カップの内側外からは、気づきにくい場所。答えを見る ＋
14ガラスの波透ける素材に、海の気配。答えを見る ＋
写真の細部にある4つの仕込みも含めて14個。写真中の表現は生成されたイメージで、実物の商品ではありません。
06 / READY TO GO LIVE
公開するための仕組みまで、AIと。
つくったものを、実際に使える状態へ。ドメインから公開環境、メール、問い合わせの通知まで、必要な設定と確認をつなげました。
- 01 / ADDRESS
ドメインとDNS
独自ドメインの選定・取得手続きを支援。お名前.comでDNSを設定し、Webとメールそれぞれの接続先を整備。
- 02 / HOSTING
公開用サーバー環境
Netlifyにチームとプロジェクトを作成し、サイトを配置。独自ドメインの接続、HTTPS証明書、URLの統一まで確認。
- 03 / DELIVERY
メールと転送
独自ドメインのメールを用意。メール認証、元メールを残す転送、問い合わせ通知を設定し、双方向の送受信を確認。
一通の問い合わせが、届くところまで。
- サイトのフォーム
- Netlify Formsで受付
- 独自ドメインのメール
- 普段使う受信箱へ転送
受付画面の表示だけで終わらせず、通知が転送先の受信トレイに届くことまで試験しました。
改善を続けるための、運用判断。
無料プランで公開を開始し、制作と改善を重ねる中でNetlifyの公開用クレジットの上限に到達。継続して更新できるよう、有料プランへ移行して公開を再開しました。
制作の規模と更新頻度に合わせ、必要な環境を選ぶことも、実装の一部として考えています。
設定したら、実際に確かめる。
DNSの外部反映、HTTPS、メールの認証と転送、通知の実着信を段階ごとに確認。公開後は、配信ファイルと制作物の一致、リンク、画像、動作も照合しています。
設定手順はAIが支援し、契約・決済・本人確認などは本人が実施。担当する役割を分けながら、一連の環境を整えました。
公開基盤で整えた設定と、残した記録
Webの配信
A・CNAME・ネームサーバーの設定、独自ドメイン接続、HTTPS、wwwの正規化。公開物のバックアップと、前の版へ戻すための記録を保存。
メールの配送
MX・SPF・DKIM・DMARCの設定、代表窓口と担当者用のメール、コピーを保持する転送。受信・送信・フォーム通知を実際に確認。
07 / BEHIND THE SCREEN
見えないところまで、制作する。
画面をつくって終わりではなく、公開された状態まで確かめる。見た目と同じように、情報の構造、操作、配信にも手を入れています。
伝わる情報
見出し・HTML・ページの目的
見出しの順序、会社情報、内部リンクを確認。ページごとに主題を整理。
使える操作
メニュー・FAQ・フォーム
キーボード、フォーカス、開閉状態、フォームのラベルと迷惑送信対策を確認。
端末への配慮
画面幅・画像・動画
小さな画面から大画面まで。画像の寸法、読込、動画の停止と再開を確認。
公開物の検証
ビルド・URL・実ブラウザ
生成HTML、リンク、エラー、実際に配信されたファイルを照合。
品質の考え方と、継続して改善すること
「180項目以上」は、文書構造・検索・操作・画像・ソース・配信などの個別監査観点を集計した対象範囲です。全項目の合格数ではありません。確認済み・要改善・未検証を区別し、残る課題も記録します。すべての環境での完全適合を宣言するのではなく、実際の表示と操作を確かめ、改善を続ける方針です。
たとえばトップの手書き見出しは、筆跡を保つ画像表現を採用しています。代替テキストを設定していますが、文字だけの拡大などには制約があります。また、ラボでの速度測定と、実ユーザーの体験は分けて評価します。
08 / CONNECT TO SEARCH
公開してから、見つけてもらうところまで。
会社の情報を整理し、検索サービスにつなぐ。制作と公開後の運用を、ひと続きで考えています。
OCEAN WEBSITE一貫した会社情報と、伝わる内容SEO
検索へ伝える
ページ固有のタイトル・説明文、正規URL、サイトマップ、内部リンクを整備。
AIO
AIにも理解しやすく
何をする会社かを明確に。会社情報の表記と構造化データを整え、情報を読み取りやすく。
SEARCH CONSOLE
登録状況を確かめる
所有権確認、サイトマップ送信、URL検査を実施。トップ・代表紹介の登録を確認。
GOOGLE BUSINESS PROFILE
企業情報を整える
プロフィールを登録し、出張型の事業としてサービス提供地域などを設定。
Google関連は2026年9月14日の操作・確認記録に基づきます。検索順位の上昇、すべてのページの登録、AIによる引用を保証するものではありません。
NEXT / YOUR OWN OCEAN
あなたの事業には、
まだ表現できる価値がある。
会社の強みを見つけ、伝わる言葉と映像にする。
AIを使って形にし、動く仕組みとして届ける。
構想から実行まで、オーシャンが一緒に進めます。