Webディレクター

【保存版】Webディレクターがスマホ版ワイヤーフレームを作る理由とポイント3つ

 

こんにちは、keiです。

 

Webディレクターでは、ワーヤーフレームを作成することがよくあるのですが、作成する際にPC用のワイヤーフレーム以外にスマホのワイヤーフレームも一緒に作成します。

 

最近ですと、PC版のWF(ワイヤーフレーム)を作成する以上にスマホ用のワイヤーフレームを作ることが重要視されてきています。

 

本記事では、スマホでワイヤーフレームを作る重要性を紹介し、記事後半で作る上でのポイントについて調べましたので、記事にまとめて紹介します。

 

スマホのワイヤーフレームを作るときに、何をポイントに作成するのか?よく迷うことがありますので備忘録として残します。
KEI

 

また、ワイヤーフレームとは?については、以下記事で紹介しているので参考にどうぞ。

 

関連記事
Web制作に必要なワイヤーフレームとは?【作成する際の6つのポイント】

続きを見る

 

それでは、早速始めます。

 

スマホでワイヤーフレームを作る重要性

 

パソコン用のワイヤーフレームを作るのですが、それ以上にスマホからワイヤーフレームを作成するのがいいです。

 

というのも、スマホから作成することで効率がよかったり、パソコンよりスマホの方が重要性が高まってきているからです。

 

具体的に、

 

・Googleがレスポンスデザインの重要性を明言している

・スマホユーザーが普及している

 

こんな感じの理由があるからです。

 

Googleは、2016年後半にアナウンスした「モバイルファーストインデックス」以降に、モバイル版サイトを評価するようになってきました。

 

この公表があってからモバイル版に対応していないサイトだと、Googleに評価されずにSEOでの検索順位に影響がでてきます。

 

また、最近ですと、PCユーザーよりスマホユーザーの増加傾向があります。以下、総務省で発表された内容です。

 

我が国では、スマートフォンは2010年ころから普及が始まった。スマートフォンの個人保有率は2013年から2017年の間に全体で10%以上増加している(図表4-2-1-3)。

引用:総務省:インターネット利用の広がり

 

考えてみれば、僕自身も、通勤時間や暇な時間にスマホを使っている時間が多いですね。
KEI

 

上記の理由から、PCよりスマホのワイヤーフレームを優先的に作成してみるのがオススメです。

 

スマホのワイヤーフレームを作ることで気づくこと

 

スマホのワイヤーフレームから作成し始めることで気づくことがあります。

 

例えば、テキストの読みづらさに気づいたり、ボタン同士の距離をどうするか?といったスマホならではの疑問がたくさん出てくるからです。
KEI

 

こんな感じでスマホから先に作成してみることで、デザイン設計やレイアウトで気づけることがたくさんあるわけです。

 

スマホユーザーの視点に立って、サイトとコンテンツを作成し、それをワイヤーフレームで作成する感じです。

 

もし、スマホ用のワイヤーフレーム作成に悩んだら、以下の書籍が役立ちます。

 

 

本書では、スマートフォンで重要な対策を中心に扱っており、スマホでの最適な設計方法を徹底的に解説してくれています。

 

僕の場合、スマホのワイヤーフレームを作成する際には、本書を手元に置いてワイヤーを作成して大変重宝してます。
KEI

 

ぜひご参考にどうぞ!

 

スマホのワイヤーフレームを作る際のポイント

 

スマホのワイヤーフレームを作る際のポイントは以下の通りです。

 

・①:モバイルフレンドリーを意識する

・②:タップ・スワイプを意識したデザイン

・③:マテリアルデザインを取り入れる

 

他にもスマホ用のワイヤーフレームを作成する際のポイントはありますが、今回は上記について深掘りして紹介します。
KEI

 

①:モバイルフレンドリーを意識する

 

スマホのワイヤーフレームを作成する前には、まずはサイトがモバイルフレンドリー対応しているか確認します。

 

モバイルフレンドリー対応は、2015年にGoogleが全世界で実装したアルゴリズムです。

 

メジャーな検索エンジンといえば「Google」ですよね。

 

そのGoogleが、Webサイトがモバイルフレンドリー化(スマートフォン対応)していないと、検索順位を下げると公言しています。

 

参考:
Google ウェブマスター向け公式ブログ: モバイル フレンドリー アップデートを開始します

 

モバイルフレンドリー対応していないサイトであれば、早急にワイヤーフレームを作成して、スマートフォンに最適化されたサイトを公開します。

 

ちなみに、自サイトがスマホ対応(モバイルフレンドリー対応)しているかは、「モバイルフレンドリーテスト」というGoogle公式のツールで確認ができます!

 

②:タップ・スワイプ・文字の読みやすさを意識したデザイン

 

スマートフォンの閲覧に適したページをワイヤーフレーム作成するにあたって、意識したいことが特に以下のことです。

 

  • タップしやすい大きさのボタンにする
  • ボタンをタップしやすい間隔に設置する
  • スマホで見たとき文字数が多くなったときのデザインを考える
  • スマホ用のviewportに収まる

 

ワイヤーフレームを作成してみるときには、スマホの画面サイズを考えてタップしやすいボタンの大きさか?スマホで見たとき文字数が多くならないか?を考えるのがポイントかなと。

 

また、スワイプしたときに要素を動かすタイミングはどうするのか?といったこともワイヤーフレームで考えます。

 

パソコンと比較してスマホの画面は小さく見え方も違いますので、ここら辺を決めておくとその後の制作がスムーズに進みますよ。
KEI

 

③:マテリアルデザインを取り入れる

 

そんなGoogleですが、様々なデバイスの統一的なUI/UXを考えて、ユーザーにストレスなくサイトを使ってもらうことを考えています。

 

Google I/O 2014で発表された Google Design のガイドラインでは、新しいユーザー体験(UX)の考えのもと「マテリアルデザイン」を発表しました。

 

 

どのデバイスでも適用できるように統合フレームワークを作ろうとしたのが、マテリアルデザインの始まりのきっかけです。

 

このマテリアルデザインの概念があれば、スマホのワイヤーフレームを作成する際に、シンプルで直感的なデザインをどれだけ作成する必要があるのかを考えて作成できます。

 

ちなみに、ワイヤーフレームを作成する際にAdobe XDを使うこともあるのですが、Adobe XDには、マテリアルデザイン用ワイヤーフレームキットというものがあります。

参考:Adobe XDデータ

 

Adobe XDのワイヤーフレームキットを利用することで、自分で1からワイヤー作成することなく、すでに用意されたマテリアルデザイン用のデザインパーツを使用できます。

 

作業量が減り効率的になると思うので、活用してみる価値があります!

 

スマホ用のワイヤーフレームを作成する:まとめ

 

PCでワイヤーフレームを作るよりスマホで作成することが今後より重要になってきそうですね。

 

繰り返しになりますが、スマホの設計から始めることで、PC用のワイヤーフレームがスムーズに作れてしまうことがあります。

 

ワイヤーフレームの作成は慣れるのに時間がかかりますが、場数を踏むと作成が慣れてくるのと、ポイントを押さえておくことでスムーズに作れます。

 

本記事を読み、少しでもスマホでワイヤーフレームを作る重要性と作る上でのポイントについて理解できましたら幸いです。

 

ここまで読んでいただきありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Webディレクター