Sketch3を使うならモバイル用デザインに最適なSketch Mirrorも一緒に使おう。

Sketch Mirror
Sketch Mirror in App Storeより

「モバイルサイトやアプリのデザイン案件が増えています。」

という方が多いのではないでしょうか。私もその内の一人です。それは、Googleは2015年4月21日からスマホでの検索結果の仕様を変えて、ウェブサイトがスマホ用に最適化されているとモバイルでの検索結果に優位に働くようになったからです。

参考: Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

実際にスマホ用に最適化されていると、下記画像のようにスマホ対応と表示されます。

スマホでの検索結果

なので、対応することはもはや必須な訳です。ちなみに、Googleが推奨しているデザイン形式は、画面サイズでデザインやレイアウトの表示を変えるレスポンシブウェブデザインです。

参考: モバイル設定を選択する - ウェブマスター向けモバイルガイド

また、レスポンシブデザインではスマホの小さな画面でも視認性や操作性が十分なUI設計が求められます。その時に活躍するのが、Sketch Mirrorです。(前置き長い…。)

SketchとiPhone使っていたら必ず入れておくツール

体感値ですが、Sketchを使うデザイナーがかなり増えています。検索すると相当数の良記事にも出会えます。日本のiPhoneユーザーは異常に高いのと、SketchがMac専用ツールなことから、iPhone持っていないSkecthユーザーの方が少ないはず。であれば600円出してSketch Mirrorも購入してください。

昼1食分我慢するだけで、モバイルアプリやモバイルサイトの制作効率がアップするかも。

デザインをiPhoneで確認しながら作業できる

Sketch Mirrorの機能は、リアルタイムで制作中のデザインをiPhone(iOSのデバイス)で表示してくれることです。それだけです。ですが、めちゃ快適で、要素を縦横に少し移動させると即座に反映してくれます。しかも、スワイプでアートボード間を移動できるので、複数ページの確認もお手の物。

スワイプイメージ

上記はイメージ用のGifですが、これもSketchで作成できます。

Wi-fi接続すればすぐ使える

アプリをインストールし、起動すると以下の画面が表示され、指示通りに行えばすぐにMirrorが使えるようになります。

スマホアプリ起動

  1. MacとiPhone(iOSのデバイス)が同じWi-fiネットワークにあることを確認する
  2. Sketchで「Mirror」をクリックし、デバイスを選択する

    Mirror
    同一ネットワーク上にiPhoneが認識されると、Sketchの「Mirror」アイコンに赤ポチが表示されます。

    Select Device

  3. これで完了。Mirrorが使えるようになって、変更をすぐに反映してくれるようになります。

超絶簡単に設定できます。アプリインストールから使用まで5分も入りません。

デバイスサイズに注意

実際にMirrorを使う場合は、接続するデバイスのウィンドウサイズに注意した方が良いです。アートボードでiPhone6サイズの335×667pxとした場合、確認デバイスがiPhone5であれば、横幅が320pxと小さいため画面内に収まってくれません。特に問題ないかもしれませんが、反映のたびに画像を動かして表示を確認するのはストレスです。なので、気になる方はアートボードサイズは確認デバイスのサイズにするのが良いかも。

Sketchはコストパフォーマンスが良い

自分は仕事上、PhotoshopやillustratorのCC版も使いますが、Webに限るとほとんどSketchでデザインします。手書きしたアイコンとかイラストもSketchで制作します。可能であれば、Adobe製品はPhotoshopだけの契約にしたいくらい。

すでにWebデザイナーの多くが使っているツールですが、Mirrorがまだの方はこの機会に入れてみても良いのでは。あと、Sketchは初心者Webデザイナーでも使いやすいツールですよ。

関連記事