
ワイヤーフレームと情報設計
情報設計はIA(Information Architecture)と呼ばれています。成果物としてはWF(Wire Frame)となり、情報設計はWebサービス設計において重要度が高い工程です。ありがたいことに、WFの精度が高いとクライアントからの評価を受けているので、どの様な情報設計が良いのか紹介したいと思います。
IA、情報の建築とプライオリティ
情報設計は英語でIA(Information Architecture)。直訳すると情報の建築術になります。建築というと建物や家を思い出す人が多いと思います。建築の図面は建物や家の設計図。情報設計はWebサイトの設計図と思ってください。
建築は家に住むクライアントが満足できる建物や家を設計するのですが、Webサービスはクライアントが提供するサービスを利用するユーザーが満足できるWebサイトを設計します。
情報設計ではクライアントが実現したいことに対して、どの様にしたらユーザーが満足できるWebサイトにするかを設計します。
自分の家を作るとしたらやりたいこと色々出てきますよね?限られた予算や敷地の中で実現できること、出来ないことは当然出てきます。Webサービスでも同様です。全部実現すると予算もスケジュールもオーバーするのでプライオリティを決めることが重要です。
情報設計のヒアリング
どの様なWebサイトにしたいのか、そのプライオリティをヒアリングします。クライアントが全部説明できれば言葉だけ拾えば良いですが、具体的な情報設計を頭の中でイメージしながらヒアリングできれば、アウトプットのクオリティは高まります。どんな情報設計を行うのかイメージしながらヒアリングを行います。
情報設計に必要なビジネスの理解
クライアントから同業種ビジネスのWebサービス構築の経験があるか質問をいただきます。これはどれだけビジネスに対する理解度があるか?と言う質問です。
マネタイズの構造、業界特有の専門用語など情報設計には必要な知識となります。クーシーでも全く知らない業界の情報設計を行うときは、その業界の情報を収集しています。
WFはコミュニケーションツールでもある
WFでクライアントとコミュニケーションをとり、完成形のイメージを明確にします。建築では、設計図での変更は容易でも、家が建ってからの変更は致命的になるのは容易に想像が付くと思います。Webサイトも要件定義、WF、デザイン、HTML、システムと工程が進んでいきますが、後工程になるほど修正にはコストとスケジュールが必要になります。デザインを見ないとフィードバックが出来ないというクライアントもいますが、WFでコミュニケーションをとってできるだけ前工程でフィードバックを受けるようにしています。
WFでできるだけビジュアライズする
図、グラフ、タイポグラフィでビジュアライズできるところは、WFの段階で出来るだけビジュアライズしましょう。WFからデザインまで一人のデザイナーで行うときはデザイン工程で行っても良いです。複数のデザイナーでデザインするときには、図のイメージを作っておくと意思の疎通が取りやすくなります。
また、ビジュアライズすることでクライアントも想像しやすくなりイメージの共有ができます。
良い情報設計が行えるとプロダクトとしてのクオリティもそうですが、コストやスケジュールも圧縮されます。WFの工程を行わなかったり、中途半端なWFを後工程にパスしたりすると、プロジェクトの炎上に繋がります。良い情報設計でより良いWebサイトを構築しましょう。
お問い合わせ
Webサイトデザインについての
ご相談はこちら。
お問い合わせする
Webデザインについて、
様々なことにサポートいたします。
-
UI/UXデザイン
多くのWebサービスを手がけたことにより蓄積されたノウハウで、最適化したUI/UXを提案します。
-
ワイヤーフレームと情報設計
ユーザーストーリーからSEOまで考慮し、情報の優先順位をサイト構造・ページ構成両面から考えます。
-
Webサイトデザイン
EC、コーポレート、eラーニング、SNS、基幹システムなどあらゆるジャンルのWebサイトを手がけています。
-
コーポレート
サイト制作各ステークホルダーに合わせて情報設計を行い、企業のブランディングが伝わるデザインを心がけています。
-
BtoBサイトデザイン
BtoBのWebサイトは業務効率化に直結します。サービス利用時のベネフィットを意識してデザインします。
-
採用サイト
制作・デザイン新卒と中途では欲しい情報のニーズが異なります。ターゲットに向けて応募率を高めるようにデザインします。
-
スマートフォンアプリ
デザイン指で操作するスマートフォンはPCとは異なります。最高のユーザー体験を創出するデザインを行います。
-
動画制作
インターネットで動画を見るユーザーが増加しています。コンテンツ動画など企画から撮影・編集を行います。
-
HTML/CSS
コーディング複雑化したHTML/CSSの構築実績を持つ制作会社は多くありません。マークアップと多様なブラウザ対応を行います。
-
SSL化対応
SSL証明書の取得から設置・移管まで、ワンストップサービスを提供しています。
-
SPA対応
主にAngular/Vue/ReactなどのJavaScriptフレームワークを用いたSPAを設計から実装まで行います。
-
PageSpeed
Insights対応PageSpeed Insightsの項目に沿った表示速度改善の設計と、ページ/システムの改修を行います。
-
AMP対応
モバイル端末でWebページを高速表示するための技法です。コンテンツの設計や、開発・改修を行います。
-
SEO内部対策
SEOコンサル会社では提案できないキーワード選定からカテゴリ構造化を行います。SEO対策もお任せください。
-
WordPress構築
利用者ごとの権限の設定や管理画面の構築を使う人がより使いやすいCMS。環境構築、運用までを考慮して設計します。
-
MovableType構築
WordPressにセキュリティ的な懸念をお持ちのお客様にはMovableTypeをお勧めしてます。多言語化にも対応可能です。