UI/UXデザインUIデザインワイヤーフレーム作業効率ic-rootWebサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多用するなど、ついデザインを作り込んでしまったことはないでしょうか。した問題は、特に初心者のデザイナーの方に陥りがちかと思います。作り込んだからといって良いワイヤーフレームと言えるとは限りません。Webサイトやアプリの方向性の合意を関係者内で早めにとり、そのあとで細かく作り込む方が、効率よくデザインを進めることが出来ます。この記事では、素早くワイヤーフレームを作るためにrootでも使っているデザインツール「Whimsical」をご紹介します。直感的な操作が可能なデザインコラボレーションツールWhimsicalWhimsicalはフローチャートやワイヤーフレームなどをブラウザ上で作成できるデザインコラボレーションツールです。Whimsicalは主に4つの機能から構成されています。作成したボードにつき、使える機能は1つに制限されています。各機能には予め用意されたアイコンやテンプレートボタンがあり、ゼロから素材を作る必要がありません。頭の中のアイデアを直感的に可視化していくことに特化したツールといえるでしょう。サイズや色の”制限”が作業効率を向上させるWhimsicalは、SketchやFigmaなどのデザインツールに比べるとワイヤーフレーム作成時に使える機能や配置できるオブジェクト、設定できるサイズや色に制限が設けられています。一見すると物足りなさを感じるかもしれませんが、制限があることで、細かい色味や具体的な装飾などワイヤー段階で考慮しなくていい部分を「作り込む」ことを防ぐことができます。結果として、ワイヤーフレームの本来の役割である画面の構成要素であったり情報設計に意識を向けることができます。脳は「何に注意をさかないか」にも多くのエネルギーを使っていると言われています。余計なことに注意を向けないことで、ワイヤーフレームを考えることのみにエネルギーを使うことができ、より良いワイヤフレームの制作につながるかもしれません。rootでは特に経験が浅い若手デザイナーに、プロジェクトの初期フェーズのワイヤーフレーム作成段階で同ツール積極的に使うようにしてもらっています。共有ハードルの低さが、ワイヤーフレームの完成速度をあげる自分一人で作るプロダクトであることを除けば、作ったワイヤーフレームは社内外での合意を経て、完成します。デザインのブラッシュアップを重ねるためにも、ワイヤーフレームは早めに決めきってしまいたいですよね。WhimsicalはURLを共有すれば、誰でも作ったワイヤーを見ることができます。クライアントにツールをダウンロードしてもらうなどの負担をかけません。修正したものはリアルタイムで反映されるため、例えばオンラインでの会議であってもクライアントの意見を即時にワイヤーフレームのデザインに落とし込み、確認をとることが出来ます。オンラインで意見を交換しながら、すぐに修正ができるため、rootの新卒メンバーも社内メンバーからのフィードバックを場所にとらわれず受けることが可能になり、悩んだ際に手が止まってワイヤーフレームの制作が進まないといったことも少なくなりました。優れたプロダクトは過不足ないワイヤーからWhimsicalを使いワイヤーフレームの作成をしていくと、ワイヤーフレームはどのくらい作り込めばよいのか、感覚として身についてくるでしょう。土台となる構造がしっかりしてなければ、いくら見た目が良くても、ユーザーにとっては使いづらいUIになりかねません。ワイヤーフレームを軽視した結果、プロジェクトが滞ることも。ワイヤーフレーム作りになれていないデザイナーの方は、ぜひWhimsicalを使ってみてはいかがでしょうか。企画から運用・改善までWebサービス・アプリデザインの設計・制作を行うデザインスタジオです。rootでは、デザインのあり方をクライアント企業様とともに模索し様々なプロジェクトをデザインの力によって成長させることをミッションとしています。UI/UXデザインUIデザインがすごい!参考にしたいアプリ・ブラウザサービス5選!今回はユーザーの実際の動きを参考にしたUIデザインやアニメーションをうまく使ったUIなど幅広く選びました。UI/UXデザインWebデザイン制作のために、絶対に質問すべき64のコトクライアントのイメージどおりのページを作るのは、そう簡単なことではありません......。デザイナーを雇わない方がいい理由この記事はUsabilityHourの創業者クレイグ・モリソ氏のブログ記事を公式に許可をいただき翻訳したものです。MOREお問い合わせ新規事業立ち上げやWebサービスの改善でお困りの方はお気軽にご相談ください。課題に応じたデザイン手法をご提案させていただきます。Reservedプライバシーポリシ。