WorkFlowyをカードスタイルで使うと別アプリみたい Cardy

冬が溶けて春の雨になる。


HandyFlowyが使いやすい

HandyFlowy 1.0
分類: 仕事効率化,ユーティリティ
価格: 無料 (Michinari YAMAMOTO)

HandyFlowyのおかげでWorkFlowyを使う機会がさらに増えました。やはり便利ですね。アウトラインという別軸が文章作成で意識できる。立体的です。

ただ、いつも長い文を書くわけではない。メモ帳タイプもほしい。アイデアを放り込む気軽な活用がしたい。そんなわけでカード型のデザインを考えてみました。


Cardy

カードに付箋を貼り付けていくスタイルです。KJ法を想定しています。カードを開いて、思いついたことを書いていく。もし関連しないことを書いても、後で別のカードを作り、貼り直しが簡単にできます。以下のようなCSSをStylenoteで放り込んでいます。

#header{background:black;}
#documentView{background:white;}
.page{background:white;border-radius:3px;}
.project.selected>.name .content{font-size:large;line-height:1.4em;font-weight:bold;}
.project.selected >.children>div{background:ivory;padding:5px;margin:-10px;margin-bottom:20px;border-radius:3px;margin-left:0px;border-right:1px solid gold;border:1px solid gold;}
.project.selected >.children>div>.name .content{font-weight:bold;padding-bottom:7px;}
.contentTag{color:orange !important;}
.contentUnderline{border-bottom: 2px aqua solid;text-decoration:none;}
.contentBold{border-bottom:2px pink solid;}
.contentItalic{background:lime;}
.notes>.content{color:darkblue !important;}
.bullet{background-image:none;}
.project.open>.name>.bullet{border:1px gold solid;border-radius:3px;}
.bullet,#bulletBucket .bulletBucketBullet{background:gold;border-radius:3px;}
.children{position:relative;margin:0px;border:0px;}
.selected>.children>.project .project{margin:0px;border-top:1px solid #eef;padding-bottom:3px;}
.project.highlighted::before,.project.moving::before,.project.tapped::before,.draggableNameClone::before {background:none !important;}
#moveDropLine{background:orange;}

MemoFlowy経由で登録→ http://tinyurl.com/hu8drth

追記:23:30 親トピックにバケットを付けてみました。


カードスタイル

ほとんど趣味の集まりです。罫線のあるほうが好き。オレンジ系の配色が好き。太字のタイトルが好き。そうした個人的な趣味のメモアプリをWorkFlowy上に作りました。段差は論理性を究めるには必要だけど、論理性は後から生まれるものです。連想を書きなぐるときはフラットがいい。そもそもiPhoneだと画面が狭いので、消したほうがしっとりします。


分散と収斂

ズームすると、それぞれの付箋が自己主張し始めます。アイテム間の関連性に合わせ順位を移動する。当面無関係な分はコンプリートで消す。繰り返していると、そのカードの性格が際立ってきます。そしてズームアウトすると、また別の文脈が見えてくる。

テキストの持つ二重性をデザインとして表現できたかも。


Safari用

HandyFlowyを持ってなくても大丈夫。ブックマークレット版も用意しました。Safariにお使いください。スライドカーソル対応なので使いやすいと思う。

登録リンクはこちら→ http://tinyurl.com/z7dgf7y

このタイプはStylishにもないようです。結構楽しいのになあ。情報カードの発想術が海外にないんだろうか。見た感じが変わると使い方も変わる。意外と十年日記にも合っていたりします。「いつもの作業」が別物に変わる。紙のメタファーに似合うデザインです。


Tester

HandyFlowy上でJavaScriptやCSSの動作確認を手軽に行うスクリプトTester - aitatena
Testerはテストスクリプトとして登録することなくJavaScriptやCSSの挙動を確認できる機能拡張スクリプトです。...

今回aita氏のTesterに助けられました。スタイルやスクリプトを、HandyFlowyに登録せずに実行できるスクリプトです。思ったデザインになるまで試行錯誤するので、毎回登録しているとリストが膨れ上がる。そのうち、どれが有効だったか分からなくなります。一つ前のバージョンを実行し「あれ？ 変わらないぞ」と落胆する。そういう失敗を避けることができ、スムーズに進みました。ありがとうございます。