2018年5月28日

デザイン

アプリのワイヤー作りを爆速にするSketchプラグイン!LIGHTWIRE

目次

  1. はじめに
  2. LIGHTWIREとは
  3. デモ
  4. セットアップ
  5. 試して見た感触
  6. まとめ

はじめに

今日はアプリのワイヤーフレーム作りを爆速にできるSketch のプラグイン、LIGHTWIREをご紹介します。

この記事ではLIGHTWIREのデモ、セットアップ、そして最後に試して見た感触などもご紹介します。

ベーグリーではSketchのプラグイン以外でも、最新のSketchのアップデートなどをまとめています。
【Sketch】Sketch50アップデートの変更点まとめ

LIGHTWIREとは

LIGHTWIREとはアプリのワイヤーフレーム作りを爆速にできるSketch のプラグインです。LIGHTWIREのパネル内にアプリのスクリーンが設定されており、そちらをすぐに取り出すことができます。

本プラグインを使用するには、Montserrat fontが必要になるので、お持ちでない方はダウンロードしておくと良いと思います。

また、LIGHTWIREのリポジトリはこちらです。
sketch-lightwire-plugin

デモ

このようにLIGHTWIREのプラグインを立ち上げると小さなパネルが出ます。そこから出したいワイヤーを選択するとそのアートボードが出てくるようになっています。

ワイヤーフレームのカテゴリ

LIGHTWIREのワイヤーフレームのは10個のカテゴリが用意されています。

  1. E-commerce
  2. Photo
  3. Login & sign up
  4. Walkthrough
  5. Blog
  6. Social
  7. Settings
  8. Menus
  9. Popups
  10. Charts

そのほかにも本プラグインの製作者がどのようにこのプラグインを作成したのか、制作秘話のムービーがあるので興味ある方はどうぞ。

WEEKEND SPRINTS – Creating sketch plugin

こんな感じでサイドプロジェクトとしてプラグインが作れるんですね。

セットアップ

次に、セットアップの仕方をご紹介します。

とはいえ、プラグインなのでセットアップは非常に簡単です。

LIGHWIREのダウンロードリンクからSketchのプラグインをダウンロードします。

あとは、ファイルを解凍し、ダブルクリックするだけでSketchにインストールされ、使用できるようになります。

試してみた感触

では、実際にLIGHTWIREを試してみます。

今回はテストとして簡単な掲示板サイトのワイヤーを作りました。

できたもの

とてもざっくりではありますが、ログイン/サインアップからチュートリアル、掲示板一覧、投稿、投稿者プロフィールなどを作ってみました。

よかった点

今回、導線を見やすくするためSketchのプロトタイプ機能と合わせて作ってみたのですが、これがなかなかよかったです。

Sketchのプロトタイプ機能、そのままで使うには他のinVisionなどに劣っている感じは否めないですが、このようにドキュメント目的で使う分には十分価値があると思いました。

LIGHTWIRE × Sketch Prototype のコンビは早くてめちゃくちゃ良いです!

これ程度のものだったら5分弱でできます。

また、LIGHTWIREもスパスパとワイヤーが作れるのでとにかく気持ちよくワイヤーが作れました!

改善できそうな点

基本的には大満足でUIもよく設計されていると感じたLIGHTWIREですが、いくつか改善できそうな点がありました。

    1. sketch runnerに対応していない
      基本パネルからアートボードを入れることができるようになっているこちらのプラグインですが、Sketch runnerと組み合わせるとさらに早くなりそうな気がしました。
    2. アートボードの種類が少ない
      こちらは時間とともに解消されそうですが、現時点ではアートボードの種類が少し足りないように感じました。
      今回に関しても文字のみの掲示板を探したかったのですが、どうしても画像が入っているワイヤーしか見つかりませんでした。
    3. 日本語対応していない
      ワイヤーが全て英語なので日本人にとっては少し不便かな?と思いました。書き換えれば問題ないですが…。

まとめ

以上、今日はアプリのワイヤーフレーム作りを爆速にできるSketch のプラグイン、LIGHTWIREをご紹介しました!

改善点はいくつかあると感じましたが、とにかく早くワイヤーがポンポンできるのが気持ち良くて、個人的にはここ最近のプラグインの中では結構上位に食い込むものが出てきた〜と感じました。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP