こんにちは、工藤です。
夜はすっかり気温が下がりましたね！つい癖でエアコンを付けたまま寝てしまい喉が痛い目をみましたので気をつけたいと思います。

ついにiPhoneがdocomoさんで発売決定されましたね。
私の周りでも「docomoからiPhoneがでたらガラケーを卒業する」という人がちらほらいたのでスマホを使用する方はさらに増えるのだろうなと感じております。

私はというと今ちょうどwebサービスのスマホ版デザインをしているのですが・・難しいです。
ボタンをどこに配置したら使いやすいのか作っているうちによくわからなくなっていきます。
これがUI設計・・エレベーターの開閉ボタン問題を思い出します。
(ユーザーインターフェース-wikipedia)

とりあえず本屋に駆け込むのでした。

スマホサイトのUI設計

そして目に付いた本を読んでいてあっと思ったのが「ワイヤーフレームスケッチ」でした。
webデザインにもまずラフは必要です。
だいたいのコンテンツやボタンはページのここにおくよ、とラフで示したものがwebデザインでは「ワイヤーフレーム」といいます。（でいいはず・・）
私は組むとしてもだいたいPC上で行ってしまいます。
スマホサイトのUI設計は「手書きで付箋を使用してワイヤーフレームを作るのがおすすめ！」とのことでした。

付箋ですが、某ポストイットさんにちょうどスマホの画面サイズと同じようなものがあるんですね。
それにひたすらフレームを描いていけばボタンの配置が使いやすいか使いにくいか分かりやすいですし、それらを並べていけば画面の遷移もどうなっているのか把握が簡単にできます。

簡単に図解するとこんな感じです。






・・・実は私学生時代にwebサービスのデザインをこの方法で議論していたのですがすっかり抜け落ちていました。
今考えるとすごくわかりやすい方法だなあと思います！

ただこれはこれで時間も必要でしょうし、その時にできる最善の方法でストレスを与えないUI設計ができたらなあと思います。
もっと効率的な方法も探せばありそうですね。
結局は自分の慣れもあると思うので、まだまだ手探りです。

ちなみに

デザイン制作過程の参考になる手書きのワイヤーフレームスケッチ -W3Qさん
こちらのサイトさんにすごくきれいなワイヤーフレームスケッチがまとめられています。
かなり平たく言えば下書きなのにすごくきれいですよね・・！

それでは、今日はこのあたりで。