考えるフェーズ
デザイン設計 見た目だけでなく、判断と実装につながるデザイン工程を整理する。
デザイン設計は、見た目を整えるためだけの工程ではありません。
情報設計（IA）で整理した内容を、実際にユーザーが触れたときに迷わず理解できる体験へ変換する工程です。
Flying High Works（FHW）では、色やレイアウトだけではなく、判断のしやすさ、不安の解消、将来の運用まで含めてデザインを設計します。
デザインは見た目を整えるためだけのものではありません
デザインという言葉を聞くと、色、レイアウト、写真、イラストなどを想像する方も多いと思います。
もちろん、それらもデザインの重要な要素です。
しかし私たちは、デザインを単なる見た目づくりとは考えていません。
デザイン設計とは、情報設計（IA）で整理した内容を、実際にユーザーが触れたときに迷わず理解できる体験へ変換する工程だと考えています。
どれだけ良い情報設計を行っても、見せ方を間違えればユーザーには伝わりません。逆に、適切なデザイン設計が行われていれば、複雑な情報でも理解しやすくなります。
デザイン設計は「説明」ではなく「判断を支える設計」
私たちはデザイン設計を行う際、「どう説明するか」よりも、「どう判断してもらうか」を重視しています。
例えば、次のようなことが自然に理解できる状態を目指します。
- 自分はいまどの検討段階にいるのか
- 次に何を見れば良いのか
- どの情報を見れば判断できるのか
そのため、情報量を増やすことよりも、並び方、見せる順序、視線の流れ、情報のまとまりを重視しています。
デザインとは、ユーザーが判断しやすい状態を作るための設計でもあります。
初期検討者の不安を前提にする
多くのユーザーは、十分な知識を持った状態でサイトへ訪問するわけではありません。
- 何から調べればよいのか分からない
- 専門用語が理解できない
- 自社に関係あるのか判断できない
こうした状態からスタートします。
そのため私たちは、ユーザーが分からないまま置き去りにならないことを重視しています。
専門用語の使い方、情報の深さ、説明の順番、コンテンツの分量などを調整しながら設計を行います。
デザイン設計とは、見やすくすることだけではなく、不安を減らすことでもあります。
方向性・構造・表現の順で考える
私たちはデザインを進める際、最初から完成形を作ることはありません。
1.方向性をそろえる
- どのような印象を与えるのか
- どのようなユーザーへ届けるのか
- どのような価値を伝えるのか
2.構造を可視化する
- どの情報を優先するのか
- どの順番で見せるのか
- どこへ導線をつなぐのか
3.表現として具体化する
- 色
- 写真
- レイアウト
- タイポグラフィ
私たちは、デザインは色やレイアウトから始まるものではないと考えています。
方向性が曖昧なままデザインを進めると、後から大きな手戻りが発生します。また、構造が整理されていない状態では、どれだけ美しいデザインを作っても、ユーザーは迷ってしまいます。
そのため、方向性、構造、表現の順で整理することを重視しています。
トップページは最初に完成しない
リニューアルでは、トップページのデザインから進めることが一般的です。
しかし私たちは、トップページを最初に完全FIXするものだとは考えていません。
トップページは、サイト全体の入口であり、情報整理の中心であり、導線の集約地点だからです。
下層ページの内容やサイトマップが変われば、トップページも影響を受けます。
そのため、まずは構成、情報の優先順位、検討段階別の導線などを整理し、細かな表現は後から調整していきます。
トップページだけを先に完成させようとすると、下層ページとの整合が取れなくなったり、後から大きな調整が発生することがあります。
そのため私たちは、トップページをサイト全体の設計と合わせながら進めています。
- 下層ページ A
- 下層ページ B
- 下層ページ C...
デザインはスマホから考える
現在では、BtoBサイトであってもスマートフォンから閲覧されることは珍しくありません。
しかし、単にレスポンシブ対応すれば良いわけではありません。
- 長すぎる見出し
- 読みにくい表
- 小さなボタン
- 画像だけで説明する構成
私たちは、スマホで読むことを前提として、情報量やレイアウトを設計しています。PC版を縮小するのではなく、スマホでも理解しやすいかを重視しています。
更新しても崩れないデザインを考える
デザインは公開時だけのものではありません。運用を続けることで、記事が増える、実績が増える、FAQが増えるなどの変化が起こります。
- 更新しやすいか
- 情報が増えても整理できるか
- 長期運用できるか
私たちは、こうした視点も含めて設計しています。
デザインと実装は分離できない
デザインは画像ではありません。最終的にはHTMLとして実装され、運用されます。
- CMSで更新できるか
- スマホで問題ないか
- アクセシビリティに配慮できているか
私たちは、デザインだけではなく、その後の実装や運用も見据えながら設計しています。
デザインは一緒に作り上げる
私たちは、最初から完成形を提示する進め方は行っていません。
まず、事業内容や想いを共有し、方向性を整理します。
一緒に仕上げる デザインプロセス
1
方向性の共有
事業・想い・要望を共有し、好きなイメージや避けたい表現を確認します。
UI設計・構造整理
目的、情報の優先順位、サイト全体の方向性を整理します。
2
UI構成案の確認
情報の並びや、伝えたい内容が意図に合っているかを確認します。
ワイヤーフレーム作成
構成、導線、各エリアの役割を画面の骨子として可視化します。
3
デザイン方針の決定
デザインの方向性を選択し、第一印象の軸を確認します。
トーン＆マナー提案
カラー、フォント、素材の方向性など、表現ルールを提案します。
4
トップページデザイン確認
トップページの印象、伝わり方、サイト全体との整合性を確認します。
トップのビジュアル作成
方向性と構造をもとに、画面としての完成度を高めます。
5
下層や共通部の確認
トップとの一貫性や、運用時の使いやすさを確認します。
下層ページ・共通部設計
下層デザイン、ヘッダー、共通パーツ、デザインルールを整えます。
6
最終確認・調整
細部の違和感や運用イメージを確認し、公開後を見据えて整えます。
仕上げと実装準備
微調整、最終仕上げ、コーディングへの引き渡しを行います。
重要なのは、最初に完成形を決めることではありません。
方向性を共有し、構造を確認し、表現として仕上げていくことです。
そのため、デザインは「提出されるもの」ではなく、お客様と一緒に精度を高めながら作り上げるものだと考えています。
Flying High Worksの考え方
私たちはデザインを、単なる見た目の調整とは考えていません。
デザイン設計とは、情報設計で整理した内容を、ユーザーが理解し、判断し、行動できる状態へ変換する工程です。
そのため、色やレイアウトだけではなく、情報の順番、視線の流れ、不安の解消、検討行動、将来の運用まで含めて考えます。
私たちは、美しいデザインを作ることだけではなく、長く使われ続けるデザインを設計することを重視しています。