3. デザイン制作
DESIGN PRODUCTION
デザイン制作フェーズでは、視覚的な要素を活用して会社や商材のブランドイメージを適切に表現しつつ、ユーザーの目的と視覚的なヒエラルキーを考慮し、使いやすさとブランド表現が両立したアウトプットを作り込んでいきます。また、レスポンシブデザインにも配慮し、デバイスに応じた最適な表示を実現します。
3-1. コンセプトの策定
使いやすさとブランド表現両立のための指針
プロジェクト・サイト設計フェーズを経て、ユーザーにとって適切なデザインはどのようなものであるかといった顧客視点でデザイン制作に必要な要件を整理し、会社・商材の強みやブランドから導き出されるデザインコンセプトを策定します。
SAVVYでは、ホームページとしての使いやすさと一貫したブランド表現を精度高く実現するために、カラースキーム、フォント、レイアウト、画像の選定やパーツデザインなどのルールも言語化し、プロジェクトメンバー全員で共通理解するようにしています。
このステップの主な目的
デザインのガイドラインとルールの作成
デザインにおいて、コンセプトに基づいて統一された方向性やテーマを定義し、実制作時やレビュー時の検討の際に共通指針となるガイドラインとルールを設けます。
3-2. ベースデザインの制作
ベースデザインは、サイト全体のトーンを決めるためのデザイン制作で、ほとんどの場合は、サイトのトップページを対象に作成します。
デザインコンセプトとワイヤーフレームに基づいて、ラフ案（プロジェクトによっては方向性を変えた案を2〜3案）を提示した上で協議をし、方向性の確認や絞り込みをしながら、ディテールを詰めた制作を行います。トップページのデザインが確定した後、次の工程に移ります。
このステップの主な目的
基本デザインの作成
トップページを対象に、サイト全体のトーンを決めるためのデザインを作成します。
この基本デザインを元に、全体デザインに展開していきます。
3-3. 全体デザインへの展開
基本デザインが確定したら、サイト全体で必要なページのデザインに進みます。多くの場合は、何回かにフェーズを分けて進行し、都度お客さまとの合意を得ていきます。なお、原則的には全てのページのデザインを作成することはせず、個別のフォーマットとなるページだけを対象とし、残りはHTML上で直接展開しています。このステップでレスポンシブ対応のためにスマートフォンやタブレット用のデザインも作成していきます。
このステップの主な目的
コンテンツページのデザイン制作
トップページ以外の各ページの中で、個別のフォーマットとなるページのデザインを作成します。
3-4. インタラクションの設計
顧客体験の向上に必要不可欠なインタラクションの設計
ユーザーのニーズを満たすコミュニケーションやコンバージョン促進、ブランドの印象形成など、ホームページの担う役割・目的はいずれも顧客体験の質がその成否を左右します。
ここで言う顧客体験とは、ユーザーがホームページを利用する際に感じる全体的な印象や使い心地のことを指します。サイトの使いやすさ、情報のアクセスしやすさ、デザインの魅力などが含まれ、ユーザーがサイトを通じてどれだけスムーズに目的を達成できるかに影響を与えます。
そのため静的なページデザイン後には、操作に対する視覚的なフィードバックによる対話性の向上を目的としたインタラクション要素の設計を行います。
代表的なものは、ユーザーがボタンをクリックしたり、メニューを選択したり、スクロールしたりする行動や、サイトがユーザーの操作に対して表示やアニメーションで応答する仕組みに用いるパーツデザインです。
ブランドの印象形成を主目的とするような場合に制作することの多い演出用のアニメーションなどもこのステップで設計します。
このステップの主な目的
インタラクション要素の作成
ボタンやメニューなどの要素にホバーエフェクトやクリックアニメーションを追加したり、スクロール操作に応答するアニメーションを追加するなど、ユーザーとの対話性を高めるインタラクション要素を作成しまう。
アニメーションの企画・制作
ユーザーに対して伝えたいメッセージやストーリーを考え、適切なアニメーション効果を企画・制作します。ブランドの印象形成を目的とするサイトの場合に制作するケースが多いです。
