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

  • このエントリーをはてなブックマークに追加

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

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

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

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

スマホサイトのUI設計

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

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

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

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

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

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

ちなみに

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

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

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。