サイト制作前のこころがけ

TOMMYTOMMY

こんにちは。01wave冨永です。

絶賛!社内研修中の日々が続いております。
サイト制作にあたり、一番はじめの段階で行き詰まっていたところ、サイト制作前にこころがけておくと良いことを教えてもらいました。

サイト制作と情報設計

ウェブサイト制作の過程として、情報設計は最初に取りかかる工程になります。
ワイヤーフレーム作成やデザインデータ作成などの前に、ウェブサイトの目的・役割を明確にした設計を行うことで、サイトの制作の指標がしっかりできるので、その後の制作工程をスムーズに行うことができます。
今回はこの「情報設計」に焦点をあててみていきます。

図:情報設計→デザイン制作→コーディングなど実装作業→サーバー・ドメイン設定→完成

情報設計(Information Architecture:IA)とは

情報アーキテクチャInformation Architecture)は、いわゆるWeb屋用語としては、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術といった意味である。ウェブデザインの発展に伴い、従来のグラフィックデザイン(平面デザイン)に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。情報アーキテクチャはこれらの要素技術を組み合わせた、わかりやすさのためのデザインである。…
出典元:引用 – Wikipedia

Wikipediaには上記のように説明があります。
情報設計については何冊も本が出てるほど、とても奥深くて難しい分野になります。

重要な箇所としては「情報をわかりやすく伝える」ということです。

サイト制作するときにクライアントからさまざまな情報を受け取ると思います。
クライアントの希望を聞き、どんなサイトを作りたいか、どんな人に届けたいかなど、さまざまな情報をヒアリングし、その情報をわかりやすく伝えられるように情報を整理して行くことが大切です。

情報設計は誰が行うのか

日本のウェブ制作会社では、デザイナーやディレクター、プランナーの立場の方がサイトの方向性を決めることが多いかと思います。
制作するウェブサイトの目的・目標を明確にするためには、設計にかかわる人が、サイトを運用する「サイト運営者視点」とサイトに訪れる「ユーザ視点」など、さまざまな視点を持つことが大切です。

例えば、八百屋さんのサイトを制作したとします。
「サイト運営者視点」は「私のお店の野菜は新鮮さが魅力です。」
「ユーザ視点」は「誰が育てた野菜か生産者を知りたい。」

両者の視点を意識することにより、それぞれにとっての「価値」が見えてきます。
「新鮮さ」をアピールしつつ、「生産者」の情報も入れることにより、お客様にもユーザにもより良いサイト制作につながります。

サイトで情報をわかりやすく伝えるためには、多角的な視点を持つように意識するように心がけましょう。

サイト制作の流れ

  1. ヒアリング
    サイト構築の目的や顧客ターゲット、サイト規模、予算とスケジュールなどを確認し、クライアントのイメージや要望を整理します。
  2. 
情報整理
    ヒアリングで聞いた内容をもとに、サイトに載せるコンテンツを考え、サイトマップを作成します。
    この段階でワイヤーフレームの作成まで行うこともあります。
  3. 再度ヒアリング
    クライアントと情報のすり合わせを行います。
    必要に応じて提案や修正などをすることがあります。
  4. ビジュアルデザイン
    整理した情報をもとに、見た目のデザインをおこないます。
    ワイヤーフレームを作成した後に、Adobeの「Illustrator」、「Photoshop」、「AdobeXD」や「Sketch」などのツールを利用してデザインを制作していきます。
  5. マークアップや実装作業
    デザイン完成後、マークアップや必要に応じてCMSなどのシステムの実装を行います。
  6. サーバーやドメインの設定
    ビジュアルデザインの前に行うこともあります。
  7. 納品(完了)
    仮アップロードなどの確認を経て完了です。

まとめ

今回、最初のヒアリングの重要性を学びました。
しっかりとクライアントとコミュニケーションを取ることにより、サイト自体の目的のブレ、情報や認識のズレ、デザインのブレを軽減させることにつながるのだと感じました。
そして、クライアント側の希望に沿うことはもちろん、サイトを閲覧するユーザ側も意識し、「わかりやすい」情報の伝え方やデザインを心がけていきたいです。