Home→Service→モデルケース - Webサイト制作

モデルケース

Webサイト制作

Webサイトを成功に導くルート・シーの3つの強み

ヒアリング+調査結果に基づいたサイト設計

サイト制作前にお客様へのヒアリングや既存サイトの分析、競合調査などから、お客様のサイト目的を達成するプランを立てます。

よりターゲットに響くサイト設計を行うために、必要に応じてペルソナの設定やヒューリスティックテスト(オプション)を実施することも可能です。

Web標準に準拠したサイト開発

Web標準とは、主にW3C*によって勧告された標準的なWeb関連技術の総称です。Web標準に準拠することにより、Web本来の価値を引き出し、その恩恵を受けることができます。そのひとつがアクセシビリティの確保です。未来のハードウェア(デバイス)・ソフトウェア(ブラウザ)にもおのずと対応できる柔軟性を備えることができます。また、標準に準拠していることでコンテンツの再利用性が高まります。このことはメンテナンス性の向上にもつながります。

その他、ルート・シーでは対応するすべてのブラウザで、チェックシートを用いた品質検証を実施するなど、高品質なサイトの提供に努めています。

  • W3Cとは、Webで使用される各種技術の標準化を推進する為に設立された国際的な非営利団体です。

初期構築からシステム開発、運用までワンストップで対応

ルート・シーではサイトの企画・制作だけでなく、CMS*の導入や各種フォームの設置といった比較的ニーズの高いシステム構築から、ご要望に応じたフルスクラッチでのシステム開発が可能です。

サイト公開後も月次での更新作業や定期的なアクセスログ解析、その解析結果をもとにした改善提案をお任せいただくことも可能です。

  • CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。ルート・シーではMovable TypeやWordPressといったパッケージ商品をカスタマイズして導入することも、フルスクラッチで構築することも可能です。

多様化するデバイスに対応する制作手法

レスポンシブWebデザイン

PC・タブレット・スマートフォンなどの各種デバイスへの対応としまして、ルート・シーではレスポンシブWebデザイン*という制作手法を推奨しています。マルチデバイスを超えたマルチスクリーンな時代になりつつある“今”にフィットした、汎用的で未来志向な制作手法です。

デバイスごとの専用サイトとは異なり、ワンソース(1つのHTMLファイル)で情報管理できるためサイトの運用性が高まり、SEOにも有効であるといわれています。

各デバイスの専用サイト

デバイスごとに独自の内容を訴求したい場合など、要件によってはPCとスマートフォンなど、それぞれのデバイスに最適化したサイトを用意した方が効果的なケースもあります。

レスポンシブWebデザインとは異なり、各デバイスに合わせて個別にデザインや機能を実装することが可能です。

  • レスポンシブWebデザインとは、ブラウザのウィンドウ幅つまり各デバイスサイズに応じて、レイアウトを切り替えて表示する制作手法です。汎用的な手法であるため、Webの閲覧環境が多様化する現代、そして今後さらに多様化していくことが予想される未来に柔軟に対応できます。

ワークフロー

1
戦略立案

ヒアリング

お客様の現状の課題やサイトの構築目的をお伺いします。その他、大まかなコンテンツイメージやご希望の公開日、ご予算などを確認します。

調査・分析

既存サイトの分析や競合サイトとの比較などから、サイトの使われ方やユーザーニーズの高い情報を調査し、より効果的なサイト構築プランを導き出します。

企画・提案

ヒアリング内容や調査内容をもとに、Webサイトの企画・提案をさせていただきます。制作内容の決定後、公開までの制作スケジュールとお見積りを作成します。

2
情報設計

要件定義

制作するサイトの対応ブラウザやHTMLの規格などのデザイン要件や、開発する機能やCMSなどのシステム要件、その他インフラ要件などをお客様と固めます。

サイト構造設計

サイトのターゲットや訴求内容、コンバージョンに至るまでのシナリオを用意し、それをもとにサイト構造を設計します。

ワイヤーフレーム作成

各ページの大まかなレイアウトや導線配置、テキスト、写真などの必要な要素を記載したワイヤーフレームを作成し、各ページの構成内容を確定します。

3
デザイン

ビジュアルデザイン

トップページの画面デザインを作成し、そちらでデザインテイストを固めた上で、下層ページや他デバイスのデザインを進めます。

デザイン設計

ポジショニングマップやムードボードを作成し、お客様とデザインの方向性をすり合わせた上で、デザインを進めていくことも可能です。

素材作成

必要に応じて取材やライティング、撮影、翻訳、イラストなどの素材作成も承ります。(オプション)

4
開発

フロントエンド設計・実装

HTML・CSSによるユーザインターフェースの開発やJavaScriptによる機能開発を行い、実装します。

システム設計・実装

必要に応じて、お問い合わせフォームや新着情報などのCMSのシステムを構築します。

5
テスト

品質検証

実装完了後、チェックシートを用いて各対応ブラウザや検証端末で品質検証を行います。

テスト確認

テスト環境下でお客様に表示や動作に不具合がないかご確認いただきます。お問い合わせフォームやCMSを設置する場合は、テスト入力していただき、ご確認いただきます。

6
納品・運用

本番公開

実装完了後、チェックシートを用いて各対応ブラウザや検証端末で品質検証を行います。

サイト運用

公開後、必要に応じてサイト更新やアクセスログの定期レポートの作成も承ります。(オプション)

制作期間・制作費の目安

レスポンシブWebデザインによるサイト構築

実施内容 お問い合わせフォームを含めた15ページ程度のコーポレートサイトの制作を想定。マルチデバイス対応。
ポイント 各デバイスに適したレイアウトを表示。サイト更新や管理などの運用負荷が少ない。
制作期間 約3.5ヶ月~
制作費用 約250万円~

各デバイスの専用サイトを構築

実施内容 お問い合わせフォームを含めた15ページ程度のコーポレートサイトの制作を想定。PCのみに最適化。
ポイント 各デバイスに合わせたデザインや機能の実装が可能。未対応のデバイスで閲覧しにくい。
制作期間 約2ヶ月~
制作費用 約150万円~
  • 制作期間、制作費用はあくまでも目安です。ご要望を伺った上でご提案させていただきます。
  • PCの対応ブラウザは、Internet Explorer 9・10・11 / Firefox(最新版) / Chrome(最新版) / Safari 8を想定しています。
  • タブレットの検証端末は、Mobile Safari(iOS 7.1.2 / iPad 第3世代) / Androidブラウザ(Android 3.2 / ARROWS Tab LTE F-01D)を想定しています。
  • スマートフォンの検証端末は、Mobile Safari(iOS 8.3 / iPhone 5s) / Androidブラウザ(Android 4.4.2 / Nexus 5)を想定しています。
  • 上記制作費用に、取材および撮影の費用は含まれておりません。必要に応じてお見積りさせていただきます。

代表的な事例

オムロン ヘルスケアストア

ECサイトにレスポンシブWebデザインを導入し、モバイル端末での閲覧性を向上

2011年に弊社で構築したオムロン ヘルスケアストアのPCサイトをリニューアルしました。

タブレットやスマートフォンなどのモバイル端末への対応や、購入フローの見直し&入力フォーム最適化などを実施し、サイトの使い勝手を向上させています。また新機能も引き続き開発中です。

URL https://store.healthcare.omron.co.jp/
公開 2015年
クライアント オムロン ヘルスケアマーケティング株式会社(大阪市北区)

Contact

お仕事のご依頼やご相談など、こちらからお問い合わせください。

大阪
東京

受付時間 9:30~18:30 ※祝日を除く月~金