スマホサイトのワイヤーフレーム

  • はてブ

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

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

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

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

スマホサイトのUI設計

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

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

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

付箋とペン
描いていく
並べる
熱い議論

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

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

ちなみに

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

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

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ