Web関連

ワイヤーフレームを作る前に気を付けたい5つのこと~リニューアル編~

Webサイトを持っていることが当たり前になった昨今、新規構築よりリニューアルの事例が多いことから、今回は「Webサイトをリニューアルするとき」に絞って、気を付けたいことをご紹介します。

今あるものを”見える”化すること

Webサイトのリニューアルとなると、企画会議では、たくさんの新しい試みが議論されるでしょう。
しかし、せっかく出たアイデアが、実現不可能な機能だったりしたら、悲しいですね。

新しいコンテンツを考えるのも大事ですが、その前に、Web担当者は現状をしっかりと把握する必要があります。

コンテンツの洗い出し

現状コンテンツを、漏れなく洗い出しましょう。
長年Webサイトの運用を続けると、コンテンツは増殖し、体裁の統一感も無くなってきます。(最近はCMS管理でテンプレートを統一している事のほうが多いと思いますが・・)

【1】ツリー状サイトマップ(論理構造)

各コンテンツの階層構造や、それぞれの関係性を明らかにするために、ツリー図のサイトマップを作成しましょう。

【2】コンテンツリスト(物理構造)
物理的にどのHTMLが存在するのかも把握しましょう。(サイト設計もそうですが、後々のリダイレクト設定にも関わってきます)
WebサイトのURLを洗い出すのは、「Web Site explorer」(無料)がとても便利です!

自動的にWebサイトの階層構造・ファイル構造を解析してくれるツールです。

※最近のアップデートで、Win8対応になりました

ページ一つひとつをコンテンツリストに洗い出しておくことで、新しい機能を追加したときの影響範囲もわかりやすいですから、必須で行いましょう。

また、リニューアルに際してカテゴライズやコンテンツの見直しを行う場合、取捨選択が行いやすくなります。

既存システム・管理画面の確認

既存のCMSやASPをリニューアル後も流用する場合、機能や画面仕様が決まっているため、レイアウトや表示項目に制約がある場合があります。

既存システムの仕様をよく理解しないまま新しいワイヤーフレームを作成すると、開発不可能な機能がワイヤーに盛り込まれていたり、必須の機能が漏れていたり・・と、整合性の悪いドキュメントを作成することになります。
きちんと仕様を把握した上で設計に入りましょう。

新しく行いたいことを整理すること

さて、ここまでは事前準備でしたが、ここからは新しくやりたいことを整理するフェーズです。

新しく行いたいことをブレイクダウンする

抽象的なアイデアを下準備もなくワイヤーフレームに起こそうとすると、白い紙の前でウンウン唸ることになりますので、まずは上位概念をブレイクダウンしていく必要があります。
下記の図のように、ブレストで要件をまとめると、必要ページ・コンテンツが見えてきます。

 

新規コンテンツ・既存コンテンツの整理

新規・既存コンテンツを漏れなく洗い出すことができた段階で、リニューアルの目的に沿ってコンテンツを整理・統合しましょう。

先ほど述べた既存コンテンツリストやサイトマップの該当箇所に、新規コンテンツや機能要件を追加します。
この際、ユーザーフロー図などに矛盾がでないように、調整を行いましょう。

最後に

既存のWebサイトを基にリニューアルを行うときは、事前に情報を整理・洗い出ししておくことによって、その後の工数に影響がでます。
なるべく手戻りを少なく、プロジェクトを進めるためにも、心がけてみてくださいね!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ユーザビリティ(UI/UX)の向上
ホームページ制作

集中力を上げたい人必見!おすすめストリーミングサイト前のページ

Webサイトに必ず必要なサーバーについて次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    webサイトにおけるアクセシビリティの考え方

    Webサイトでは「ユーザビリティ」という考え方が非常に重要視されていま…

  2. Web関連

    アプリを制作する前に知っておきたいこと~デメリット編~

    みなさん、スマートフォン(以下、スマホ)やタブレットのカバーにこだわり…

  3. Web関連

    【Web文章術】そうだ、人を惹きつける文章を書こう

    皆さんこんにちは。堀井です。最近仕事が終わって家に帰るとすぐに寝てしま…

  4. Web関連

    離脱されないECサイトに必ずある9つのポイント

    最近一人暮らしを始めてから、食糧からマンガ、家具までほとんどネットで購…

  5. Web関連

    ニュースを読んで快適なビジネスライフを

    こんにちは!元野球部デザイナーの栄です!みなさんは朝のニュース…

  6. Web関連

    コンセプトのないデザインは味のない料理

    新社会人のみなさん、入社おめでとうございます!休みの日は、寝たり食べた…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    単語の覚え方から実際の利用シーンまで。個人的オススメ英語学習サイト3選
  2. AI関連

    AIチャットボットって一体どこがAIなの?
  3. Web関連

    意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)…
  4. Web関連

    リッチスニペットの新しい手法 schema.orgとは?
  5. AIさくらさん

    【人工知能・AI×メディア】キャラクター×デジタルサイネージに無限の可能性!
PAGE TOP