Nagashima Laboratory

Webサイト制作の手順

ここでは実務上の流れを例として、Webサイト制作手順の一例を紹介します。

Web制作の流れ

  • 目的を定める・戦略を練る
  • 要件確認（必要な機能、サイトの目的、更新業務を誰が行うか、など）
  • 制作方法の検討　HTML+CSS、Javascript、CMS導入、サーバー・ドメイン
  • 情報建築（情報の整理、ユーザーの導線確認、…）
  • サイトマップ
  • ワイヤーフレーム
  • デザイン・素材制作、試作
  • コーディング（HTML、CSS、など）
  • 確認・修正
  • 完成・運用開始
  • 日々の更新
  • 改修、リニューアル
  • ・・・

→Webサイトは完成して終わりではなく、完成してからも育てていくメディアです

制作方法の検討

サイトの公開方法、運営方法（更新頻度、公開後に誰が更新作業を行うか、メンテナンスに時間と費用をかけられるか…）などで考えます

  • HTML・CSSのみで制作
    • 比較的小規模サイト向け（5〜10ページ程度）
    • 完成後の更新・メンテナンスが少ない場合に向いている
    • 完成（納品後）サイトの更新作業には、HTML・CSSのスキルが必要
  • CMSの導入
    • サイト規模が大きい（何十ページ〜）
    • 頻繁に投稿（記事）が追加される予定があるサイト向け
    • 完成（納品後）は、HTMLなどの専門スキル不要で更新できる
    • 既存テンプレートが用意されていることも多く、テンプレートのみを使った構築も可能
    • カスタマイズには、HTML・CSSに加え、他のWeb言語の技術が必要
    • PHPやデータベースを扱えるサーバーが必要
    • 定期的なアップデートなどセキュリティ対策が必要
  • サーバー、ドメインの扱い
    • 新規契約
    • 指定のサーバー・ドメイン

CMS（Contents Management System）

タグやカテゴリーを使って、サイト内の記事・ページを管理できるため、たくさんのコンテンツを扱うサイトを構築するときに用います。また、記事やページの更新には、HTMLやCSSのような専門スキル不要で編集が可能なため、納品後に、担当者が更新する場合にも向いています。

デザイン部分は、テーマ・テンプレートとして管理し、内容（ページ・記事）とは分離しています。サイト全体のデザインを一度に変更できるため、規模の大きいサイト構築の場合にも、デザイン変更をしやすくなっています。ただし、構築やカスタマイズには専門的な技術が必要なことが多いです。

CMSの例

WordPress

既存テーマを使って記事・ページを作る作業自体は、比較的容易です。プラグインによって機能拡張が可能です。テーマのカスタマイズにはPHPのスキルが必要になります。インストールするには、PHPとデータベース（MySQL）が使えるサーバーが必要ですが、Wordpress本体は、オープンソースであり、無料で使うことが可能です。

MovableType

中規模〜大規模向けCMS。企業が開発・管理しているため、セキュリティ対策の対応しやすい面があります。データベース（MySQL）が使えるサーバーが必要です。

個人ライセンスは無料（通常ライセンスは有料）です。

【参考】ノーコード・ローコード

コーディングやプログラミングをせずに構築ができるノーコードツール、少ないコード記述だけで開発できる、ローコードツールの活用場面も増えています。Webサイトだけではなく、アプリ、業務システムなどの開発向けのツールがあります。Webサイトであれば、Wix、studioなどがノーコードツールとして挙げられます。

使いこなすためには、ツール自体の学習コストがかかり、今後も新たなツールが登場てくることが予想されます。まずは基本的な技術の取得や、制作の上流工程（戦略・要件・構造）が重要です。

情報建築（Information Architecture）

UXデザイン（ユーザー体験）の５段階モデル

Webサイトを例に考えるのであれば、ユーザーにとって使いやすい（よい体験のできる）Webサイトに必要な要素。

情報建築は、３段階目に当たる要素。

→参考：The Elements of User Experience

構造を考えるとは？

例えば…

▽情報の整理

  • ナビゲーションにどのような項目が並ぶか （初めて見た人にも伝わる言葉になっているか）
  • マジカルナンバー7±2　→近年では4±1（たくさんの項目が並んでいても認知できない）

▽ユーザーの導線確認

  • ターゲットユーザーの設定
  • ユーザーシナリオ

どのような順番で閲覧するか、迷わずたどり着けるか、どのような設計であれば問題なく目的達成できるかを考える

必要なページ（とタイトル）、順番の洗い出しをする

サイトマップ

▼作図に使うソフトの例

  • Adobe Illustrator
  • Powerpoint、Keynote
  • Google スライド、図形描画
  • その他、図形描画ができるサービスやソフトウェア

※規模が大きくなると、樹形図での表現が難しくなるため表で作ることもあります

業務の上では、クライアントからサイトマップを受け取ることもあります。ヒアリングをしながら、最終的な項目名や、分類を決定していきます。

画面設計の前提

レイアウト

Webサイトは閲覧する側の環境が様々なため、色々な環境でも閲覧できるように考慮する必要があります

ページを構成する要素

  • ヘッダー（Header）
    • サイト名、ロゴ、キャッチコピー、サイト内検索など。
    • ナビゲーションもヘッダーの一部になることもある。
  • ナビゲーション（Navigation）
    • サイト内のページを移動するために必要なリンクをまとめたもの
  • コンテンツ（Contents）
    • ページの内容
  • フッター（Footer）
    • 著作権情報、連絡先、関連リンクなど

文字を読む向き

左→右（左上が基点になります）

【参考】右から読む文字を使ったレイアウト

Webコンテンツを読む際のF字パターン（2006）

  • アイトラッキング（Eyetracking）調査 = 視線計測
  • 数千のサイトを見るときの視線を232人分記録したところ、一定の傾向を示す

▼原文リンク

F字パターンへの対策

  • 重要な点は最初の2段落に
  • 見出し・小見出しを使う（情報を得られる言葉を使う）
  • 視覚的なグループ分けをつくる
  • 重要語やフレーズを太字に
  • 形式を変えたリンク
  • 箇条書き（記号または数字）を使う
  • 不要な内容を削る

ワイヤーフレーム

ワイヤー（線）によるフレーム（枠）。画面設計の把握に使う。

取引先や、チームとの共有目的はもちろんのこと、自主制作の場合も、サイト構築前に方針を明確にするために必要な工程。

通常、レイアウトのパターン数作る。（トップページ用と、その他下層ページ用など）

テキストや画像はダミーを用いる。

→Google画像検索：ワイヤーフレーム

ワイヤーフレーム・デザインカンプの作成に使うソフトの例

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe XD
  • Figma

AdobeXD

Webやアプリのワイヤーフレーム、モックアップ（模型）制作に特化したAdobeソフトウェア。

デザイン作業だけでなく、画面遷移の設定をして、リンク動作を擬似的に表現したり、ほかの人とデータ共有が可能です。HTMLへの書き出しには対応していませんが、開発プレビューをすることで、CSSの書き出しは可能です。

XDは図形描画機能が限られています。ロゴタイプや、アイコンなど、複雑なパーツ作りはIllustratorで行い、配置をXDで行う、というように使い分けるのがおすすめです。

完成後の話〜アクセス解析

Webサイトは完成して公開したら終わりではなく、常に新しい情報にアップデートとして、更新していきます。より使いやすく、わかりやすいサイトにしていくための方法として「アクセス解析」を行います。サイト訪問者のデータを取得し、サイトの課題を見つけ、改善へとつなげていきます。

Google Analytics

Google Analyticsは、Googleが提供するWebページのアクセス解析サービスです。Googleアカウントがあれば利用可能です。