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マーケティングサービスを提供する企業の資料

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選