Webサイト・ホームページ制作

御社の目的に合わせたWebサイト・ホームページを迅速・丁寧に制作いたします

Webサイト・ホームページ制作のフロー

当社でWebサイト・ホームページを制作する際の一般的な作業工程は、1.企画・戦略策定→2.デザイン→3.コーディング(HTML,CSS,JavaScript)→4.CMS組み込み・カスタマイズ→5.サーバ設定・構築という手順となります。
1~3まではフロントエンド、4はバックエンド、5はサーバサイドと分類されており、当社はフロントエンドを得意とする制作会社ですが、一般的なWebサイト・ホームページであればバックエンド、サーバサイドにおいても必要十分な提供能力を保有しております。

企画・戦略策定

“Web戦略”策定の重要性

Web戦略の定義は曖昧ですが、あえて雑駁にわかり易くまとめれば、
クライアントの「ある目的を、Webを利用して実現するための戦略」ということになるでしょう。

故に、戦略はクライアントの「目的」次第ということになります。Webを使ってブランディングを行いたいのか、商品やサービスを販売したいのか、あるいは既に存在する業務効率を改善したいのか等々、クライアントの様々な「目的」によって取るべき戦略は変わってきますので、「目的」の具体化・明確化、複数あるのであれば優先順位付け、実現困難な目的であれば中途目標の設定が第一に必要となります。

次に、「目的」が具体的・明確になっていれば、組み立てるべき戦略のポイントは決して複雑ではありません。
主に下記5点のそれぞれについて、手法(戦術)を選択し、これをもって全体としての戦略を策定します。

  1. ユーザー(閲覧者)がWebまでたどり着くルート確立と数量増加(集客施策)
  2. ユーザーにWeb上で目的へのアクションを起こしてもらう(コンバージョン)率の向上
  3. Webの運用に関するシステムと人による役割分担
  4. 定量的・定性的効果測定の手法とPDCAサイクルの仕組み
  5. イニシャルコスト及びランニングコストの最適化

こういった戦略策定及びその実施を【Webマーケティング】という言葉で表すこともあります。

SEMに対する考え方

当社では、社内システムのWeb化による業務フロー改善等のクローズドなケースでない限り、通常はターゲットとなるユーザーがWebまでたどり着くルートの確立とその数量増加に向けた戦術の選択・組み合わせをご提案いたします。

例えば、サイトで商品を一般消費者に向けて販売したい(EC)のであれば、最もコアなターゲット層に対してはコンテンツSEOに基づいたサイト構築を行い長期目標に沿って情報発信力強化に取り組みつつも、LP(ランディングページ)とPPC広告(リスティング等のクリック課金広告)の組み合わせによって短期目標もクリアしていく、等です。

こういった戦術選択及びその実施を【SEM(サーチ・エンジン・マーケティング)】という言葉で表すようになってきています。

SEOに対する考え方

SEOとは、「Search Engine Optimization」の略で、検索エンジンに対する最適化を行う技術ないしノウハウの事を指します。そのSEOには大きく分けて二つの流派が存在しました。Googleが定める「Webマスター向けガイドライン」に違反ないしギリギリグレーな手法によって実際のサイト評価以上の評価を得ようとするブラックハットSEOと、「Webマスター向けガイドライン」及びその趣旨に則ってサイトを制作し、ひたすら地道に良質なコンテンツを作り込んでいく「ホワイトハットSEO」です。

当社では、起業以来ホワイトハットSEOを方針とし、現在もその基本姿勢に変更はありません。しかしながら、経験上実際にホワイトハットSEOをしっかりと実施し続けることは時間と根気が必要となることから、SEOに関するコンサルティングにつきましては、当社と共に時間と根気を傾けてくださるクライアントに限定させていただいております。

コンバージョンに向けた取り組み方

当社では、Webサイトへ来訪したユーザーが、クライアントの目的に向けたアクションを起こすことをコンバージョン(転換)と呼び、この率(コンバージョンレート、CVR)を向上させることを重視しています。

例えば、上記のECの例であれば、ユーザーが最後の購入に至るまで滞りなく進めるようにするために、商品情報の充実だけでなく、訴求力の向上・利便性改善・Webフォームの最適化など、Web内で行うべき対策は数多くあります。
これは社内システム開発のケースにおいても同様で、システム利用者が使いやすい様に設計し改善していかねばなりません。

こういったWebのユーザー体験を向上させる施策は、最近ではUX(ユーザーエクスペリエンス)デザインと呼ばれ、その重要性が再認識されています。

Webシステムと人の役割分担

Webを制作・開発・改善する際には、Webの運用を想定してシステム化すべき作業領域と人の判断・手に委ねた方が費用対効果に優れた作業領域があり、この役割分担を適正化することが大切であると、当社は考えています。

上記ECの例で言えば、コンテンツSEOを実施する為にコンテンツ(情報)に注力しやすい管理システム(CMS、コンテンツマネジメントシステム)が必要である一方、不要不急な部分までシステム化することは、費用対効果上望ましくないばかりか、複雑化によってUXを損なうことになりかねません。

効果測定の手法とPDCAサイクルの仕組み

クライアントの目的を初期開発だけで達成できれば幸いですが、ほとんどのケースではWebに関する効果測定のルールと、これに基づいたPDCAサイクルの実施を何年もかけて行いながら目的達成に向けて前進していくことになります。

こういったP(Plan)、D(Do)、C(Check)、A(Ajustment)を一本筋の通った方針のもとに、可及的速やかに実施していくために、可能な限り全ての工程を自社内で提供できるように当社は体制を整えて参りました。

イニシャルコスト及びランニングコストの最適化

上記の戦術選択・組み合わせを最適化すれば、イニシャルコスト(初期費用)が明確化されます。
当社の制作・開発は基本的に人日単位(1人日4万円)でのお見積りとなります。
また、企画・戦略策定が済みましたら、最適なサーバ及び保守管理プランによってランニングコスト(運用費用)の最適化をご提案させていただきます。保守・管理業務につきましては、Webサーバ・Webサイトの保守管理のページをご覧ください。

権利関係の適切な処理

当社では、制作させていただいたWebサイトの著作権等の知的財産権について適切に処理をいたします。
基本的には、ソースコード及びpsdデータなどの成果物の著作権を初期費用のご入金時に譲渡させていただく他、著作者人格権不行使条項を締結させていただきますのでご安心ください。

デザイン

レスポンシブWebデザイン

レスポンシブWebデザインとは、PC、タブレット、スマートフォンなど、多種多様なデバイスの画面サイズに合わせて、ページのレイアウト・デザインを変更・調整するデザイン及び技術を指し、当社では、2012年より原則としてレスポンシブWebデザインをクライアントにお勧めしております。
ブラウザ横幅の2ヵ所(ブレイクポイントと呼ばれています)でレイアウトを変更することで、PC・タブレット・スマートフォンのそれぞれに最適化されたUI(ユーザーインターフェース)をデザインします。

※タブレットをそれほど重視しない場合や、システム面での適合性を重視する場合等で、ブラウザ横幅の1ヵ所(ブレイクポイントと呼ばれています)でレイアウトを変更する仕様をお勧めする場合もあります。
※各デバイス毎の情報構成を大きく変えたい場合や、アート性を重視されたい場合、システム面での適合性等、各デバイス毎のWebを構築した方が良い場合もございますのでご相談ください。

リキッドレイアウト

リキッドレイアウト(可変グリッドとも呼ばれます)とは、ブラウザの幅に合わせてコンテンツの表示位置や範囲を変えることで、ブラウザの横幅に最適化したUIを実現する表示方法です。当社では、2012年より原則としてリキッドレイアウトをクライアントにお勧めしております。
リキッドレイアウトをレスポンシブWebデザインと併用することで、ブラウザの横幅がどのサイズであっても最適化されたUIとなるよう、デザインします。

各デザイナーの個性を出したデザイン

当社には、4名のデザイナーが社内に在籍しており、また、東京でもトップレベルのグラフィックデザイン会社である「株式会社トーン・アップ」「株式会社リュウズデザイン」とアライアンスを組んでおります。
当社の実績から、サイトをご指定いただくことで、担当デザイナーやデザイン会社を指定することも可能ですのでご相談ください。

コーディング

Googleのウェブマスター向けガイドライン準拠

当社では、Webを制作するにあたり、その当時にGoogleが公表しているウェブマスター向けガイドライン(「一般的なガイドライン」及び「品質に関するガイドライン」)に則って、Webを制作しております。

※このガイドラインは、随時更新されるため、当社の実績でも現在のガイドラインに当てはめると最適化されていないサイトもあります。

W3Cに準拠

W3C(ダブリュースリーシー)とは、World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)の略で、World Wide Webで使用される各種技術の世界的な標準化を推進している団体です。
当社では、W3Cに準拠したHTMLコーディングを行っており、Googleに評価されるWeb制作及びクライアントへの説明責任の実施を心がけております。

※後述のAMP HTMLなど、W3Cに準拠するよりも先進的な機能を優先する場合もあります。
※W3C のHTML規格は随時更新されるため、当社の実績でも現在の規格に当てはめると最適化されていないサイトもあります(保守管理業務内で、見つけ次第修正対応を心がけております)。

AMP HTMLに対応

AMP(アンプ)とはAccelerated Mobile Pages (アクセラレイティッド・モバイル・ページ)の略で、GoogleやTwitter、WordPressなどが参加しているAMPプロジェクト(https://www.ampproject.org/ja/)が構築したモバイルでの表示速度高速化を実現するための仕組み、もしくはそのためのHTML規格のことをいいます。 当社では、2016年より、AMP HTMLでのコーディングを請け負っており、本サイトもAMP HTMLで制作されております。

※AMP HTMLはW3Cの標準規格とは異なるオープンソースの規格です。したがって、AMP HTMLでコーディングをした場合、W3Cのチェックではエラーと認定されますが、Googleの検索アルゴリズム上マイナス評価を受けることはないとされています。

JavaScript

Webサイト・ホームページに動きを付ける、あるいはシステム側との演算の分担を行うためのJavaScriptによるコーディングも承っております。
SEOを重視すべき場合や、AMP HTMLで使用できない場合など、使用すべきでない場合や制限される場合がありますので、企画時にご相談ください。

静的サイトジェネレータでの構築

静的サイトジェネレーターは、Markdownなどで書かれたファイルに基いて、静的なサイトを高速でビルドするWebサイト作成用のフレームワークです。この静的サイトジェネレータは表示速度、セキュリティに優れる為、wordpressに代わる技術体系として期待されています。
当社では2018年より、大手クライアント様に静的サイトジェネレータで構築したWebサイトを納品しております。

※静的サイトジェネレータにも多くの種類があるため、まずはご相談ください。

CMS組み込み・カスタマイズ

Wordpress

WordPress(ワードプレス)は、データベース管理にMySQLを利用しているオープンソースのCMS(コンテンツマネジメントシステム)です。
当初はブログソフトウエアとして開発されましたが、現在は世界で最もWeb開発に使用されているCMSであるとされています。
当社では、数多くのwordpressによる開発実績を有しております。大規模案件でのwordpress実績も有しますので、速度等でお悩みの場合にはお気軽にご相談ください。

その他のCMS

国産オープンソースCMSのbaser CMSや、秘匿性と速度に優れたQuartett CMS等、クライアント指定のCMSによる多数の開発実績を有しております。

本格的なWebシステム開発

LAMPによる本格的な業務用Webシステムについても対応できます。
詳細はWebシステム開発のページをご覧ください。

サーバ設定・構築

VPS・共用サーバの構築と設定

当社では、Webサーバは原則として仮想専用サーバー(VPS)をお勧めしています。仮想的に専用サーバーと同様の自由度・性能を利用できるよう設定されており、他ユーザーの影響を受け難く、コストも比較的安いことが理由です。
一方で、コストを最重要視される場合には、共用レンタルサーバをご用意させていただきます。
Webサイト制作時には通常メールサーバも設定致しますが、メールサーバを移管する場合には、メールの数によって工数が多めにかかる場合がある点はご了承ください。
これらのWebサーバの費用につきましては、Webサーバ・Webサイトの保守管理のページをご覧ください。

Amazon EC2の構築・設定

ECサイトやサービスサイトなどで大きな瞬間的負荷が掛り易く、高いセキュリティーを保持せねばならない場合には、AWS(Amazon Web Service)内のAmazon EC2(Amazon Elastic Compute Cloud)をご用意させていただきますので、ご相談ください。