スマホ向けを念頭に入れたサイトの構造化と、サイトの権限設定を考えてみた

前回までに、更新方法とその頻度でサイトの構造を考えることを学んだりん。でも、今回の案件で必須となっている要件「スマートフォン対応」は、サイト構造にどう影響を与えるんだろう?

それに、Webの制作はこちらでやるけれど、制作後の更新をするクライアント側の担当者は何人かいるし、ほかにも関わる人が何人か思いつく。役割ごとに触れる場所・触れない場所をちゃんと分離しておかないと、あとでめんどくさいことになりそう。その辺も、サイト制作経験が豊富なはやせ先輩に聞いてみることにしたのでした。彼の言う意味の分からない小ネタは豪快にスルーしつつ、今回もがんばります!

おはようございます! 早速ですが、今日もいろいろと質問したいことがあります!

OK牧場!

2種類あるスマホ対応の方法、それぞれのメリット・デメリットは何だろう?

(また来たよ……けど、めげずにスルーする!)

今回の案件って、スマートフォン対応が必須なんです。スマホ対応する場合、前回作ったサイト構造にどんな影響があるんでしょうか?

そうだね。スマホ対応する場合のやり方は、大きく分けると2つかな。それぞれメリット・デメリットがあるよ。

1. レスポンシブレイアウトで、同じHTMLを表示

1つは、PCと同じHTMLをブラウザの表示横幅にあわせて最適なレイアウトで見せる方法だね。

【メリット】

• 1ソースなので、大規模サイトでもメンテナンスしやすい
• モバイルからの閲覧性を重視し始めた検索エンジンからも、推奨されている
• どの端末からもURLが同じなので、ソーシャルでシェアされるURLが散逸しない
• シンプルなサイトであればベースとなるテンプレート等を用意しておけば素早く構築できる
• 将来、PC・タブレット・スマホとは大きく異なるサイズのネット閲覧デバイス(TVなど)が増えても、そのまま対応できる

【デメリット】

• 同じHTMLを表示するため、デザインやサイト内要素の配置をPCとスマホを考慮して作る必要がある
• 上記の考慮をした結果、デザイン上の制限が生まれる
• スマホでは画面上非表示にしても、コンテンツ自体は読み込むため、無駄に容量が大きくなり表示が遅くなる場合がある
• 画面幅による自動レイアウトなので、スマホからPCサイトのスタイルに切り替えることができない

2. スマホ専用のページを生成して表示

2つ目は、閲覧デバイスに合わせて動的に表示サイトを分ける、または静的に/sp/などと別階層構造を作り、スマホ専用の表示ページを出力させるようにする方法かな。

【メリット】

• それぞれのデバイスに合わせ、デザインやレイアウトの制約がなく自由なレイアウトができる
• スマホでの利用シーン・用途に特化したコンテンツのみをコンパクトに表示させることができる(特に大規模サイトで有効)
• 上記と関連して、スマホに最適化された画像や必要な情報のみを提供できるので表示速度が速い

【デメリット】

• URLが異なる場合は、検索エンジンから重複と見なされない設定にするなど運用が複雑になる
• 同じくURLが異なる場合は、ソーシャルでシェアされるリンクとシェア数が分散する
• PC・スマホ・タブレットなどデバイスごとにサイトを開発し、分岐の仕組みを用意する必要があるため、デザイン・構築コストがかかる
• 新しい種類のデバイスがでた時に、新規で対応が必要
  

なるほどー。Googleがレスポンシブレイアウトを推奨しているからといって、「レスポンシブレイアウト、サイコー!」とはならないのですね。

そうだね。個人的な経験からすると、小中規模なWebサイトの場合はレスポンシブレイアウトで、大規模Webサイトになると別にしたほうが良いという場合が多かったかなー。

例えば、遊園地や展示施設などの場合、ユーザーが、家でじっくり下調べするときにPC版を使って、スマホ版では現地でリアルタイムなイベント情報を確認する、などWebサイトの役割や運用方針によっても選択が変わるよね。

昨今は、極端な話だけど「スマホでの閲覧を優先してPCはとりあえず見られればいいや」という方針もありえるので、そのWebサイトがどういうユーザーをターゲットにしているか?なども考慮する必要があるね。

ふむふむ。ターゲットユーザーや優先度、役割などを考慮するのですね。

わかりました!! 今回のクライアントの場合は、中規模なのでレスポンシブレイアウトを提案してみようと思います!

役割ごとに、できること・できないことを分離するための権限設定って?

ではでは、続いてWebサイト運営をするための権限の話にもどろうか。

はい! お願いします!

まず、Webサイト運営に関わる人ってどういう人がいると思う?

規模によると思いますが、こんな感じですかね……。

• Webマスター
• ニュースなどを書くライター
• 書かれたニュースなどをチェックする編集長
• Webサイトを構築する人
  

確かに規模にもよると思うけど、そんな感じだね。

さて、この人たちが全員同様に、「すべてが管理できる権限」を持って運営したら何が起こる可能性があるだろう?

おそらく、記事を書くだけの人の場合あまりWebに詳しくない人もいるだろうから、間違って重要な設定変更しちゃった……みたいなことが発生する可能性があります。

うんうん、そうだね。「船の先端でポーズとってただけのつもりが、うっかり面舵一杯～!! 」みたいなとこ触っちゃって、氷山にぶつかって船が沈むーみたいな感じになるよね。

(そんなことあるのか? ……ともあれ、話を進めるためにそういうことにしておこう)

……はい、なりますね。

そういうことが起きないように、必要な人に必要な権限を与えてWebサイトを運用することが大事だよね。

例えば、今回利用するCMS「MovableType.net」の権限と照らし合わせて見てみようか。

【Webマスター】
まず、Webマスターとなる人は、Webサイトの全体を管理する必要があるので、サイト管理者(オーナー)の設定になるね。この人は、Webサイトの全場所を触れるよ。

【ライター / 編集長】
次に、例えば、ニュースは複数人のマーケティング担当者が書いて、公開前のチェックをマーケティングチームの上司が編集長として行うと仮定しよう。

各マーケティング担当者は、ニュースブログのライター権限をもらう。また、広報担当者は自分が書く記事のみを編集できる。ただし、記事の公開はできない。

上司は、ニュースブログの編集長権限を持っているので、全員が書いた全記事を閲覧・編集でき、また、記事を公開することができる。これにより、ライター権限を持つマーケティング担当者が書いた記事を編集長権限を持った上司が確認し公開する、という流れにできるんだよね。

【プロダクトページの管理者】
製品ページや事例ページは、プロダクト担当者が原稿を書いて、公開権限も持つとする。この場合、プロダクト担当者が担当製品のブログ管理者としての権限をもらう。

【Webサイト構築をする人】
Webサイト構築中は全権限をもらい、すべての部分をいじれるようにするけれど、実際にサイトの運用がはじまったら権限を抑えて必要に応じて権限を再度付与する。

といった、きめ細やかな運用ができるよ。

なるほどなるほど。必要な人に必要な権限だけを与えて運用できれば、間違いのない確実な運用が可能になりますね!

今回のWebサイトの運用方法も、だんだんイメージできるようになってきました。早速、これをもとに制作を進めてみます!! また分からない部分が見つかったら教えてくださいー。

OKぼくじょー(シャドーボクシング)

(またやってる……。そーっと去ろう)

スマートフォンに対応したサイトの構造、そして担当者の役割に合わせた権限付与などがなんとなく分かってきたりん。「Webサイト制作を進めていくのに、注意することとかあるのかなぁ」など疑問に思いつつ、帰宅するのでありました。

次回は、バージョン管理システムで制作履歴を保持しながらの安心・安全なサイト制作についてご紹介します。

執筆者紹介

早瀬将一

シックス・アパートにて、主にWebサービス型CMS「MovableType.net」の製品企画を担当しています。個人活動として、大学時代から音を中心としたインタラクティブ作品を制作。音に限らない作品やソフトウェアも作ってます。詳しくはWebで!