サイト設計とは｜手順・要件定義・成功のコツをWEBデザイナー視点で解説

WEBサイトの立ち上げ時に必ず必要になるのが「サイト設計」です。

何を作るときでも、設計図は必ず必要になりますよね。そして、その設計図が間違っていれば思い通りのものはできあがりません。

そこで本記事では、WEBデザイナーがWEBサイトを制作する際のサイト設計の作り方を解説します。

それに付随して“要件定義書”の書き方も解説するので、どちらも耳馴染みがないというWEBデザイナー初心者の方はぜひ最後までご覧ください。

サイト設計はプロジェクトの進行計画を決めるもの

サイト設計とは、プロジェクトの最初に制作会社とクライアントの間で（またはどちらかだけの場合もあります）決める全体の進行計画のことです。

決める内容は多岐にわたります。

後ほど紹介しますが一例としてあげると、サイトの運営目的やターゲット、発信するコンテンツの内容、具体的なデザインの方向性や機能、スケジュール、リリース後の運用方法などがあります。

サイト設計はあやふやな情報をはっきりさせ、サイト制作各所に落とし込むためのものです。

WEBサイト設計が必要な7つの理由

サイト設計をおこなう目的は、クライアントにとっても制作サイドにとっても色々あります。

具体的な目的について見ていきましょう。

SEO効果の高いサイトを作るため

WEBサイトの制作において最も大切なのは”SEO対策”です。

どれだけコンテンツに力を入れても、ユーザーが検索したときにWEBサイトが検索上位に表示されなければ訪問してもらうことはできません。

検索上位にサイトを表示させるためには、すでに検索上位に表示されている競合の調査や、ターゲット層がよく検索しているキーワードの選定などが必要になります。

これらを事前に調査しサイト設計に盛り込むことで、SEO効果の高いサイトを作ることができ、検索エンジンからより多くのアクセスが得られるようになるでしょう。

ただし、最近のSEOでは「ユーザーにとって価値のあるコンテンツが用意されていること」が最も大切だと言われています。

キーワードをサイト内に多く入れるなどの手段より、大切なのはユーザーの何度も訪問したくなる満足度が高いサイト制作をすることだという点は忘れないようにしましょう。

WEBサイトのコンテンツに一貫性を持たせられるため

商材を利用するターゲット層の来訪を促すきっかけになるのがコンテンツです。

コンテンツを作成するときに重要なのが”コンテンツに一貫性を持たせること”です。

偶然ユーザーがサイトに立ち寄ったとき、サイト内で取り扱っているコンテンツの内容が散らかっていると、もう一度利用したいと思ってもらえませんよね。

コンテンツに一貫性を持たせることはブランディングにもつながります。

たとえばコンテンツをきっかけにターゲット層の集客ができた際、ユーザーにとって有益な情報が溢れているサイトならそのユーザーがサイトのファンになり、ゆくゆくはファンから顧客になることもあります。

ユーザーがファンになると、サイト内で商材の宣伝を見ても広告っぽさを感じることが少なく、成約数の向上が期待できます。

サイト設計を行う際に統一したルールやサイトの方向性を決定しておくことで、コンテンツに一貫性を持たせることができ、それが未来の顧客につながります。

ユーザーの不安や疑問をサイト内で解消するため

ほとんどのユーザーは商品やサービスをよいと思っても、不安や疑問点が解消されなければ問い合わせをすることなくサイトから離脱してしまいます。

必要な情報をサイトにわかりやすく開示しておくと、商品やサービスを購入する前の不安や疑問点を解消できますよ。

サイト離脱を防ぐためには、ユーザー目線に立って使いやすさを考え、次に知りたいことや気になることを配置するなどの工夫が必要です。

あらかじめサイト設計の段階で洗い出しをしておくとサイトに盛り込むことができ、問い合わせなどが減るなどの運用面でのメリットが生まれます。

制作チーム内やクライアントとの間で認識を共有するため

サイト制作に関わる人の立場はさまざまです。

制作サイドであれば、WEBディレクターやWEBデザイナー、ライター、カメラマン、コーダーなどの担当に分かれていることがあります。

一方のクライアントサイドでは、サイト企画担当やデータベース管理担当、商品担当、システム担当などが関わっています。

サイト制作プロジェクトに関わる人数が増えれば増えるほど、同じ理解度での情報を共有するのは難しいですよね。

サイト設計は全員が共通認識を持つための基準書としての役割を担うことができるのです。

サイトリリースまで無駄のない作業とコストで進めるため

新規サイト立ちあげももちろんですが、特にサイトリニューアルの場合はクライアントも通常業務を抱えながらのケースが多いです。

途中で何度も修正が入るとその都度確認が必要になり、サイトリリースまでのスケジュールがタイトになってしまうケースが見られます。

他にも開発に時間とコストをかけすぎてしまい、リリースまでに予算と時間がなくなってしまうケースもあります。

上記のようなケースは最悪の場合、リリース日が後ろ倒しになってしまうので避けるべき事態です。

サイト設計の精度が高いと予算と時間を配分してあるので、途中でトラブルが起きても調整可能で、計画的にプロジェクトを進めることができます。

リリース後に分析しやすいサイトを作るため

サイトは、制作をしてリリースしたら終わりではありません。

運用でよりよい成果を生み出すためには、サイトの閲覧（PV）数や来訪者数、コンバージョン数などのデータをもとに分析をおこない、PDCAを回す必要があります。

分析データに必要な項目は、サイトの種類によっても違います。

サイト設計の段階で目的に応じてGoogle AnalyticsやSearch Consoleなどの分析ツールを選定し解析環境を考慮しておくと、制作途中でタグを埋め込むなどの作業がスムーズになります。

リリース後に運用しやすいサイトを作るため

リリース後に運用しやすいサイトとは、情報コンテンツの更新や変更が簡単にできるサイトのことです。

更新や変更の内容としては、コンテンツを新たに増やしたい、バナーやボタンのABテストをしたい、などが考えられます。

また、新機能開発が予算の関係で実装はリリース後になるということもあります。

サイト設計でリリース後にトラブルになりそうなことを予期できる限り洗い出しておくと、未然に防ぐことができるでしょう。

トラブルをリリース前に潰しておくことで、リリース後に運用しやすいサイトになります。

WEBサイト設計のときに決めておきたい要件

設計する要件は、必要な工程や担当ごとに準備するとよいでしょう。

制作現場によって要件の仕分け方法も変わると思いますが、よく使われる要件の項目をピックアップして紹介します。

サイトマップやワイヤーフレームで全体構造を決める

サイトマップとはサイトの全体がわかる地図のことであり、ワイヤーフレームとは各サイトページの間取り図のことです。

コンテンツの配置や機能の設置など、どこに何を配置するのかを決めてサイトマップやワイヤーフレームを作っていくことで、サイト全体の要素を把握できます。

全体構造を決める際、サイトの方向性や新しく導入するシステムなどを盛り込んでいくことで、サイトの全体像だけでなく制作進行のスケジュールや必要な新規開発案件などを洗い出すことができます。

サイトマップやワイヤーフレームは、WEBディレクターやWEBデザイナーが書き起こすことが多い作業です。

制作工程でとても重要なツールとなるので、WEBデザイナーはサイトの構造をしっかり把握しておくとよいでしょう。

対応するデバイスやブラウザを決める

サイトはユーザーが使用するデバイス（情報端末）であるパソコンやスマートフォン、タブレットによって見えかたが異なります。

最近ではほとんど見かけなくなりましたが、スマートフォンで開いたときにパソコン用の大きな画面が表示され見づらいと感じた経験がある人もいるのではないでしょうか。

サイトを最適に表示させるには、デバイス別の画面サイズに合わせたレイアウト作り、デバイスに合った最適な表示で見せることが必要です。

最近ではスマートフォンでサイトを閲覧する人が多いので、スマートフォンの画面を中心に決めることが多いです。

またブラウザ（インターネット閲覧用ソフト）にも、Internet ExplorerやGoogle Chrome、Safari、Firefoxなどいろいろな種類があり、同じサイトを表示しても崩れて見えることがあります。

こうしたユーザーのインターネット環境によって表示に違いが生まれないように、対応するブラウザを決めておく必要があります。

サイト内を移動しやすい動線を設計する

よくショッピングモール型のECサイトで、商品詳細を確認するページの階層が深いケースが見られます。

細かくカテゴリ別に分けられているためです。

たとえば以下のような階層の例をみてみましょう。

ドラッグストア > 衛生用品・ヘルスケア > 家庭用マスク・アクセサリー > 家庭用マスク > 商品ページ

右にいくほど階層が深くなり、マスクの商品ページは第5階層目です。

カテゴリを細分化しすぎると、見たい商品ページまでにクリックする回数が増えるのでユーザーは探しづらくなります。

他のカテゴリへの移動もしにくくなるので、サイト内を滞在する時間が減り、離脱が多くなることも考えられます。

商品数が多くない限りは、階層を減らすことがおすすめです。

さらに階層の浅いサイトのほうが検索結果で上位表示されやすいとも言われているので、設計の際に考慮できるとよいでしょう。

ユーザーが目的を達成しやすい導線を設計する

導線はしばしば動線と似たような意味合いで使われることが多い言葉です。

前述したサイト内の移動のしやすさに焦点を当てた”動線”とは違い、”導線”はサイトに来訪したユーザーの目的を早くて簡単に達成させること、の意味合いで紹介します。

ユーザーは、商品購入や情報を知る目的でサイトに来訪します。

来訪したときにユーザーが簡単に目的を達成できないと、次回は利用してもらえないかもしれません。

また、商品購入やサービスを成約するまでの途中に、不安や疑問点を解消するようなコンテンツを配置するなども重要です。

目的地までページ移動の数を少なくし、最短経路でユーザーが到達できるよう考えることが導線設計になります。

ユーザーの興味を引くコンテンツを企画する

コンテンツは、サイトリリース後に少しずつ増やせばいいと考える人もいるようですが、サイトの目的達成に大きく関わる部分なのでリリース前には準備しておきたい要件です。

コンテンツは、ユーザーの定期的なサイトへの来訪を促し、会社や商品、サービスに興味を持ってもらうきっかけづくりになります。

魅力的なコンテンツを用意するには、商品やサービスを購入する典型的なユーザー像であるペルソナが重要です。

ペルソナの悩みを解決するような情報や興味を持ちそうな情報などを提供できるようなコンテンツを作れるとよいでしょう。

ユーザーと継続的な関係を続けていくことで、今は商品やサービスの購入に至らなくても企業のファンになってくれることもあります。

ユーザーをファン化するためのきっかけになる企画を設計段階で決めておきます。

情報の表示ルールなどを決める

サイトに情報を表示させるために、ナビゲーションの表示方法やページリンクに関するルールなどを設計する必要があります。

ナビゲーションは、ヘッダー下固定のメニュータブやパンくず、検索窓、ページ割などがあり、ユーザーを目的のページまで案内します。

ページリンクとは、関連記事や関連商品のサイト内リンクを貼ることで、ユーザーが興味を持ちそうな情報を提供できるものです。

ページリンクがあるとサイトパフォーマンスがあがり、SEO対策になるメリットがあります。

ナビの配置ルールやサイト内リンクを入れる際のルールを決めておくと、サイトの統一性が保たれ運用しやすくなります。

公開用や管理用などの画面設計をする

更新の多いサイトの制作になると、CMS（コンテンツを管理するシステム）を利用してサイトの更新をおこなうケースがあります。

公開用の画面とは別に、限られた人しか見られない管理用の操作画面やプレビュー画面を用意することがあります。

管理画面は、サイトの更新や表示変更の指示をおこなったり、分析結果などが見られたりできる画面のことです。

プレビュー画面は、サイト内に新しいカテゴリやコンテンツを追加しようとしたときに、サイトの表示が崩れるなどの不具合がないかを本番公開前にチェックするために、画面を分けて設計しておくことがあります。

インフラ基盤などのシステム設計をする

Webサイトで使う”システム”とは意味合いが広い言葉です。

サイト制作の裏方といわれることが多いですが、ユーザビリティやサイトの運用面で大きな影響力を持つのがシステム設計です。

本記事では、デザインしたものをサイトに表示させるHTML・CSSやサーバーに大量のデータを保管し必要なときに引き出して利用するデータベース、個人情報を守るためのセキュリティなどを含みます。

【業態別】WEBサイト構造の種類と設計例

WEBサイト設計では、業態やサイトの目的に合わせて、必要なページと階層を決めることが重要です。

ユーザーが求める情報と最終的に取ってほしい行動を整理した上で、適切な構造を選びましょう。

サイトマップを見ると、それぞれの情報がどのような階層で整理されているかを把握できます。

【コーポレートサイト】

【ECサイト】

【ブログメディア】

【ポートフォリオサイト】

同じWEBサイトでも、目的によって適した構造は異なります。

サイト設計では、掲載情報とユーザーの行動を照らし合わせながら、無理のない階層に整えることが大切です。

サイト設計の依頼時に必要な「要件定義書」って何？

要件定義書とは、新規WEBサイト制作やリニューアルの制作工程で迷いが生じたときに確認する、サイトの目的などの指針をまとめた資料のことを指します。

要件定義書をつくることで、サイト制作に関わる全員が同じ情報や目的を持って作業を行いやすくなり、スケジュール通りの進行やクライアントとのズレが少ないサイトをつくることができます。

要件定義には複数の項目があり、作り方も会社によってさまざまです。

なのでここからは、要件定義書を作るためのサイト設計の流れを解説します。

WEBデザインにおけるサイト設計の簡単な流れ

ここからは、サイト設計の基本的な流れを紹介します。

主な手順は、次のとおりです。

各工程を順番に進めることで、目的から大きく外れることを防ぎ、公開後も継続的に改善できるWEBサイトを設計できます。

競合・現状分析を行う

最初に競合サイトと自社サイトを分析し、改善すべき課題を整理します。

競合サイトを確認するときは、次の点に注目しましょう。

既存サイトがある場合は、アクセス数やよく見られているページ、途中で離脱されているページなども確認します。

感覚だけで判断せず、データを活用することで、サイト設計で優先すべき改善点を把握できます。

コンセプト・コンバージョンポイントを決める

分析した課題をもとに、WEBサイトの目的とコンセプトを決めます。

まず「売上を伸ばす」「問い合わせを増やす」などの最終目標であるKGIを設定し、その達成度を測るKPIも数値で定めましょう。

続いて、サイト内でユーザーにとってほしい行動を明確にします。

主なコンバージョンポイントは、次のとおりです。

ここで決めたコンセプトは決めたコンセプトは制作の判断軸となるため、チーム内で共有して方向性のブレを防ぎましょう。

要件を決めるまでのスケジュールを立てる

要件をいつまでに策定するかを決めるまでには、以下のような流れになることが多いでしょう。

クライアントへのヒアリングでは、後述する”要件定義で決めるべきこと”でサイトの目的やコンセプトを確認していきます。

サイトをリニューアルする場合では、現状の課題や問題点も確認し、改善できる点などを提案できるとよいでしょう。

ヒアリングを受けて、制作会社がクライアントの意向に沿ったサイトの提案を作り、クライアントと制作会社で合意したら要件定義書にまとめて、制作がスタートしていきます。

上記の流れに沿って要件定義書にまとめるまでのスケジュールを立てます。

▼ヒアリングについてより詳しく知りたい方は下記の記事をぜひ参考にしてくださいね。

あわせて読みたい

WEBデザインのヒアリングとは？必須10項目とシートの使い方 WEBデザインでは、ヒアリングによっていかにクライアント抱える問題や要望を把握し、デザインできるかが重要になります。初心者でもわかりやすいようにヒアリングの目的、必須の10項目、ヒアリングシートの活用法について解説します。

要件定義書をまとめる

要件定義で決めるべき内容は制作するサイトの種類によりさまざまですが、まとめる内容の例を以下に挙げます。

上記の他に、前述した”設計する要件の種類”で作成した書類などの設計一覧を一緒にまとめておくか、要件定義書に盛り込んでおくとよいでしょう。

リニューアルの場合ならサイトマップで改変するページを指定し、ページに付随する設計一覧をまとめたものとワイヤーフレームを作っておきます。

ワイヤーフレームに関しては、次の項で説明します。

▼要件定義に重要になってくるコンセプトについて、より詳しく知りたい方は以下の記事を読んでみてくださいね。

あわせて読みたい

デザインコンセプトとは？意味や作り方8ステップを例文付きで解説 「デザインコンセプトって、テーマやアイデアとどう違うの？」「コンセプトが大事とは聞くけれど、どうやって作ればいいのか分からない」 デザインコンセプトとは、デザ…

キーワード・ターゲットを設定する

サイト設計では、想定ユーザーがサイトに辿り着きやすい導線としてのキーワード設定とターゲット像を事前に策定しましょう。

ターゲット像を作る際は、ターゲットにするユーザー層の属性を絞り込むようにします。

絞り込む属性の例は以下の通りです。

これらの項目はユーザ－像(ペルソナ)と類似していますが、ターゲット層はあくまで幅広く設定した属性のことを指し、ユーザー像はターゲット像の条件に当てはまるより具体的な個人のことを指します。

似ているものなので混同しないように注意しましょう。

ターゲット層が設定できたら、次はターゲットがサイトを訪問する動機や検索しがちなキーワードを考えていきます。

競合サイトのリサーチやGoogleキーワードプランナーなどのツールを活用し、メインキーワードやそれに紐づいて検索されるサブキーワードを探す流れが一般的です。

このときもとにかく関連するキーワードを盛り込むのではなく、あくまでユーザーが過不足ない情報を得ることができ満足してくれる姿を想像しながらキーワードを選定しましょう。

サイトマップとワイヤーフレームを作成する

サイトマップで全体の構造を練ってから、ワイヤーフレームで各ページに入れるコンテンツやレイアウトを決めていきます。

ワイヤーフレームは、トップページから作り始め階層が下のページを作っていきます。

要件定義書作成と同時に進めることもありますが、サイトマップやワイヤーフレームは、WEBディレクターやWEBデザイナーが作成する場合が多いです。

簡単に作れるものなので、勉強しておくとよいでしょう。

▼ワイヤーフレームの作り方やレイアウトについて具体的に知りたい方は、こちらを参考にしてみてください。

あわせて読みたい

ワイヤーフレームとは？｜初心者向けに作り方やおすすめツールを解説 WEBサイトやアプリの制作でよく耳にする「ワイヤーフレーム」。 名前は知っていても、「何のために作るの？」「デザインカンプとは何が違うの？」と疑問に感じている方…

あわせて読みたい

WEBデザインのレイアウト6種類｜サイト別の見本も紹介 WEBサイトにおいて、とても重要なレイアウト。 どんなにおしゃれなテイストでデザインができていたとしても、レイアウトがうまくできていないと、途端に古臭くてかっこ…

デザインの制作

サイトマップやワイヤーフレームが完成したら、実際にWEBサイトのデザインを行っていきます。

WEBサイトにおけるデザインとは、ワイヤーフレームを参考にしてモックアップ(ワイヤーフレームに色や画像、装飾などのデザインを追加したもの)を作成することを指します。

WEBサイトの見た目はここでほぼ完全に決まるため、事前に作成した要件定義(WEBサイトの目的)を達成するための装飾や画像の作成、色味による統一感などを意識しながらデザインを行いましょう。

ここでWEBデザイナーが作成したデザインをコーダーがWEB上で閲覧できるようにすれば、WEBサイトが完成します。

運用・改善体制を設計する

WEBサイトは公開後の改善も重要なため、サイト設計の段階で運用・改善の体制まで決めておきましょう。

あらかじめ担当者と作業内容を整理しておけば、公開後も無理なく更新を続けられます。

アクセス解析で結果を確認し、課題を見つけて改善するPDCAを継続することが重要です。

サイト設計でWEBデザイナーが意識すること

サイト設計全体の流れを見てきましたが、WEBデザイナーが意識するポイントにはどのようなものがあるでしょうか。

デザインを作るうえで意識したいポイントを紹介します。

ターゲットのペルソナに合ったデザインになっているか

ペルソナは前の項でも触れましたが、架空に設定したターゲットユーザーのことで、年齢や性別、職業、住んでいる地域、趣味、悩みなどを仮設定した人物像です。

ペルソナを設定するとサイトのコンセプトが決まり、WEBデザイナーはペルソナをもとにフォントデザインやサイズ、使う色展開などのサイトのテイストを選んでいくことができます。

たとえばマタニティ向けのサイトでは、淡い色使いや細めのフォントを使って安心感や優しさをイメージさせるサイトが多いです。

証券や不動産であれば、はっきりした濃いめの色を使い、高級感や信頼性をイメージさせるサイトが多く見られます。

以上のような例は、「ターゲットのペルソナだったらどういうデザインを良いと感じるだろう？」と考えて作られています。

ペルソナの嗜好や興味関心が細かく設定されていると、ペルソナはどう感じるだろうかと想像しやすくなります。

ユーザーに近い視点を持ってデザインを作れるとよいでしょう。

サイトの階層構造が複雑になっていないか

サイト構造が複雑になっていると、ユーザーが目当てのコンテンツに辿り着くことに苦労しサイトを離脱することがあります。

そうなると結果的にユーザビリティが低いサイトだと判定され、検索上位を逃してしまうかもしれません。

サイトの階層構造は可能な限り3階層までに設定し、ユーザーが直観的に欲しい情報に辿り着けることが理想とされています。

サイトの性質上どうしても階層が4〜5階層に渡ってしまう場合は、カテゴリの数を増やして深い階層の情報を3階層に引き上げるなどの工夫を行いましょう。

ユーザビリティを意識したデザインになっているか

ユーザビリティを意識したデザインとは、見やすく使いやすいサイトであることです。

確認すべき点は数えあげればキリがありませんが、例を挙げてみましょう。

細かいことのようですが、サイトのユーザビリティに影響を与えます。

見にくく使いづらいサイトでは離脱につながりやすくなり、今後サイトを利用してもらえなくなる可能性もあります。

コンテンツの順番やボタンの位置、必要な情報があるかどうかなどはワイヤーフレームの制作段階でも気付くことができるポイントですので、ユーザー目線で客観的に見るよう意識できるとよいでしょう。

ワイヤーフレームのとおりにデザインしないこと

”ワイヤーフレームのとおりにデザインしない”とは、決して自分の個性を主張したデザインをすることやレイアウトやテイストを大きく変えて作るなどの意味ではありません。

駆け出しWEBデザイナーさんが陥ってしまいがちなことに、デザインを起こすときにワイヤーフレームに引っ張られてデザインしまう場合があります。

できあがったデザインがワイヤーフレームとまったく同じだったら、機械で作ることと変わりありません。

ワイヤーフレームは全体を把握するために作るもので、細かい見せかたの工夫などはされていないものです。

どうやったら読みやすいかや目立たせたいものを目立たせられるかを考えて作るのが、WEBデザイナーの腕の見せどころになります。

フォントの大きさや画像をそのまま使うのではなく、どうやったらより見やすくなるかを作る前に考えてからデザイン制作に入るとよいでしょう。

そして変更した際は、変更した理由を説明できることが重要です。

WEBデザイナーの知見を活かしたデザイン制作ができれば、クライアントやチームから信頼を置かれるようになるでしょう。

テーマに一貫性をもたせて専門性を高める

WEBサイト制作では、テーマに一貫性を持たせることも重要です。

幅広いコンテンツを取り扱えば、それだけターゲット層が増えるためアクセスの増加につながると考えられがちですが、そうすると反対にサイトの一貫性や専門性が失われ、結果としてアクセスが低下する傾向にあると言われています。

ユーザーは“問題の解決”を求めて検索を行います。つまりそこには“より確からしい情報が欲しい”という欲求が隠れています。

よってサイトを作成する際はテーマに一貫性を持たせて専門性を高め、同じ問題を抱えたユーザーに“このサイトは信用できる”と感じてもらえるようにしましょう。

Z型・F型などユーザーの視線移動を意識する

WEBデザインでは、ユーザーがページを見るときの視線の流れを意識して、重要な情報を配置することが大切です。

【Z型】画像や情報量が少ないページに向いている

【F型】文章や記事が多いページに適している

【N型】縦書きのコンテンツで使われる

Z型では右下にCTAボタンを置き、F型ではキービジュアルや見出しなど重要な情報を上部に配置すると効果的です。

視線の流れに沿って設計すれば、伝えたい内容がしっかり伝わり、問い合わせや購入にも結びつきます。

Webサイト設計におすすめのツール5選

ここからは、実際にプロの現場で使用されているサイト設計にオススメのツールを紹介します。

ツールの使い勝手は効率や成果に直結するため、気になったツールはぜひ実際に使用感を試してみることをオススメします。

Jira（ジラ）｜プロジェクト管理

Jjiraは、WEBデザインの現場で重宝されているプロジェクト管理ツールです。

プロジェクトごとに進捗確認や課題の共有を行うプロジェクト管理ツールとしての機能は当然ながら、その最大の特徴は後述するワイヤーフレーム作成ツールFigmaとの連携機能が2024年3月に追加されたことです。

これまではプロジェクト管理ツールで挙げられた課題を確認し、Figmaを開いて修正、修正した旨を課題にコメントし報告する、などの煩わしい作業が現場で発生していました。

しかしこの連携機能により、課題に直接Figmaのデザインリンクを埋め込むことが可能になり、デザインの修正確認がJiraからリアルタイムで行えるようになりました。

この機能を使用すればプロジェクト内での修正提案や解決がスムーズに行えるため、作業効率が格段に上がるかもしれません。

Figma（フィグマ）｜ワイヤーフレーム作成ツール

Figmaはワイヤーフレーム作成ツールとして、AdobeのXDと並んで紹介される2大ツールのひとつです。

Figmaは特徴を列挙するだけでその便利さを理解できます。

強いてデメリットを挙げるとすればAdobe製品と連携することができないため、もしもすでにIllustratorやPhotoshop、Adobe XDを使用している人は乗り換えた際に不便を感じることがあるかもしれません。

それでも同時に共同編集が行える点は、十分すぎるメリットと言えるのではないでしょうか。

xmind（エックスマインド）｜マインドマップツール

xmindは、マインドマップを作成してアイデアを整理するためのツールです。

自分のアイデアを整理するために使用するのが一般的な使い方ですが、WEBデザインに使用する場合はサイトマップの作成に活かすことも可能です。

チームで作成したファイルを共有することもできるので、プロジェクト管理ツールにアップしておけばいつでもサイトマップを確認できる環境を構築できるでしょう。

他にもxmindではタスク優先度やタスク進捗のマーカーも付けられるため、チーム内でのタスク達成度の確認に活かすこともできます。

チームで動くときはとにかくスケジュールや課題の共有が大切なので、どのようにでも使える便利なツールは重宝されるのではないでしょうか。

Ahrefs（エイチレフス）｜SEOツール

Ahrefsは、Adobeも社内で使用している強力なSEOツールです。

SEOツールといってもイメージが付きにくいかもしれませんが、Afrefsで使用できる機能は以下の通りです。

他にも多くのSEOツールで使用できる機能を包括しているため、Ahrefsだけ使えばSEO対策のほとんどは完了すると言っても過言ではありません。

GoogleやFirefoxの拡張機能を使うことで、現在表示されているWEBページを瞬時に分析することもできます。

GoogleやFirefoxの拡張機能と連携できる時点で、世界的にシェアのあるツールであることがわかりますね。

semrush（セムラッシュ）｜オールインワン競合分析ツール

semrushも、SEO対策に使用できるオールインワン競合分析ツールです。

SEOツールは先ほどAhrefsで紹介しましたが、semrushは競合サイトの分析(SEO、広告、SNS)に特化しており、公式も競合サイトの分析に使用することを推奨しています。

SEOについて使える機能はsemrushと遜色なく被リンク分析も可能であり、サイトの健康状態のチェック(セキュリティの低下やアクセス解析によって明らかになった問題点や改善点)まで行える高機能さが特徴です。

広告は特定のキーワードに対して出稿している広告主の確認、SNS広告やディスプレイ広告の推定インプレッションの割り出しが行えます。

SNSも他社のインプレッションや投稿パターンの割り出しから、自社SNSと連携して予約投稿の管理が行えるというSNSマーケティングの領域もカバーする機能の多さがあります。

日本語にも対応しており(一部機能は日本語対応していないものの、順次対応予定)、トラブルが起こった場合でもsemrushの日本総代理店である株式会社オロに問い合わせがつながるので安心です。

参考：SEO対策の被リンク獲得方法(リンクビルディング方法)とペナルティを避けるための対策を徹底解剖｜デジナビ

サイト設計スキルを身につけるには

サイト設計スキルを身につけるには、以下の3つの方法があります。

未経験からWEBデザイナーを目指すなら、基礎から実践まで順番に学べるスクールを活用するのもひとつの方法です。

サイト設計では、情報を整理するだけでなく、ユーザーが見やすく行動しやすいデザインに落とし込む力が求められます。

日本デザインスクールでは、現役WEBデザイナーの添削を受けながら、実際に手を動かして制作に取り組めます。改善点や考え方を直接学べるため、サイト設計の意図をデザインに反映する実践力を身につけやすいでしょう。

サイト設計に関するよくある質問

まとめ

サイト設計は、サイトを新しく設計するときやリニューアルするときに必要な工程です。

チームやクライアント、サイト制作に関わるほとんどすべての人たちと共有する工程の基準になるので、WEBディレクターだけでなくWEBデザイナーも知っておく必要があります。

サイト設計が終わるまでは、細かくたくさんの要件をまとめなければなりません。

しかし、きっちりサイト設計が作られていると、制作も運用もスムーズにおこなえますよ。

WEBデザイナー目線でも、ユーザー目線でも、よりよいサイトを作るための意見を提案できると重宝されるWEBデザイナーになれるでしょう。

サイト制作の核となるサイト設計を理解して、クライアントに喜ばれるサイト作りに活かしてみてくださいね！

WEBサイト制作を進める際は、制作前の目的整理やプランニングも重要です。

参考：Webサイト制作は、プランニングが成否を分ける。｜東京のブランディング会社 パドルデザインカンパニー

参考：SEOに強いドメインとは？ドメインパワーと評価の関係を徹底解説！｜ 株式会社ALL WEB CONSULTING