Androidアプリのワイヤーフレームを作成する方法
ワイヤーフレームとは
ワイヤーフレームとは、アプリやウェブページの設計図のことで、何をどこに配置するか書かれているものです。 家を建てる際の設計画面のようなもので、家の土台となるものです。 最適なツールを使うことでその後の共有やフィードバックが効率化されます。
ワイヤーフレームの役割としては、プロジェクトに関わる人たちのコミュニケーションを円滑にするものです。 外部のデザイナー、クライアントとともにイメージを共有して進行できるのがメリットです。 ワイヤーフレームがきちんと整理されていることで、手戻りやワイヤーフレームと異なるデザインができるのを防げます。 ワイヤーフレームを制作する上でのポイントをまとめてみたいと思います。
まず、掲載したい情報のピックアップをします。
・会社名
・ロゴ
・電話番号
・住所
・お店へのアクセス
・業務内容v ・サービス概要
・サービス概要
・メールリンク
・詳細へのリンク
・バナー画像
・広告
など、ウエブ上に掲載する情報を思いつく限り集めてみます。
情報をリストアップしたら次にはグループ分けしていきます。同じグループの情報はワイヤーフレーム上で近くに配置していきます。 優先度は「高い」「中程度」「低いグループ」の３つに分けられます。
次にサイトの目的やターゲットに合わせた適切なレイアウトを選択します。
・ヘッダーとは？
ヘッダーとはホームページの上番となるエリアで、ヘッダーはサイト内のページに共通で表示されるものです。 美しくデザインされたロゴがあることで、ホームページ全体の印象もよくなります。 会社やロゴ、メインとなるビジュアルを配置します。
・コンテンツとは？
コンテンツはページの主題となるエリアのことで、文章や画像、動画やグラフなどを表示します。 ページの滞在時間を長くすることで興味を引き付ける目的があります。 アイキャッチの画像や動画でより商品のお買い上げに導くことができます。
・サイドバーとは？
サイドバーはコンテンツに載せるほど優先順位が高くない情報を掲載することが多く、店舗の連絡先やアクセス情報、SNSリンクや資料請求、お問合せの窓口だったりします。 メインコンテンツの横に設置されるもので、幅広く活用できるエリアです。
・フッターとは？
フッターは画面の下の部分の会社概要や規約などが書かれています。情報を正しく受け取ってもらうため回遊しやすくするためにサイトマップを活用したパターンが多いです。
・マルチカラムとは？
カラムとは画面を縦に分割した単位のことで、縦のカラムを「列」 横に分割した単位をロー「行」といいます。
ワイヤーフレームを作成するときにはカラムの数、ヘッダーになにを配置するとかを考えます。
Androidアプリワイヤーフレーム ツール
ワイヤーフレームを作成するときには、オンラインツールを使うことも可能です。 オンラインツールでは更新履歴を残しながら、複数名での共同作業が効率的に行えます。 オンラインツールではいくつかのチェックポイントがあります。
・ツールバーの使いやすさ
・日本語での使用
・フィードバックの機能
・デザインのリピート機能
・チーム内での共有
・クライアントと共有しやすいか
・クラウドストレージなどのサービス連携できるか？
・セキュリティ対策について
・コスト面は？
ワイヤーフレームは、ユーザーエクスペリエンスを届けるためにとても重要なものです。 スマホアプリ/ワイヤーフレームを支援するツールを集めてみました。
Proto.io
iphone・ipad・Android・Android Tabletのプロトタイプが作成できるプラウザアプリです。 はじめて使う方にも操作に迷うことがありません。テンプレートを作れ複数の画面をサクサク作れます。 ライブレビュー機能で、スマホで実際の操作感を試して作成することができます。 QRコードを生成し、スマホからのアクセスも簡単になっています。
Fluid UI
UIパーツがWireframe・iPhone・ipad・Android・Android4.0・Android Tablet・Windows Phoneの中から選べます。 最大の特徴はパーツをタップしたときの遷移先が設定できることです。 UIパーツがかなり本物に近い形で表現されて、プロトタイピングツールとしても使用できます。
Pencil
Pencilはオンラインパーツが充実しています。Windows・Mac・ Linuxに対応しているワイヤーフレームですが、デフォルトでiPhone・Android4.0・Webページ用のパーツが使えます。 オンラインパーツは、OpenClipartで共有されているSVGファイルをダウンロードして使うことが可能です。 ページの書き出しとしてSVG・HTML・PDF・PNG・ODFというさまざまな形式がサポートされています。 ワイヤーフレーム・モックアップ作成ツールでもそれぞれに特徴があることがわかります。それぞれのツールには向き、不向きがあり利用目的に合わせて一番適したツールを使いたいところです。
Androidアプリワイヤーフレーム作成ツールMockitt
Wondershare Mockitt内に内蔵されているウィジェットやテンプレートを使うことで、ドラッグ＆ドロップするだけでインタラクティブなワイヤーフレームとプロトタイプを作成できます。 わずか３ステップでラピットプロトタイピングが作成できます。
①Mockittにサインインしてから作業スペースのウィンドウが表示され、作成→プロトタイプをクリック、デバイステンプレートを選択して空のキャンパスからスタートします。
②ツールバーとライブラリパレットから素材を選択、キャンパス上に配置するだけでプロトタイプが作成できます。 ドラッグアンドドロップ機能を使用、コンポーネントの追加や配置、接続を行います。
③使用デバイスに関係なく、ワンクリックで誰とでもプロトタイプをレビュー、共有することができます。
作成したワイヤーフレームを共同編集や共有する場合、チームメンバーや関係者が使いやすいツールを選ぶことが必要になってきます。 その場合、複雑なツールは関係者全員に理解してもらうのに手間がかかり、なるべく直感的に使うことのできるツールがおすすめです。 関係者が利用する端末に対応しているかも大切なポイントです。 パソコンだけではなく、スマホやパッドといったさまざまな端末で共有できるツールがおすすめです。
