Web関連

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

0

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

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

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

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

コンテンツの洗い出し

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

最後に

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

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

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

関連するサービス

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    Webサイトの裏側までこだわるアートなHTMLソースコード集

    普段何気なく見ているWebサイトの中には、"表側"のデザインはもちろ…

  2. Web関連

    段取りで大変な大掃除も負担軽減できる

    年末準備には大掃除・年賀状の準備・御節の準備などがありますね。特に大変…

  3. Web関連

    スマホサイトが超快適に!Google「AMP」とは

    Google「モバイルフレンドリー」のアップデートからもうすぐ1年が経…

  4. Web関連

    スマホはアプリ?サイト?どっちがいいの?

    タブレットを買ってからスマートフォンが持っているだけになっています。…

  5. AI関連

    【必見】デキる人は使ってる!WBSを活用してスマートなタスク管理をしてみませんか?

    どうも、自粛太りに焦り、最近筋トレを始めたAIコンサルの淺井です。…

  6. Web関連

    現場レベルのデータ分析。セルフサービスBI活用シチュエーションを考えてみた

    従来のやり方や、経験者の勘に従った「こうすれば売れるはず!」というマ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    美味しく健康的な料理はAIの活用で
  2. Web関連

    健康管理アプリ「あすけん」を一か月使用してみたので、感想を書きます。
  3. Web関連

    採用サイトで学生が1番気になっているところとは!?
  4. サービス・新技術

    【非接触技術×AI】あらゆる場面で非接触がスタンダードとなる日は近い?
  5. AI関連

    【テレワーク×AI】今後も続くであろうテレワークとどう向き合っていくのか
PAGE TOP