.../articles/
情報設計とデザインの間

情報設計とデザインの間

2020.05.03

デザインをする上で必要な情報

デザインをする上で必要な情報ってなんでしょうか?

  • 原稿
  • 素材(写真とか)

がまずは思い浮かぶところです。 どちらもレイアウトを考える上でのピースとなるようなもので、 なければ正確なデザインをつくることはできません。

必要な情報にはいくつか種類があると思っていて、

  • 一次的な情報 : そのまま表示される情報(原稿、メディア、ボタンなどの機能など)
  • 二次的な情報 : デザイン時に考慮に入れる情報(ターゲット、サイトの目的など)

多少乱暴ですが一時的な情報と二次的な情報に分けることができます。 少なくとも一時的な情報は揃っていてほしい、というのがデザイナーとしての希望ではあります。

どんな情報が入ってきてもうまくハマるシステムを作るのが良いデザインシステムではありますが、すべての事象に対応できるデザインなのであればそもそもそれはスクラッチで用意する必要はありません。

要望に合わせたデザインを考えるためにも一時的な情報までは揃えたいです。


どこまでやるのがデザインか

少し深堀りすると、ウェブサイトやウェブサービスを構成している要素にはどのようなものがあるのか、という話になってきます。

『IAシンキング Web制作者・担当者のためのIA思考術』という著書に以下の有名な図が掲載されています。

いろいろなテキストに引用されていて、別のソースからですがこの記事(「見ているものを知るための知識」)にも使いました。

imgWebサイト構築に必要なプロセス 原題 : Element of User Experience ※この図は筆者が書き起こしたもの

この図でいう「戦略」「要求」の層までは、必要な情報として揃っているべきです。 機能仕様やコンテンツ要求はワイヤーフレームなどにまとまっているとデザインに反映しやすく良いと思います。

「戦略」だけ与えられ、「要求」の部分までデザインで行おうとすると、UI要素の抜け漏れや、機能として組み込む際に考慮すべきステータスなどが抜けてしまったりしてしまいます。 要求もテキストの箇条書きだけではイメージしているものが分からないことが多く、そういう意味でワイヤーフレームの重要さが理解できると思います。


デザインは0から1をつくるようなイメージを持たれてしまうこともありますが、 周到に準備されたものからできるデザインと、そうでないものでは品質や後工程に影響があります。

…まぁ、全部できるに越したことないんですけどね。 有限のリソースをどのように使うかは良いものをつくる上で大切な観点だと思います。

written by

.../article/

Articles

記事

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

生成AIを活用して、経営者やリーダー自身が課題抽出・打ち手検討を行える体制を構築する。 弊社が提供する“伴走型支援”と組み合わせることで、DX推進の質とスピードを飛躍的に高める方法をご紹介します。

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

Laravelのオブザーバーが便利だった

Laravelのオブザーバーが便利だった

オブザーバーを使って、モデルのCRUDイベントキャッチしようという試み

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

もはやバズワードと化したDXという言葉ですが、実際何を意味しているのか? どのようなことをしたらいいのか? といったことを相談されるようになってきたので、DXをイメージするための全体像をざっくり解説します。

すべての記事

お問い合わせ