【2016/8/1追記】CSSフレームワークでさくっとユーザーテスト。ついでにフレームワーク3選。

Bootstrap
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

(2016/8/1:過去記事を少し修正の上、フレームワーク3選を追加しました。)

自社サービスのマーケティング担当としてだけでなく、他社のWeb構築にも相変わらず関わっているので、WEB解析結果をワイヤーフレームに落としこむ時間も増えています。分析結果を具体的なアウトプットにするのは大切なことです。

ワイヤーフレームとは、ターゲットの理解とコンバージョンへの導線引きを具体化したもの。最近いろんなワイヤー作成ツールもありますが、「レスポンシブなCSSフレームワーク上でワイヤーフレームも作成する」事が最近は多いです。

なぜ、そうしているのか?制作効率ともう1つ別な理由。

作りながら使って直す。

これ。言ってしまえば当たり前だけど、「ターゲットの気持ちで実際に使ってみて、直す」。

ワイヤーフレーム作成ツール上だと、イメージも完全じゃないし、ワイヤーフレームの作成自体が「UXを構築する」ことから「情報を整理する」事に近くなる傾向がある。それで練られたワイヤーは、ワイヤーやデザイン上では美しくあっても、実際に使えないケースも多い。ターゲットの気持ちで推敲するには、やっぱり使ってみるしか無い。

使い方も、「ターゲットってこういうモチベーションだから、最初にこの情報見せよう」というのでは意味なくて、「ターゲットはこう思った時、どうやって情報に接しようとするか?」からやると、検索エンジンを使うのか?友人に相談するのか?その時に事前に与えられる情報と印象は何か?まで掘り下げられ、実際にWebサイトに来訪するとしたらどの経路からで、その時何を見せるべきか?が見えてきたりする。

この段階で初稿のワイヤー見ると、実は大概、必要な情報配置になってないケースが多い。そしたら直す。でもう一回モチベーションに併せて動線を考えてみて、ワイヤーの導線を確認。これの繰り返し。

スマホアプリは特に、モックの推敲が効く

アプリ開発の場合は特に、指先をどう使わせるか、使ってくれるかで操作性が決まるので、このフェーズがものすごい効いてくる。そしてそれができると、ユーザーテストとかで高額な調査料払わずに、質の高いUXを維持したワイヤーが自分たちでも作れる、と。

そんなこと思いながら、日々ワイヤー書いてます。CSSフレームワーク上で。

【2016/8/1追記】最近使ってるワイヤーフレーム3選

おすすめというよりは、Bootstrap以外だとこれ使ってるよ、というワイヤーフレームのご紹介です。

Pure

pure

会社の同僚に教えてもらって使い始めたCSSフレームワーク「Pure」。「Yahooが作った最軽量CSS」という事ですが、いちいちDLしなくてもオンライン上のCSSをリンクさせれば使えます。

確かに軽量なCSSはいいですね。そしてそして何よりグリッドシステムが最高。CSSフレームワークでよく見るグリッドシステムは12分割かと思いますが、Pureは5分割や24分割もいけるので、段組に融通を聞かせないといけない場合などは便利です。

Semantic UI

スクリーンショット 2016-07-31 23.45.08

これまたシンプルだし記述が分かりやすいCSSフレームワークの「Semantic UI」。ボタンや各種コンポーネントがそのまま利用できるレベルのものなので、場合によってはデザインをしなくてもユーザーテストが可能なレベルなのが嬉しいところです。

Google Material Design Lite

mdl

ここ最近ずっと使っている「Google Material Design Lite」。Webだけでなく、アプリのUIも一緒に考えたい場合がちょっと続いたので使ってました。Pureのようにオンライン上のCSSリンクでもいけるし、Semantic UIのようにコンポーネントのデザインもしかりしてる、というかAndroid標準的なUIにできるので、ワイヤー制作工数ですぐにでもユーザーテストに入れます。


という事で、おすすめCSSも追加であげてみました。やっぱり使ってもらって初めて分かることが多いので、さくっと作ってテストするのは今後も続きそう。手書きを使ってもらう時代もあったけど、今は便利になりましたね。いい時代です。

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone