Webサイト構築プロジェクト

市民生活でのITの活用が浸透し、安価・手軽に利用できるWebサイト構築環境が種々利用可能になりました。 しかしその反面、ITの高度化、複雑化、激しい技術変化に伴い継続的学習・研究にしなければ活用できなくなってきました。 Webサイトの構築も種々の技術的な実装方式があり、その方式の選択にも種々の知識と工夫が必要となるようになりました。 ここでは、下記ののような狙いでWebサイト構築に取組みます。

  • 「知識駆動型プロジェクト」を支える「知識共有サイト」の構築を図るためにWebサイト構築の知識を蓄積する。
  • プロジェクト活動を円滑に進めるための情報共有環境としてWebサイト構築を図る。
  • NPO活動、趣味・サークル・仲間などの活動の公開・協働活動支援、情報共有などを図る。
  • プロジェクト活動を円滑に進めるための情報共有環境としてWebサイト構築を図る。
  • Webサイト構築では、プログラミング知識を必要とするものと必要としない方式があり、双方について取り組む。
  • 企業・組織やNPOなどのWebサイトのベストプラクティスなどを探求し、構築知識を探求する。
  • ブログタイプ、Facebookページなどのタイプなど種々の方式との連携を図る。
  • Office365,Salesforceなど種々のクラウド環境を利用してWebサイト構築を図る。
  • 他の情報システム、IoT等との連携を図る。

Webサイト構築は、従来からあるホームページの構築からコラボレーション支援や基幹系の情報システム連携、情報系 のシステム連携、組込みシステム、例えばEMS（エネルギーマネジメントシステム）などとの連携による見える化まで 種々・多様な目的と方式、技術があり、特定のベンダーやWeb技術者だけで対応できる領域を超えて発展してきています。 さらに、従来、高価な仕掛けや環境が個人、NPO、中小企業にも活用可能な安価な状況となっています。 さらに、ホームページとSNS、ブログ、クラウドなどの融合したシステムへと発展してきています。 このため自社のWebサイト構築といっても非常に選択肢のある状況となっています。


CWWとしてのWebサイト構築への取組み方

プロジェクト・コーディネーターとして取組みを支援します。

  • Webサイトを何のために構築するかを明確にします。（要求仕様の探求）
  • 構築後の保守・更新を考えて実装方式を選択します。（基本設計の支援）
  • 各種の実装方式を選択・比較し目的に合ったWebサイト構築方式を決定します。
  • これらの内容を元に構築ベンダー、保守ベンダーとのコーディネタ―役を務めます。
    また、可能な範囲で直接、構築・保守を支援します。


取組み方

Webサイト構築時の考慮点
項番 考慮点 説明
１ 目的を考える 何の目的でWebページを作成するか？
・PR,情報提供・情報共有、協働作業、情報収集
・作業の効率化・自働化、データの精度向上
・利用者の利便性
・公開、限定公開、非公開のデータ
・ビジョン・戦略や企画とのつながりと価値
・法的・倫理的対応
・会員サイトなどの限定公開サイトなどの必要性
・Webサイト・ホームページと他のサービスとの連携の必要性
　（情報共有、SNS、ブログ）
２ 開発・保守体制を考える ホームページは常にコンテンツを見直し保守を行う必要があります。
・開発・保守体制をどのようにするか？
　・外部委託をどこまで：稼働環境まで、開発まで、保守まで外部委託
　・自社で行う場合は、専門技術の必要性はどこまでか？
　・タイムリーなコンテンツの変更に対する役割分担は？
・どの程度専門技術を必要とする実装方式を選ぶか？
・公開前、公開後の内容確認方式はどのようにするか？
３ 利用環境を考える ・無料サイト、自己保有環境、レンタルサーバ、クラウド環境
・ホスティングサーバ、ハウジングサーバ
４ ドメイン取得の判断 ・自己ドメイン名の取得の有無と数
・プロバイダーのサブドメインの利用
５ 利用環境の組合せ ・種々の環境を目的に合わせて利用
６ 投資効果を考える ・ライフサイクルコスト/負荷を考慮
(構築・開発フェーズだけでなく、日々の運用・保守を考慮）
・継続性や定期的な見直し・刷新を考慮
・目的の実現性とリスク
７ 利用ツールを考える ・サイト構築・運用ツール
・コンテンツ作成ツール
・プログラム開発支援ツール
・サブルーチン、共通ライブラリー、関数の利用、オブジェクト指向、テンプレートなど
８ 必要技術を考える ・技術習得の方法と研鑽の方法を考える
・Web技術の高度複雑化に伴う対応を考える
・外部勉強会、技術者のネットワークへの参加
・変化する最新技術の習得と革新への対応
９ 利用機器を考える ・利用機器の多様化を考慮
・パソコン、携帯電話、スマートフォン、タブレット、デジタルテレビ、IoT接続など
１０ 利用言語を考える ・Webページを作成する言語を選択する。
・技術変化やバージョン・リビジョンによる変化を考慮する。
・専門言語の習得不要な方式もあり考慮する。
１１ フレームワークの利用を考える ・言語別にある各種フレームワークの活用を考える
・技術変化やバージョン・リビジョンによる変化を考慮する。
１２ バックアップの利用を考える ・言語別にある各種フレームワークの活用を考える
・サーバーのクラッシュなどのよりコンテンツが喪失することも考慮してのバックアップ方式を考える。
１３ 移行性 ・現状ホームページ・Webサイトの課題の整理
・現状Weｂサイト・ホームページからの移行方式
１４ 著作権 ・利用コンテンツの著作権などの検討
・写真などは肖像権などもあり考慮が必要
１５ GDPR：General Data Protection Regulation 欧州議会、欧州理事会および欧州委員会が策定した新しい個人情報保護の枠組み
１６ CTR ・CTR（Click Through Rate）とは：ネット；関連技術の解説あり
デジタルマーケティング一般用語、Webマーケティング効果指標の解説へのリンクもあります。
・CTR(クリック率)とは：ネット；関連技術の解説あり
・B2BでのWEB広告の活用方法：学習・研究室用(pdf)
企業向けに最先端のWEBマーケティングサービスを提供する企業の資料
１７ コンテンツ管理システム
会社のホームページをマーケティング戦略に活かす方法 		・会社のホームページをマーケティング戦略に活かす方法 1 ～取組事例編～
・会社のホームページをマーケティング戦略に活かす方法 2 ～CMSの比較編～
・会社のホームページをマーケティング戦略に活かす方法 3 ～効果の発揮編～
・検索エンジン最適化（SEO）スターターガイド
１８ テキストコンテンツの書き方
「伝わる」コンテンツを書くために、特別な知識は必要ありません。6つの質問に答えて、訪問者の心をつかむ文章を作成しましょう。
  • 何について書いていますか？：当たり前のことほど、おろそかになりがちです。 まずあなたが誰で、どんなコンテンツを提供しているのかを明確にしましょう。 訪問者の注意力はあなたが思っているほど持続しません。数行の文章で、できるだけ簡潔に説明しましょう。
  • 誰のために書いていますか？：あなたのサービスがどんな人に求められているのかを考え、ターゲットの顧客層を意識した文章を作成しましょう。
  • どんな特色がありますか？：あなたのサービスが必要とされる理由は何でしょうか。 サービスの特徴や競合他社にはない独自のメリットをリストアップし、訪問者を納得させましょう。 箇条書きを活用しましょう。
  • 共感してもらえますか？：訪問者に選ばれるためには、満足だけではなく「共感」を生み出すことが大切です。 ビジネスをはじめたきっかけや今に至るまでの経緯を説明し、あなたの経営理念と情熱を伝えましょう。 堅苦しい印象を避けるため、目の前の相手に話しかけるような文体を心がけましょう。
  • あなたが選ばれるべき理由は？：数ある競合の中から選ばれるためには、訪問者の信頼を得る必要があります。 「お客様の声」、過去の実績、顧客数などを掲載することで、新規顧客の不安を取り除くことができます。
  • 行動を喚起していますか？：魅力的な文章を作成した後は、コンテンツを読んだ訪問者が離脱してしまわないよう CTA（行動喚起）ボタンのテキストにも目を向けてみましょう。 「今すぐ購入」や「資料請求はこちら」など、クリック後に何が起こるのかが明確に分かるようにしましょう。
１９ 中小企業がホームページで失敗する７つの理由
2019年に発表された「中小企業白書」によれば、中小企業の87.2％が自社のホームページを開設していることがわかりました。 すでに世の中のほとんどの企業がホームページを開設していることになります。
2014年の同白書には、気になるデータが掲載されています。 自社ホームページを開設したことで販売先数が「大幅に増加した」と回答した企業はわずか3.7％、 「やや減少した」「大幅に減少した」という回答も10.8％にも上っていました。
つまり９割の企業がホームページ作りに失敗していたのです！
中小企業がホームページで集客を成功させるには、失敗から学び、同じ失敗をしないことが重要です。 直ぐに結果が出ないことで、ホームページによる集客に運営に興味を失ってしまうと宝の持ち腐れになってしまいます。
【出典】あきばれホームページ経営塾
  • ホームページのコスト削減を重視し過ぎた
    ホームページ制作の平均相場は総額30万円以上と、費用がかかるものです。 コスト削減だけを重視して発注してしまうと、工数が減らされてしまい、必要なページまで削られしまう可能性があります。 情報量が少なければ、SEOにも不利となり、集客にも影響を及ぼします。
  • デザインにばかり手間をかけてしまった
    Web初心者はデザインにばかり手間をかけてしまう傾向があります。 ホームページで集客をするなら、デザインよりもSEO対策、ユーザーの使いやすさ、コンテンツの質と量などの方が重要です。
  • Web集客やSEOの仕組みを学ぼうとしない
    ホームページで集客をしたい人は、きちんとその仕組みを学ばなければ、思うような成果は上げられません。 現在は、どの企業も集客のメインはWebになりつつあります。 Web集客の仕組みを理解しておくことは、時代に置いていかれず会社を長く存続させるためにも役立ちます。
  • 業者やWeb担当者の言葉を鵜呑みにした
    WebやSEOの知識がないからといって業者やWeb担当者の言葉を鵜呑みにしてはいけません。 悪質な業者による間違ったSEO対策によって、Googleからペナルティが課されることも少なくありません。 SEOの仕組みを理解し、自分の頭で対策を考えるようにしましょう。 ビジネスをはじめたきっかけや今に至るまでの経緯を説明し、あなたの経営理念と情熱を伝えましょう。 堅苦しい印象を避けるため、目の前の相手に話しかけるような文体を心がけましょう。
  • 掲載している情報量が少ない
    ホームページは、会社概要、事業紹介、お問い合わせなどの必須ページだけでは集客するのは難しくなっています。 コンテンツを増やして差別化をはかり、検索結果の上位表示を狙う必要があります。 良質なコンテンツを増やし、ユーザーの興味を引けば集客につながります。
  • ユーザー（見込み顧客）目線に立っていない
    ユーザー（見込み客）の目線に立っていないホームページでは、離脱を招きやすく、せっかく訪れた顧客を逃してしまいます。 ホームページの使いやすさ、文章の読みやすさ、動作環境など、社員以外の人に実際にホームページを使ってもらい、客観的な評価を得て改善に役立てましょう。
  • 社長や上司が口出しばかりする
    社長や上司が、口出しばかりして、何度も修正や作り直しをさせてしまうと、その担当者のモチベーションを下げてしまいます。

Webサイトを通じて企業は何を見られているかの視点:例

Webサイト構築では、企業にとって客観的に外部からどのように評価されているかを考えてシステム構築を図ることは重要です。

顧客の視点

顧客満足度の視点から企業がどのように見られているかの情報を集め、そのニーズ・シーズを把握することは極めて重要です。

人財の確保の視点

企業の活動の源泉は、人財の確保とその育成にあります。学生の就活の観点から企業は何を見られているかを考えることは重要です。

調査・分析におけるチェックポイント

  • 事業にマーケットのニーズを感じられるか？
  • 商品・サービスに他社に負けない強みがあるか？
  • 他社と比べた従業員１人当たりの利益はどうか？
  • 企業理念・コンセプトに共感できるか？
  • 取引先に大手、優良企業はあるか？

企業の確認・検証時のチェックポイント

  • 説明が曖昧＝実は後ろめたい所がある？
  • 仕事の易しさを強調=人が集まらない？
  • 社員が異常に若い＝すぐ離職する・定着しない？
  • 社風がいいと強調＝ほかにとりえがない？
  • 応募を活かす＝頭数をそろえればいい？

企業見学・訪問でのチェックポイント

  • 社員や社内の印象は？
  • 社長に対する社員の態度は？
  • 社長の経営方針、価値観は？
  • 現場の整理・整頓・清潔感は？

優れた人財は、企業の①歴史、②従業員の年齢バランス、③経営展望を見ています。経営者の私利私欲のために社員を使い捨てにするような 企業は敬遠されます。現在では、どんなに企業が隠してもインターネット上の情報で検索される場合があります。悪意ある中傷か心ある人の 話しかは分かるものです。昔から「人の口に戸は立てられぬ 」といってインターネット時代では、思わぬ人のつながりがあります。

企業のWebサイト、SNS、ブログなどは就活者にとって大切な情報収集手段であり、企業側にとっても大切な情報提供手段です。 特に、企業のWebサイトやSNSは、情報発信の入口です、大切に扱いましょう。 大切にしなければ、お客様、取引先は勿論、就活中の人財にとっても調査・分析段階で対象外の企業となり、 将来を担う優秀な人財確保のチャンスを逃すことになります。

今一度、外部者の観点で客観的に自社を見直してみませんか？ そして、問題点・課題を発見し、改善・改革に着手しませんか？


Webサイト構築の多様化

Webサイト構築への取組みに当たっては、一般的にはその入り口がHTML/CSS、JavaScriptの知識でしたが、HTML/CSS、JavaScriptを 知らなくても作成できる方式もあり、サーバ環境や使用言語や環境も多様化して、一層複雑化しています。

  • ブログタイプのWebページ：テンプレートがありHTML/CSSなど基本的に利用しなくてもできるサイトやフリーソフト、フレームワークなど：下記に事例
    ここでは、HTML/CSSとJavaScriptの関連は省略しています。（Webページ作成の基本知識なので）
    • ブログdeホームページ:サーバー環境
      ブログタイプではあるが、本格的なホームページ作成を目的とするサイト
    • WordPress:フリーソフト
      多くのWebサイトで使われていて、有償のテンプレートやサポートも存在、さくらインターネットのサイトでの利用や無償の環境もあります。
  • Web向けの言語のフレームワークを使用して効率的に構築する方式：言語別に多数存在
  • Webサイト専用のレンタルサーバ（無料含む）：予めローカルサイトでページを作成テスト後にサーバにアップするサイト
  • Webアプリケーションなどを作成できるクラウド環境（SaaS/PaaS/IaaS)の利用
    他のCRM・SFAや情報共有などのクラウドサービスとの連携やIoTの活用なども視野に入れて選択
    大手ベンダーから小規模まで様々ですが、事業の継続性/信頼性/サポート/関連支援ベンダーやアプリなど企業システムとしての視点で選択が必要です。
    トータル、システムのライフサイクルとしての投資効果から選択する考え方ととにかく試行・無料提供から取り組んでみるまで対応は様々です。
  • 更には、FacebookやLineなどを利用した補完的なWebページ

現在、上記ように様々な環境が個人でも気軽に利用できるようになり、それらのサイトやフリーソフトなどを利用してのWebページの学習・研究に取り組んでいますが いずれのサイトや支援ソフトを利用してもHTML/CSSの知識は、デザインなどを修正するので不可欠となります。


セキュリティの検討について

Webページを構築するにあたって、セキュリティは重要な検討要素です。 セキュリティに保護されたコンテンツを提供しない広く公開だけを目的とする サイトを構築する場合は不要です。

  • 顧客や会員・支援者だけで利用するページを作成したい。
  • 社内の内部管理者だけで利用するページを作成したい。
  • 特定の利用者だけに個別に見せたいコンテンツを作成したい。
Webコンテンツのセキュリティの検討 の例
項番 セキュリティの設定 内容
１ 全ての人が利用可能 利用者に対するセキュリティを特に、設定しない。
２ 限定、公開の利用を設定する。 ログインID、パスワード等を設けて特定者が利用可能とする。
（もっとも一般的なアクセス制限です。参考サイト）：Perl言語用
３ 利用者の資格ごとに利用できるページを制限する。 ユーザID毎に利用資格など設定して、利用ページ制約を設定する。
（会員の種別、システム管理者などを設けてアクセス制限を行う。）
４ 利用者個人ごとに利用対象を限定する。 個人IDごとに利用可能なページを設定する。
（利用者の個人情報の変更など、他の利用者には利用権限がない個別のアクセス制限をする。）
５ コンテンツの秘密レベルによって利用制限を設定する。 情報の秘密レベルと利用者の所属部署・利用者の資格レベルを参照して、コンテンツの利用制限を設定する。
（特定資格・管理のレベルとコンテンツの秘密レベルにて利用制限を行う。）
６ 機械的なアクセスを制限する。 機械的な不正なアクセスを防止するための種々のセキュリティを設定する。
（スパムメールや機械的な検索・登録を防止するアクセス制限を行う。）
７ 最終的な入力を確定を確認する利用制限を設定する。 個別に入力した内容で、最終的に入力を確定するために、提供承認のアクセス制限を設ける。

セキュリティの実現方式

セキュリティ設定は、個人のWeb利用でも簡易に利用できるものから高度な環境設定や技術を必要とするものまで様々なものまであります。 技術的にも変化が激しく、複雑化して高度な内容は専門家の参加が必要となります。 これから学習・研究しながら技術を習得・整理していきたいと考えています。

項番 方式 内容と事例
１ 特定フォルダーのコンテンツにアクセスするとユーザIDとパスワード入力を求める方式 ホームページ環境を提供しているプロバイダーが準備しているセキュリティ設定フォルダーにアクセスするコンテンツを利用 しようとするとユーザID、パスワードが求められる様になります。非常に簡易で、プログラミングの必要はありません。
２ ユーザID、パスワードの登録ファイル／データベースを作成・利用して処理する方式 システム管理者、または、ユーザが登録したユーザID,パスワードを保存したファイルをサーバー側に作成し、 CGIなどを利用してアクセス制限を行う方式です。
３ ユーザID,パスワードの認証に加えて、利用機器の認証を求める方式 ユーザID,パスワードの登録に加えて、利用機器(PC,モバイル機器、携帯電話など）の認証を行い利用を制限する方式ですが、 高度なので個人で利用するのには少し複雑になります。
(事例：Salesforce CRMのログイン設定； さらに詳細・高度にアクセス制限が設定できます。：Salesfoceの内部でのセキュリティ設定にて変化します。）
4 特定のフォルダーにアクセス設定を実施する方式 プロバイダーが準備したhtaccessのアクセス制限を利用して実施する方式です。サーバ環境の設定が利用できるときは個人でも利用可能です。
５ ユーザ資格と利用するコンテンツの秘密レベルによる利用制限の方式 本方式の実装技術も種々ありますが、以前に実施した内容はコンテンツをXML形式としこの秘密レベルとユーザの資格レベルのマトリックの照合で、アクセス制限をする方式があります。 別の方式では、ユーザDBとセキュリティ用のコンテンツテーブルの連携によるアクセス制限などあります。 初期の構築負荷もありますが、利用者（社員・派遣社員・パート）の追加・削除や異動などでの権限変更とコンテンツの登録・削除・開示範囲の変更などの運用面や他システムとの 連携（社員システムとのDB連携など）もあり、自動化や不整合防止も図る必要があります。 運用面でも考慮が必要です。コンテンツと利用ユーザとの関連の設定が複雑になります。（PMO外秘、社内メンバー外秘、メンバー参照可などプロジェクトではよくあるニーズです。）
６ 特定ドメインからの利用を制限する方式 特定ドメインからのアクセスを許可する、または、禁止する方式
社内ドメインからののみアクセス許可、海外ドメインからのアクセス禁止、特定ドメインからのアクセス禁止などその内容は多様です。
7 コンテンツ（中身）の暗号化 中身を直接、DBなどから不正に持ち出しても見れないように暗号化する
暗号化の方式、解読提供方式など専門技術や環境設定も必要となります。

Webサイト構築に役立つ画像の知識

Webサイトの構築・保守に役立つ画像の関連の知識
種類 項目 説明
ネット CANVA:画像を簡単に作成できるサービス ユーザ登録が必要です。：Canvaのご利用目的を選択入力
・カテゴリ別のテンプレートを選択して作成
・サイトのパーツを選択など以下ナビゲーションに従う
・無料と有料：複数で共有などのアップグレードサービスがある。
ツール Adobe　Photoshop:試行版 専門のデザイナーも使用する本格ツール：クラウド版もある
・NPO向けにTechSoupから特別提供価格版もある
・専門知識も必要ですが使いこなすと便利
・NPO向けには、Adobe Creative Cloud All Apps Plan - 年間個人メンバーシップ（初年度6割引）も提供
ツール 種々あります
 ・無料でもここまで！Photoshopの代用に使える画像編集・加工ツール11選 から特別提供価格版もある
・無料画像加工・編集ソフト一覧 - フリーソフト100
・無料なのに高機能！デザイナーに選ばれている画像編集ソフト8選
LP ランディングページ（LP）とは、検索結果やリスティング広告、SNSなどから流入した訪問者をダイレクトに注文やお問い合わせなどのアクションに結びつけることに特化したページ。
ネット 画像・動画の素材