ITで最高の体験を。いざフルスタックエンジニアへ

「UX/UIデザイン」と「web運営」、たまにプログラミングや意識高い系の記事を発信

3分で理解。デザインを考える前に、サイト設計ってどうするの?

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

webやUXデザインについて発信していますが、

今回はUXデザインの目的、"ユーザー体験の設計"を通して

どのように「使いやすい」、「わかりやすい」webサイトを

構築していくのか気になりますよね?

今回はサイト設計の基盤、

サイトストラクチャについて書きます。

 

f:id:ryuya_u:20180928142548j:plain

目次

サイトストラクチャとは

簡単に言うと、

webサイト全体の構造を示す設計書のようなもの。

 

ページとページをどのような順番で結びつけていくか、

コンテンツをどのページに置き、

ユーザーを目的の情報までどうやってたどり着けるようにするか

をまとめたものです。

サイトストラクチャの作り方

1.メインとなるターゲットの導線(ユーザーの道筋)を書き出す

まず最初に、ターゲットとなるユーザーが目的の情報まで

迷うことなくスムーズにゴール(サイトの目的)まで辿りつけるように

イメージしていきます。

 

設計者やクライアントが重要と考えるコンテンツも

ユーザーから見たら意外と重要ではないこともあります。

 

そのため、いかにサイト全体を俯瞰し、

メインとなる導線を明確にしていくかが重要です。

 

2.サイトストラクチャのパターンを参考にする

多くのwebサイトは、いくつかのサイトストラクチャ のパターンが

組み合わされて成立しています。

 

以下がサイトストラクチャの主なパターンになります。

・ファセット分類型構造

ECサイトなど、「価格」や「カテゴリ」など様々な条件で

検索することができる。

 

・階層型構造

コーポレートサイト(企業サイト)によく使われています。

「どこに何があるか」が明確になっている。

 

・直線型構造

お問い合わせ・予約・会員登録

といった入力→確認→送信の一連の流れを指します。

ユーザーが一つのタスクに対して、集中できるように

なっています。

 

3.スマートフォンのデザインも考慮する

今日ではスマホからサイトを訪れるパターンが

60%以上と言われています。

 

そのスマホでのデザインを無視してサイトを構築してしまうと

スマホユーザーからのサイト導入が期待できないもの

となってしまいます。

 

”モバイルファースト”スマホサイトから設計をするという

スタイルも生まれているので、

自分のサービス、ターゲットに合わせて考えましょう。

 

まとめ

今回はサイトを構築する前に、

どんなサイトを作っていくか?

 

この部分に焦点を当て、

サイトストラクチャについて紹介しました。

 

一言でサイトストラクチャと言っても、

様々なサイトがあるように

サイトストラクチャにもパターンがたくさんあります。

 

そのパターンを今回作成するサイトの目的を考え、

組み合わせていき、

オリジナルが完成するのです。

 

次回はサイトストララクチャの種類について書こうかな

と思います。

【スポンサーリンク】