UIデザインの構想に、アピカのコンセプトフローノートがイイ感じ！

こんにちは、a-knowです。

いろんなところの自己紹介にも書いてたり書いてなかったりするのですが、私・a-know、ヘタクソながらも「他の方に使って頂ける“何か”を（プログラミングを通じて）作る」ことが好きでして。それは、例えば「愛用品紹介系サービス・Masterpiece」だったり、「iTunes再生回数共有サービス・sa-boom!!」「そのクライアントソフト・sa-boom!!client」だったり・・・といった形で表に出させて頂いてるワケなんですが、こういったものって、当然ではあるんですが、自分ではない他の方に使って頂くわけですから、「どういった風にお見せするか」といったことを考えなきゃいけないんですね。

つまるところ、UIをデザインしなければいけない、と。ちゃんとしたデザインを学んだことがないぼくがこんなことを言うのも恐れ多いんですが。

ワイヤーフレームを作成する

例えばその手段の一つとして、「ワイヤーフレームを作成する」というものがあるようです。「ワイヤーフレームを作成する」ということを知ったぼくは、今年に入ってから作ったものに関しては、CacooというWebサービスを使っておおまかなデザインを作るようにしてみていました。

細かなロジックやプログラムの作りは一旦頭のスミに置いておいて、「やりたいこと」「実現したいこと」を念頭に、“理想の”画面・UIをイメージしてワイヤーフレームを作っていくのはとても楽しく、またそれ以降の開発におけるブレも非常に小さくしてくれたように思います。アプリケーション・サービス開発の前には必ず行うべき、大事な工程であることを認識しました。

それほどイメージが具体化していないときに

ただ、ワイヤーフレームの作成にパッと取り掛かれるほどに、自分の中でのイメージが具体化していればいいんですが、「どんな感じのUIにすればいいかなぁ・・・」ぐらいの具体度だと、いざCacooの画面を目の前にしても、手にしたマウスはピクリとも動かない、んですよね〜。

そんなとき、何だったら手が動くか。・・・ぼくはやっぱり、紙とペンなんですよね〜。広げれば、いつでもどこでも書ける。パッと見渡せる。レイアウトフリー。そういった、紙というデバイスの長所が、「デザインを考える」ということのハードルを下げてくれます。

そのときの「紙」ですが、もちろんフツーのノートとかでもいいとは思うんですが、ぼくのような大雑把な性格の持ち主だと、書かれる内容も雑多なものになりやすいんですよね。どこからどこまでが、どの画面・機能についての記述なのかわからなくなっちゃう。加えて、レイアウトフリー・どこに何を書いても構わない・・・と、あまりにも自由過ぎるフィールドに放り込まれてしまうと、かえって不自由さを感じてしまうのが、ぼくの性。

そんな、ワイヤーフレーム作成の前段階のアイデア整理にちょうどいいノートはないかな〜と、近所の文房具屋さんをぶらついていたら、「figurare CONCEPT FLOW NOTEBOOK」（アピカ株式会社）を見つけました。

「MATRIX NOTEBOOK」というシリーズもあるようなのですが、ぼくは「CONCEPT FLOW NOTEBOOK」を選びました。ノートの構成としては、左側が自由に図が書けるスペースで、右側は普通の罫線が引いてあります。

これを見てぼくは、「まさに、“UIのイメージ”と“その注釈”を書くのに適してるな！」と思いました。まだイメージが全然固まっていない段階って、文字・言葉でもたくさん補いたいですもんね。そんなわけですぐに購入し使い始めたんですが、はやくも、アイデア整理に今後も欠かせない存在になったなーと感じています。前述の「Masterpiece」「sa-boom!!client」のUIの整理には、これを使っています。汚い字でお恥ずかしいのですが、そのうちの１ページをお見せします。

ページの左部分。画面の大雑把なイメージを、てきとーに書いてみてます。

ページの右部分。左に書いたイメージに紐付く機能や何かを、文字で補足してます。「ここが作る上で課題になりそうだなー」と思うことを、備忘録的に書いておくのも良いかと。

あと、こういうページ構成だと、「１ページ１画面！」と割りきって使えるのもいい点かなと思ってます。ノートも自分の頭の中もスッキリです。とはいえ、使い方はこのとおりに限らず、自由でいいと思います。ぼくも、数ページ使って１画面のイメージを書いてみたりしてるところもありますし。

このシリーズのコンセプト

このシリーズのコンセプトは、“「書く」ことが「考えるきっかけ」をつくる”、だそうです。言われてみると、確かにそんな感じです。“「書く」ことが呼び水となって、芋づる式に考えが進む”というか。これで大雑把にイメージして、必要ならばCacooでそれを清書して。そしてそれから、作成に取り掛かる・・・というのは、今後しばらくはぼくの定形のスタイルになりそうです。