大阪のWEB制作会社｜ブレーメン株式会社
Webサイト制作の流れ
flow
5つのフェーズと22のステップで育む、
世界に一つだけのWEBサイト。
- らしさ設計フェーズ
- 01. 対話と観察（ヒアリング&リサーチ）
02. 在り方の抽出
03. ブランドの人格化
04. らしさの言語化
- 戦略立案フェーズ
- 05. リサーチ
06. バリュープロポジション分析
07. 戦略立案
- 企画設計フェーズ
- 08. ブランドコミュニケーション企画
09. コンテンツ企画
10. ビジュアル企画
11. 情報設計
12. 画面設計
13. コンテンツ設計
14. システム設計
- 制作フェーズ
- 15. コピーライティング・文章作成・翻訳
16. 撮影・イラストレーション
17. デザイン
18. フロントエンド開発
19. バックエンド開発
20. テスト・検収・公開
- 運用フェーズ
- 21. 保守メンテナンス
22. 運用コンサルティング
らしさ設計フェーズ
企業の在り方・らしさ・存在意義を問い、言語化するフェーズです。
01対話と観察（ヒアリング&リサーチ）
企業やブランドの外側に現れている振る舞いや言葉を観察し、内側にある考えや価値観を対話を通じて探るステップです。
代表者やキーパーソンとの本質的な対話を通じて、日常的な言葉の背景にある思想や感覚を引き出し、まだ言語化されていない「らしさ」の輪郭を見つめます。
メディアでの発言、社内文化、サービス設計など、外在的な情報も合わせて観察し、ブランドの核に近づくための初期的な仮説を構築します。
02在り方の抽出
対話や観察から得られた情報を整理し、ブランドがどのような存在であるべきかという「在り方」を言語的・構造的に整理するステップです。
企業が社会や顧客に対してどのような役割を担い、どんな価値を提供しようとしているのかを明らかにし、パーパスや価値観などの軸を浮かび上がらせます。
WHY（存在理由）やWHO（誰のために）などの視点から、思考の方向性を定めていきます。
03ブランドの人格化
ブランドに人格的な特徴を与えるステップです。
ユング心理学に基づくブランドアーキタイプなどのフレームを用いながら、企業の感情・態度・美意識・振る舞いを整理し、「らしさ」の印象を視覚・言語・体験に落とし込むための基礎をつくります。
「もしこのブランドが人だったら、どんな話し方で、どんな距離感で、何を嫌うか」といった視点から、表現の軸となる人格を描き出します。
04らしさの言語化
抽出された在り方と人格をもとに、ブランドの「芯」を言葉として表現するステップです。
ブランドステートメントやタグライン、パーパス文などの草案を通じて、らしさや存在意義を言葉に定着させます。
単なる説明ではなく、内面の美意識や価値観がにじむ言葉選びを重視し、以後の戦略や表現の共通言語となるような“芯の言葉”を見出します。
戦略立案フェーズ
調査と洞察をもとに、目指す成果とブランドの振る舞いを構想するフェーズです。
05リサーチ
代表者やキーパーソンとの本質的な対話を通じて、日常的な言葉の背景にある思想や感覚を引き出し、まだ言語化されていない「らしさ」の輪郭を見つめます。
メディアでの発言、社内文化、サービス設計など、外在的な情報も合わせて観察し、ブランドの核に近づくための初期的な仮説を構築します。
06バリュープロポジション分析
対話や観察から得られた情報を整理し、ブランドがどのような存在であるべきかという「在り方」を言語的・構造的に整理するステップです。
企業が社会や顧客に対してどのような役割を担い、どんな価値を提供しようとしているのかを明らかにし、パーパスや価値観などの軸を浮かび上がらせます。
WHY（存在理由）やWHO（誰のために）などの視点から、思考の方向性を定めていきます。
07戦略立案
成果目標を達成し得る戦略を具体的に考えるステップです。
デジタルチャネルを活用し、企業やブランドのメッセージを効果的に伝え、選ばれるブランドになるための戦略を考えます。
カスタマージャーニーマップなどの整理を通して、ターゲットオーディエンスを考慮したデジタルチャネルの選定、コミュニケーションツールの選定、WEBサイトの役割の明確化を行います。
企画設計フェーズ
設計に基づき、キャッチコピー、文章、写真、動画、イラスト、デザイン、プログラムを実際に制作するフェーズです。
08ブランドコミュニケーション企画
WEBサイトの役割とUSP（Unique Selling Proposition: 競合他社にないブランド独自の価値）を照らし、WEBサイトで伝えるメッセージやストーリー、イメージなどの表現の方向性を固めます。
ロゴやブランドアイデンティティ、タグラインやステートメントの開発が必要な場合、このステップで行います。
09コンテンツ企画
WEBサイトの役割や目標を考慮し、掲載するコンテンツの種類やトーン、ストーリーやメッセージなどの方針を企画します。
種類は、原稿や記事、動画に画像、イラストからインフォグラフィック、ドキュメントやフォームなど多岐に渡ります。
トーンについても、第三者のプロが作成したものなのか、お客様の生の声なのか、詩的で世界観が伝わるメッセージなのか、具体的で科学的なデータや事実を示すメッセージなのか、など多岐に渡ります。
ターゲットオーディエンスのニーズや興味を考慮し、ユーザー体験を向上させるためのコンテンツやストーリーを考える、重要なステップです。
10ビジュアル企画
デザインに入る前に、ビジュアルデザインの方向性を明確にするためのステップです。
ブランドアイデンティティを軸に、ブランドイメージに沿ったWEBデザインのコンセプトやトーン＆マナーを企画します。
ムードボードや参考サイトを使いながら、双方の頭の中で描かれている抽象的なイメージのすり合わせを行い、ブランドイメージの枠からそれていないか、ユーザーに対して適切なメッセージを伝えられるものか検討を行います。
最終的には、色彩、フォント、レイアウト、エフェクト、アニメーションなどの方針を明確にし、ブランドの個性や魅力を効果的かつ一貫して表現できる基準を作ります。
11情報設計
WEBサイトのページ数や導線などの構造を設計するステップです。
サイトマップ、ディレクトリマップの作成を通して、情報アーキテクチャやナビゲーションを設計し、ユーザーが必要な情報を効率的に見つけられるように設計します。
要件に応じて、ユーザーフローチャートの作成や、検索エンジン（Googleなどのロボット）向けの構造化データの設計、タイトルやディスクリプションというメタ情報の設計もここで行います。
12画面設計（ワイヤーフレーム）
ワイヤーフレームと呼ばれる画面設計図を作成するステップです。
各ページで掲載するコンテンツや機能を整理し、優先順位に応じてレイアウトを設計、プロトタイプを作成します。
ユーザーがどのページからWEBサイトに入り、どう流れてお問い合わせや資料請求などのコンバージョンにつながるのか、ユーザーフローチャートに則って吟味を重ね、要点を固めていきます。
13コンテンツ設計
Step06で企画したコンテンツをワイヤーフレームに充て、各ページのセクションやコピーを具体的に設計します。
どのように掲載するとユーザーの理解が進み、フローチャートに則った行動を促せるか、ユーザー心理に寄り添いながら設計していきます。
要件によっては、Step09と合わせて行うことも多く、またこの段階でライティングまで進めてしまうことも多いです。
14システム設計
機能要件に基づき、WEBサイトの技術的な構造や機能を設計し、開発作業のための仕様を定義します。
サーバー、CMS、API、プラットフォーム、データベース、セキュリティ、アクセシビリティなどの設計が含まれます。
※コーディングガイドライン、セキュリティガイドライン、アクセシビリティガイドラインがある場合、事前にご提供ください。
制作フェーズ
企画設計に則り、言葉・ビジュアル・機能を形にするフェーズです。
15コピーライティング・文章作成・翻訳
WEBサイトの文章（キャッチコピー、見出し、本文）を作成し、必要に応じて翻訳を行います。
ライターのアサインを推奨しますが、予算に応じてAIライティングの活用や原稿はご支給いただく方針を検討します。
※納品後のPRや広告運用のことを考えると、少なくとも、トップページのキービジュアルで用いるキャッチコピーだけでもコピーライターへ依頼することを推奨します。
16撮影・イラストレーション
デザインの素材となる、写真撮影、動画撮影、イラストの作成を行います。
カメラマンやイラストレーターのアサインを推奨しますが、予算に応じてストックフォトの利用なども検討します。
※要件によってはデザイン後に撮影を行います。
17デザイン
企画設計フェーズで固めたコンセプトに倣い、ブランドイメージに合ったビジュアルデザインを構築します。
コンセプトに則ったデザイン案の提示を行うため、原則として複数案の提示は行っていません。
18フロントエンド開発
デザインデータをWEB上で閲覧できるよう、プログラムで変換するコーディング作業です。
HTML / CSS / JavaScriptなどの言語を用いてデザインデータの再現を行なっていきます。
GSAPなどを用いたアニメーション、慣性スクロールやパララックスエフェクト、Three.jsなどを用いた3D表現、SPA（Single Page Application）形式のシームレスなページ遷移、アクセシビリティ対応など、要件に応じて実装していきます。
19バックエンド開発
管理機能（CMS）や検索機能の実装、分析ツールの導入や設定など、表からは見えないWEBサイトの機能面（バックエンド / サーバーサイド）の開発を行います。
要件にもよりますが、PHP / JavaScriptなどの言語が中心で、CMSへの組み込みや外部ツールとのAPI連携が必要な場合もこちらのステップで実装します。
※WordPress / MovableType / PowerCMS / MicroCMS / EC-CUBE / Shopify / FutureShop / Makeshop / GoogleAnalytics (GA4) / SearchConsole / Google Tag Manager (GTM) / Microsoft Clarity など
20テスト・検収・公開
デザイン通りの見た目になっているか、機能面は問題なく動くか、計測ツールは機能しているかなど、入念な最終チェックを行います。
これらのテストや検収作業は、関係者のみ閲覧ができるテスト環境で行い、問題がないことが確認でき次第、一般公開をさせていただきます。
必要に応じてアクセシビリティの検査などもこのタイミングで実施します。
運用フェーズ
運用と改善を通し、ブランドとユーザーの関係を育むフェーズです。
21保守メンテナンス
公開後のWEBサイトを安定して運用し続けるための、技術的な保守・管理を行うステップです。
CMSやプラグイン、サーバー環境のアップデート対応をはじめ、不具合の修正やセキュリティ対策、バックアップ管理などを継続的に行います。
見た目や機能を「作って終わり」にせず、安心して使い続けられる状態を保つことで、ブランドとユーザーの接点を支え続けます。
22運用コンサルティング
公開後のWEBサイトを起点に、ブランドとユーザーの関係を育てていくための改善・伴走支援を行うステップです。
アクセス解析なのデータをもとに、コンテンツの改善提案や導線の見直し、表現の調整などを行い、目的や成果に向けた運用を支援します。
事業やブランドの変化に応じてWEBサイトの役割を捉え直し、「今、伝えるべきことは何か」を共に考えながら、継続的な成長につなげていきます。
お見積もりはこちらから
［WEB制作］についてお気軽にご相談ください
Warning: require_once(../../assets/parts/works/slide.php): Failed to open stream: No such file or directory in /home/bremen/bre-men.jp/public_html/test/public_html/web/creation/flow/index.php on line 200
Fatal error: Uncaught Error: Failed opening required '../../assets/parts/works/slide.php' (include_path='.:/opt/php-8.3.21/data/pear') in /home/bremen/bre-men.jp/public_html/test/public_html/web/creation/flow/index.php:200 Stack trace: #0 {main} thrown in /home/bremen/bre-men.jp/public_html/test/public_html/web/creation/flow/index.php on line 200