サービスがUIに落とし込まれるまで 〜下流工程編〜
皆さん、こんにちは！Design Switchです。前回は、UI/UXデザイナーの作業工程を”James GarrettのUXの5段階モデル”を用いて「戦略 / 要件 / 構造」工程部分をご紹介しました。今回は後半の工程部分となる「骨格 / 表現」について詳しく解説していきたいと思います。
「骨格」
骨格部分では、画面設計書 (ワイヤーフレーム)を作ります。具体的には画面サイズや機能の表示領域を明確に可視化していきます。画面内に入る文言なども詳細に書いていきます。
ゴールイメージは、ワイヤーフレームを見ただけでどの情報をどの程度大きくするのか、画面遷移の繋がりなどがわかる程度まで可視化します。ただし、色などのデザインテイストはまだ表現しません。
例えば参考の図のように作ってみましょう。
このワイヤーフレームを作成することで、グラフィック的な側面を気にせずに何をどこに配置するかを検討することができます。また、画面を可視化する初期段階から他のメンバーとの共通認識を持つことができます。
さらに図の粒度まで作成してみると、何の情報が必要でどの程度の大きさでどこに表示すれば良いか把握することができます。
「表現」
この工程については前回の記事で解説したため簡単に要約します。
”作成したワイヤーフレームに色やフォント、影などのビジュアル的な表現（UI）を施し設計していきます。UIでどのように印象付けるのか、使いやすく違和感のないモーション、デザインの統一、配色、グラフィックなど細かい部分に注力していきます。”
この過程では「戦略」で明確にしたサービスの目的やユーザに合わせたデザインテイストを表現していきます。今回は、実際にUIデザインを作る上でお勧めの参考サイトやツールについてご紹介します。
◆ 参考サイト
dribbble (ドリブル) は様々な海外デザイナーが作成したUIが投稿されています。このサイトからサービスの方向性やユーザに合っているUIを探しどのように表現されているのかを研究してみると良いでしょう。他にもPinterest (ピンタレスト) などでUIの参考画像探しをするのも良いかもしれません。ピンタレストは画像検索できる有名なSNSで、自分で作成したボードに好きな画像を分類や収集することができます。
◆ UI作成ツール
またおすすめのUI作成ツールとしてはAdobe XDやFigmaがお勧めです。基本無料で使うことができ、学習コストが低くチームメンバーとの連携にも適しています。
他にもSketchやAdobe イラストレーターなど多くのツールがありますが、Adobe XDやFigmaほどシンプルな使いごごちのものはないと考えています。使い方や他のツールの特徴などは別途記事を書いてご紹介します。
まとめ
🔳 「骨格」段階では、画面設計書 (ワイヤーフレーム) を作る
◆画面サイズや機能の表示領域を明確に可視化していく
◆画面を可視化する初期段階から他のメンバーと共通認識を持つ
🔳「表現」段階では、サービスの目的やユーザに合わせてワイヤーフレームにビジュアル的な表現を施す
◆UI参考として役立つサイトとしてdribbble(ドリブル)やPinterest(ピンタレスト)を活用してみる
◆UI作成ツールとしてはAdobe XDやFigmaがお勧め
今回は後半となる「骨格 / 表現」について事例を含めながらご紹介しました。骨格や表現では、抽象から具体へ落とし込むフェーズです。表現のフェーズはデザイナーとって最も楽しいと感じられる工程ではないでしょうか。
次回はこのDesign Switchを運用している株式会社ARCHECOについて簡単に紹介します！ARCHECOには個性豊かなメンバーが勢揃いしているので、ぜひホームページもチェックしてみてくださいね！
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
▼ 次の記事
🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて
この記事が気に入ったらサポートをしてみませんか？