ホーム>Webサイトページ設計-1

Webサイトページ設計-1

キノトロープでは、「運用を見据えたWebサイト構築」の手法として「テンプレート」、「コンポーネント」という考え方に基づきWebサイトを構築しています。

この「テンプレート」「コンポーネント」の考え方を導入することで、素早い情報発信を可能とし、品質や成果達成を継続的に維持することができます。

文書構造を考えたデザイン

テンプレート・コンポーネントは「更新」に有効なだけでなく、デザインの統一や、ユーザービリティの改善にも非常に効果があります。

たとえば1,000ページのWebサイトを作るとき、どのような方法で制作を行えばよいのでしょうか?

すべてのページのデザインを考えていては、いつ制作が終わるのか見当もつきません。

大量のページ制作を効率化する良い方法があります、それは、文書構造を考えてデザインを行うということです。

1,000ページのWebサイトには、実にさまざまな内容を持ったページが存在するはずです。

それらはそれぞれ別の内容でしょうが、それぞれのページは一定のルールを持って構成されています。

それは、「文書構造」というルールです。

もちろん、基本の情報の一元管理、さらに情報の共通化が前提ですが、それだけでは具体的な制作ができない部分や、難しい部分を完全に補完してくれるのがこの文書構造というルールで さらにこのルールは、文章の読みやすさという決定的なメリットをユーザーに与えてくれます。

テンプレート・コンポーネントの基本的な考え方

サイト共通のフォーマットであり、情報を入れるための「箱」になります。

以下に紹介するテンプレートは、Webサイトにおける主要な構造に基づき最適化されたテンプレートで、それぞれ用途によって最適化することで無駄のない情報配信を可能とします。

テンプレートの種類としては大きく6つあります。

テンプレートとは何か?

現在のWebサイトには、この考え方が不在となっているケースが非常に多いといえます。

それは、インターネット初期のWebサイトが会社案内の役割を果たしていたように、さまざまな役割を担うことができるという、Webサイトの特性による影響が大きいかもしれません。

しかしインターネットも成熟期に入り、ほかのメディアと同様に、Webサイトにも成果を求められる時期が来ているといえます。

つまり、Webサイトの運用とは、当然のことながらビジネスでの成果を上げることなのです。

マスターテンプレート

サイト共通で使用するパーツ(ヘッダー、フッター、ナビゲーション、コンテンツ)を配置するためのテンプレートです。

このテンプレートはサイトの核となるテンプレートであり、サイト全体の枠組みを管理するテンプレートです。

以下の3種類のテンプレート(インデックス、独自、汎用)もこのマスターテンプレートの中に組み込む形で制作するのが利便性は高いと思います。

特集ページとかキャンペーンページのようにフォーマットがまったく違うものを使用する場合は、別途マスターテンプレートを制作する必要があります。

インデックステンプレート

目次となるページ(一覧ページ)を作成する際、使用するテンプレートになります。主な目的は、ユーザーが下位層の情報すべてにたどり着けることです。

また、最新の情報を素早く配信 できることも重要なポイントになります。Webサイトの内容やコンテンツ量によって、必要のない可能性もあります。

商品数やサービス内容が多い場合は、ユーザーの利便性を考えて、制作するかどうか検討してください。

独自テンプレート

更新頻度が多い情報に使用する、1対1のテンプレートです。

企業にとって核となる商品・サービスの情報発信や、プレスリリースなどを構築するために使用するテンプレートになります。

汎用テンプレート

更新頻度が低い情報などに使用する、制約のない自由度の高いテンプレートになります。

特集ページやキャンペーンページが毎回違うフォーマットになることが予測される場合は、これも汎用テンプレートを想定します。

汎用テンプレートは、ヘッダーやフッダーの最低限共通化したい部分だけを定義して、コンテンツエリアは、自由度の高い仕様にしておけば、Webサイトのトーン&マナーが一番壊れやすいページに最低限度のルールが設定でき、制作側の自由度を最大限に生かすこともできます。

フォームテンプレート

お問い合わせや資料請求など、システムの構築に必要なフォーム部分のテンプレートです。

ユーザーにとってもWebサイトにとっても、非常に重要なページになるはずのフォーム部分も、共通化しておくことで、変更のしやすさや作りやすさだけではなく、わかりやすさや覚えやすさといったユーザーメリットも提供できます。

小窓テンプレート

拡大画像や補足説明を掲載するための小窓テンプレートです。

商品スペックや画像の表示で利用されることの多い小窓での表示も、戻り方や消し方のルール、そもそもの表示ルール等、Webサイト全体で共通化しておく必要があります。