デザインにおいて“意匠に優れる”アウトプットとは？
デザイナーとして長年経験を積んでいますが、以下のようなケースによく遭遇します。皆さんにも心当たりがあるのではないでしょうか？
情報設計は良いのにアウトプットがいまいち
ワイヤーまでは良かったが完成形になると美しくない
デザインツールで見てみたときはよいが、ブラウザで見てみると画面映えしない
言語化をしっかりして情報設計はちゃんとしているが、アウトプットがいまいち、安易に言葉として表現するなら「なんか良くない」「ダサい」…でしょうか。
個人の考えとしてフィードバックを渡す際に「ダサい」や「良くない」といった直感的な言葉では、何が問題かを表すことが難しく、個人の好みやセンスに帰着するような言葉なので、特にデザイナーが主体的にこの言葉を使うべきではないと思っています。しかし、人間は同時に主観の生き物なのでこの言葉から逃れることもまた難しいです。
今日はこの問題がなぜ起きるのか、どうやったら良くなるのか？解決策までを述べてみます。
設計は「情報設計」だけではない
ウェブサイトやアプリケーションはもちろん、ビジュアルでもなんでもデザインでまず一番大事な設計は「情報設計」です。
どんなコンテンツでも根幹となる情報がなければ成立しないからです。しかし、情報設計がしっかりとできているからといって、完成したデザインが「意匠に優れる」アウトプットになるとは限りません。
端的に言うと、「意匠」に優れるデザインとは、「視覚的要素と機能的要素が高い次元で統合された状態」を指すものと仮定しています。
なお、ドン・ノーマン（Don Norman）の「Emotional Design（情動的デザイン）」の考え方では、使いやすさだけでなく、視覚的美しさや情感の演出がユーザー体験に大きな影響を及ぼすとされています。
情報設計があくまでもコンテンツや機能の配置、利用者の導線といった“骨組み”を定める作業であり、ビジュアルデザインやインタラクションデザインといった“肉付け”がまだ不十分な状態です。
グラフィックやウェブサイトを建築にたとえるなら、情報設計は建物の設計図にあたりますが、それだけでは「審美性を考慮した意匠に優れたデザイン」「ブランドイメージに合った外観」を伴った完成形には到達しません。
情報設計＋ビジュアルデザイン＋インタラクション設計
デザインを「意匠に優れた」状態へと導くためには、情報設計を軸に、ビジュアルデザインやインタラクション設計といった複合的な要素を統合的に考える必要があります。たとえば以下のような視点が欠かせません。
ビジュアルデザイン
配色、タイポグラフィ、余白の扱い、画像やイラストの選定による視覚的トーン＆マナーの統一。それらが情報設計によって定められたコンテンツ構造や機能配置と調和することで、利用者にとって快適で「映える」ビジュアル体験を生み出します。
インタラクションデザイン
これは静止画ではない、アプリケーションやアニメーションが対象ですが、ボタンのホバー時の反応、メニューの開閉アニメーション、コンテンツのフェードイン・スクロールエフェクトといった使い手との「動的なやりとり」のデザイン。
これらが、情報構造だけでは伝わらない「フィードバック」「親切さ」「安心感」といった感情的価値を付与し、意匠の良さにも寄与します。
ブランド・コンセプトの落とし込み
サイトが提供するサービスや企業価値、世界観を反映し、それらを視覚と体験に結びつけることで他サイトとの差別化を図り、利用者に「これはあのブランドらしいな」という共感や満足感を与え、意匠を高めます。
なぜこのズレが起きるのか？
これらを体系立てて、あとは作るだけ…なのですが、この通り作っても最初に述べたような視覚的な満足度のズレ、違和感を避けれないケースは少なくありません、なぜ起きるのでしょうか？
情報設計が固まった段階では、制作チームやクライアントは「全体像が見えた」と錯覚しやすいものです。
絵画で思い浮かべてみましょう。下絵の段階では良いものと思えたが、線をシャープにし、色をつけてみたら思っていたものと違った...なんてことはないでしょうか？
ビジュアルでもウェブサイトでも、ワイヤーフレーム上ではコンテンツ要素が整理され、使いやすい動線も確保できています。しかし、ワイヤーはあくまで線とブロックで表現された「骨格」でしかありません。
その「骨格」を彩り、磨き上げる段階――ビジュアルやインタラクションを設計するプロセス――を軽視すると、最終的なクオリティが「なんとなくダサい」「魅力を感じない」といった評価につながってしまいます。
また、以下のような課題もあると考えています。
デザイナーと情報設計者が分業されすぎている
情報設計者が作ったワイヤーに、ビジュアルデザイナーが後から意匠を「かぶせる」ような流れは、しばしば本質的な整合性や一貫性を欠きます。最初からデザイナーが情報設計段階に関与し、ブランドやビジュアルの方向性を念頭に置くことが望まれます。
コミュニケーションやイメージすり合わせの不足
これもよくある問題で、クライアントや関係者間で、デザインが完成形に近づくほど抽象的なイメージの共有が難しくなり、思っていたイメージと異なるアウトプットが生まれがちです。
初期段階でのビジョン共有や、途中段階でのビジュアルコンセプト確認などのコミュニケーション不足が原因になりえます。
ビジュアル制作やレイアウトの経験値が浅い
個人的にはこの問題が根深いと考えていますが、審美性の高いアウトプットを生み出す力、「良い」と感じられる「絵」を作る能力は、センスはもちろん、経験学習によって得られる専門的なスキルです。
これは、プロダクトデザイン（UIデザインやUXデザイン）を通して鍛えられる筋力とは異なるスキルであり、多くはWebデザイン、グラフィックデザインを学ぶことで得られるものです。
本来ビジュアル・レイアウトデザインは、デザイナーの基本的スキルとして認識されていますが、近年はデザインの汎化、高度化に伴いスキルが細分化されており、グラフィックデザインについてのスキルを十分に培っていないケースも見受けられます。
"意匠"に優れるアウトプットにするためには？
では、どうすれば「意匠に優れるデザイン」をアウトプットすることができるのでしょうか？以下は具体的な改善策の一例です。
ビジュアルコンセプトを明示
ワイヤーフレーム作成時点で、同時にカラーパレットやフォントセット、写真やアイコンのトーンなど大まかなビジュアル指針を持っておくと、後の段階で意匠と情報設計が乖離しにくくなります。
プロトタイプ段階での検証
単なるワイヤーではなく、実際のインタラクションやビジュアル要素を反映した中間段階のプロトタイプを早期に提示し、チームやクライアントとの合意形成を図ります。制作物は作り込めば作り込むほど詳細度が上がりますが、本格的に作業を進める前の段階でこれらを行うことで、完成間際になってから「なんか違う」という事態を避けやすくなります。
継続的なフィードバックサイクルを作る
デザインは一発勝負ではなく、段階的な微調整を経て成熟していくプロセスです。早い段階からレビューやユーザーテストを行い、利用者の反応を踏まえた改善を積み重ねることで、最終的な品質を高めることができます。
とにかく作りまくる
身も蓋もないですが、この記事で一番述べたいことかもしれません笑
デザインに限らず、スキルを向上させる最も効果的な方法の1つは、とにかく多く「作る」ことです。実践・演習に限らず、レイアウトのバランス感覚や色彩の調和、タイポグラフィの扱いなど、理論だけでは得られない感覚的なスキルを磨くことができます。特に、良いとされる他のデザイナーのアウトプットを参考にしながら、様々なスタイルやアプローチを試してみることで、思考と出力の引き出しを増やすことができます。
おわりに
「意匠に優れる」アウトプットは、情報設計という骨格に、ビジュアルデザインやインタラクションデザイン、ブランドコンセプトを的確に組み合わせることで初めて実現します。これらの要素を総合的に扱い、チーム内外のコミュニケーションと共通認識を強化しながら制作することで、単なる「見た目だけ」の美しさではなく、使いやすさやブランド価値が一体となった豊かなアウトプットを生み出すことができます。
そして、根本的な話として、優れたアウトプットを生み出すには、継続的なフィードバックと実践が不可欠です。「作りまくる」ことで得られる経験値によって、理論だけでは得られない直感的な判断力を養うことが可能です。
現在、デジタルデザイナー（プロダクト・Web）」対象とした教育プランをMENTAを通して実験的に開講しています。デザイナーとしてスキルアップしたい、キャリア支援をしてほしい…など、お悩みや興味のある方は、ぜひお気軽にお問い合わせください。