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

デザイン/31 Aug 2015

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

という方が多いのではないでしょうか。私もその内の一人です。それは、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 デザイナーでも使いやすいツールですよ。