Category: software design – WF, screen layout

wireframe cc　日本語文字化け

wireframe ccを使って、ワイヤー書いたのはいいんだけど、エクスポートしようとすると、日本語が、文字化けする。

ああああああ、きっついなー
exportする際に、pngとpdfが選べるんだが、どちらも文字化けする。。

settingで文字コードの指定がないし、おそらく日本語には対応していなんだろう。
うーん、困った。

しょうがない、ctr + [-] で縮小して画面キャプチャしかない。。
教訓: 海外のデザインツール/モック作成ツールを使用する際は、文字コードに気を付けろ(涙目)

wireframe cc の使い方

とりあえず、ブラウザ上でドラッグすると上部にアイコンが現れるので、選択します。
テキストを書きたい場合は「T」を選択します。

うん、これは思ってた以上に使いやすいかも。基本はドラッグ&ドロップで、画面のサイズなども変更できるし、日本語入力もできます。素晴らしい！
これで、作成していきましょう。

Cacoo(無料)がメンテナンスの時

おいおいおい、まじかよ。どんだけ延期してるんねん？

メンテナンスが当初、2018年 12月31 (月) 8:00 ～ 10:00までだったのが、2018年 12月31 (月) 8:00 ～ 12:00になり、その後、2018年 12月31 (月) 8:00 ～ 12:30に変更となり、2018年 12月31 (月) 8:00 ～ 2:00になった。

今日は、シコシコワイヤーを作ろうと思ってたのに、困ったなー。。

うーん、しかしこれ、なんなんだろう？
普通、リカバリ処理でも、そんなに伸びないんだけど。相当クリティカルな問題が見つかったか、今日、新たに機能追加とかやってるのかな？
awsのメンテナンスウィンドウを今日のこの時間に設定していたとしても、メンテナンスウィンドウでこんなに伸びる訳ないんだけどなー

世の中的に、12/31に仕事する人は少ないってことなんでしょうか？そんなことないと思うんだがなー

ということで、他のワイヤーツールを使おうと思います。
候補は以下の通り。ccって、完全にcreative cloudを連想させます。
Wireframe.cc https://wireframe.cc/
NinjaMock https://ninjamock.com/
moqups https://moqups.com/
Prott https://prottapp.com/ja/
mockingbird https://gomockingbird.com/home
MockFlow https://mockflow.com/
HotGloo https://www.hotgloo.com/

しかし、結構あるなー、 パット見、ninja以外はどれも良さそう。
moqupsは使いやすそうではある。まーとりあえず、Wireframe.ccってのつかってみますかね。日本語使えるかが問題だが。

Wireframe.cc

safariっぽいインターフェイスだね。

管理画面WF

確かにこれはめんどい

さあ、19P WFが出来たので、次は、アイコンとPSDをデザイナーにつくってもらい、フロントのコーディングですね。
gulp, vue.js、font-awsome, datepicker、JQueryなどを使っていきたいと思いますが、まずはデザインからですな。早くLaravelまで行きたいですね。

WF、画面設計書を作っていこう

ひたすらWFを書きまる仕事ってありますよね。22時に退社できればまあ早い方、20時退社は早すぎみたいな。。
それだけ需要があるってことでしょう。
さて、WFですが、DFL、画面フローで作成した画面をすべて作っていきます。30枚くらい？
Cacooなど色々ツールはありますが、今回はPPTで作成します。

mobileだけならsketchやXDでも良いかもしれません。

WFのフレームを作っていきます。

おお、そこそこそれっぽいですねwww
まあ、テンプレートはこれでよしとしましょーか。
サービス名は何にしましょうかね？
フォントはメイリオで作っていきます。