ワイヤーフレームやモックアップ・プロトタイプ作成にJustinmind Prototyper

Justinmind Prototyper

Justinmind Prototyper

行きたいライブのチケット争奪戦に敗れ続けて辟易している、JETBABY管理人です。Yeah。

今回はウェブサイトやアプリなんかのプロトタイピングツールのご紹介。

Justinmind Prototyper 6

結構お気に入りなんですが、あまりメジャーじゃないので紹介しとくかなと。

他に似たような普段使っているツールといえばMicrosoftのVisioとかCacooとかでしょうか。
でもワイヤーフレーム作るときも使い慣れたIllustratorやPhotoShopのほうが多かったりもします。

なんですが、このPrototyper 6も最近はよく使ってる次第です。
特にバージョンが6になってからでしょうか、その前のも使ってましたが。

さて、何で気に入っているかというと

  • ・デスクトップアプリ
  • ・ワイヤーを作りながら動くモックも作れる
  • ・サイトマップのイメージも自動で作ってくれる
  • ・無料でも十分使える(有料版もあるけど)
  • ・ウェブだけでなくモバイルアプリなんかでも。

あれ、あんまり特徴ない!?
他のアプリやサービスでもできること多いな。
個人的には・・・
PhotoshopなんかのAdobe系とMicroSoftのVisualStuidoの画面を足して2で割ったようなUI
なんてところも気に入ってはいますがこれはかなりニッチな意見だろうな。
俺は使い慣れている2つなんで。

バッドな点というか敬遠されそうなところとしては、英語だってとこでしょうか。
俺は英語気にしないでいいんですけどね。

あ、ちなみに英語の成績は驚くほど悪かったですよ。
みんなも気にしなければいいだけですYO、英語なんて。

こちらのサイトで日本語化してますね。古いバージョンの話なんで使えるかわかりませんが。
Prototyper Free を日本語化する

さて、簡単に説明。

初期設定では
iOS7、Android、WEB、グーグルグラス
に対応しているけどウィジェットを足せばWin8のストアアプリとかにも対応できるみたい。

基本の画面はこんな感じ。

Prototyper基本画面

要素をドラッグアンドドロップでぺたぺたして、作ったページ(シーン)をリンクしたりするだけ。

必要なだけシーンを作って、紐付けていけばモック&サイトマップが出来上がる次第。

適当な感じで企業サイトワイヤーを作ってみたりした画像がこちら。

企業サイトワイヤー

で、サイトマップを画像で吐き出させたのがこの画像。

サイトマップ生成画像

※仕事のときはもっとちゃんと作るんですよ・・・作ってると思う・・・

出来上がったモックは共有もできるしWordに書き出したりもできる。

共有するにはjustinmindのカウントを作る必要があるけどメアドだけでできます。
怪しいな、いやだなと思う場合はなんか適当にフリーメールとか作って登録してもいいかなと。
有名企業も使ってるよ的な宣伝ページもあったりするけど、どうなのかはなぞ。参考までに。

アカウント持ってる同士で共有するとモックの部分部分にコメント書いたりなんだりもできるわけです。

アカウントない人に見せるように設定することも可能ですが、その場合はコメントやらなんやらの機能は使えない。
ただ見るだけね。でもないよりいいね。

管理サイトで閲覧専用のURLを吐き出せるのでそれを教えればいい感じ。
https://www.justinmind.com/usernote/tests/12592133/12592136/12593286/index.html
上のリンクはサンプルで作ったモックなんでよかったらご覧あれ。直にリンクしていいか悩んだのでURLだけ載せます。
※とりあえずこのブログはそんなにアクセスないのでさらしておきますが、いつかそのうちある日アクセス数が増えましたらこのリンクは使えないようにしちゃうかもです。

アカウントつくるとjustinmindのサイトに専用のページができてアプリと連携していろいろできる。
専用ページはロゴとか色とかカスタムできたりも。
無料だとファイルをあげるのに使えるスペースが300Mまでみたいですね。

Justinmindの管理画面

ブログ用に作ったアカウントなんでぜんぜん容量使ってませんが、普通に使う分には問題ない容量かと。
これ超えるようならお金払えばいいって感じですわ、そんだけ使ってるならね。

Wordへの書き出しは資料作りなんかに役に立つかも・・・。うーん、たつかもってレベルですが。
要編集ですが、まぁ使えないことはないです。

Wordへの書き出し画面

HTMLにもできるみたいだけどChromeに専用エクステンションいれてみないといけないようだ。
有料にしたら普通にできるのかもですが。
とはいえ、個人的にはHTMLにするのは自分でするので特にどうでもいいといえばどうでもいい。

ということで機能が豊富すぎて細かく説明したらきりがないのでこんなもんで。
いや、ほんとここに書いたことなんて機能の一部ですわ。

ちなみにモックだけならinVisonなんかのほうが直感的だったりしますね。POPとかも。
画像貼り付けてリンク作るだけなんで。

ただ、個人的にはこういったデスクトップアプリのほうがしっくり来ちゃいます。
似たようなことはこいつでもできますね。画像をシーンに貼り付ければってかんじで。

では今回はここまで。
ウェブデザイナーさんもディレクターさんもプランナーさんだろうが営業だろうが、結構幅広くつかえると思うので一度いじってみてはいかがでしょう。

アクセス制限できるプラグイン「WordPress Access Control」の日本語化ファイルを作成しました

  WordPress Access Control 本家

人手が欲しいが金はない、JETBABY管理人です。どうも。

さて今回はの更新はWPネタ。
WordPress Access Control」はWordpressの各ページや投稿へのアクセス権限を管理できるプラグインです。
投稿が見れるのはこの権限、ページが見れるのはこの権限の人だけ、というやつですね。

使い方の説明は、日本語化ファイルを入れていただければメニューが日本語になるので不要かと思います。
それほど複雑な操作もないので。

こんな感じが

WordPress Access Control英語画面

こんな感じに

WordPress Access Control日本語画面

日本語化ファイルのダウンロードはこちらからどうぞ
WordPress Access Control日本語言語ファイル

日本語化の方法は何はなくともまず、「WordPress Access Control」をお使いのWordPressに適用してください。

その後、日本語化ファイルのZIPを解凍した中のwpac-ja.moを[wordpress-access-control]フォルダの中にある[languages]フォルダに入れるだけでOKです。

同じフォルダにあるwpac-ja.poは日本語翻訳をするための作業用ファイルなのでアップはしないで大丈夫です。
日本語訳が気に食わないなどのときはpoファイルをいじってmoファイルを作成してください。

他にも日本語訳がおかしいとか何かありましたらご連絡いただけると助かります。

また、プラグイン本体のほうのミスで一部言語ファイルが適応されない箇所などもあるようです。
私が作業したときの最新版、4.0.8で一部例をあげますと。

wordpress-access-control\templatesの中にあるoption.phpの142行目

<?php _e( ‘These options are defaults for posts and pages in case the majority of your posts and pages will have similar settings. You can override any of these settings on a per-post or per-page basis.’ ); ?>

となっていますが、正しくは

<?php _e( ‘These options are defaults for posts and pages in case the majority of your posts and pages will have similar settings. You can override any of these settings on a per-post or per-page basis.’, ‘wpac’ ); ?>

言語ファイル設定の’wpac’の記述が抜けています。
他にも同じような間違いがある部分がたしかありました。

また、281行目では

<textarea id=”page_excerpt_text” name=”page_excerpt_text” class=”large-text” cols=”50″ rows=”5″><?php echo get_option( ‘wpac_page_excerpt_text’, __( ‘To view the contents of this page, you must be authenticated and have the required access level.’, ‘wpac’ ) ); ?></textarea>

となっていますが、以下が正しいです。

<textarea id=”page_excerpt_text” name=”page_excerpt_text” class=”large-text” cols=”50″ rows=”5″><?php _e( ‘To view the contents of this page, you must be authenticated and have the required access level.’, ‘wpac’ ); ?></textarea>

行中のecho get_optionの部分が間違っているようです。
ちなみに262行目も同じよう間違いが。

他に何箇所かありそうですが割愛。

一応プラグインの作者様には言語ファイルを作ったよって連絡するついでに、バグも報告しますが、なにぶん英語がつたないので通じるのかは分かりません。

上記の本体ファイルの修正をすればとりあえずは日本語表示になりますが、プラグインがアップデートされたときにまた戻ってしまうんじゃないかな。
ですので、まぁ、そこまで気にしない人は修正することはないとおもいます。そんなに難しいことかいてないし。
(※日本語化ファイルには1項目だけ日本語化していないものがあります。日本語訳にするだけならできるけどどこに使われているのか場所が分からず、訳が正しいか確認できないので訳しませんでした)

最後に簡単に使い方の補足。

カスタム投稿タイプも管理できます。
作成したカスタム投稿が表示されるので、アクセス制限したい場合にはチェックを入れるだけでOK。
ただし、アクセス権限の設定については、ポストで作成したカスタム投稿タイプはポストの初期設定、投稿なら投稿の初期設定が適用されます。

設定画面 カスタム投稿とユーザー権限

なので、それらと別の設定にしたい場合はそれぞれ記事作成時や編集時に設定をしてやってください。

投稿画面のコントロール

User Role Editorなんかで権限作ればそれももちろん反映します。

他にもメニュー作成のときにも、メニューへのアクセス権限も設定でます。

メニュー設定

ということで簡単なアクセス制限ができるWordPressのプラグインの紹介でした。

クライアントワークだとアクセス制限とかの要望は結構あるので覚えておいて損はないはずです。

それではまた次回お会いしましょう。