• タグを中心にした知識の構築

創造的なツールには魅力的なUI、ビジュアルも必要ではないか

しかし、このデータベース的用途とは異なる、Piggydbの真の目的があります。それは、あらゆる角度でつながりを作ることによって、発想を刺激し、新しいアイデアの発見を促す、より創造的なツールになることです。

情報を後から見返したいと思えるようなUIだろうか？

まず最初に、僕はWindowsとiPhoneとiPadのクライアントしか使ったことがありません。もしかしたら、Macでは違うかもしれません。ただ、WindowsとiPhoneとiPadのクライアントのUIは、正直あまり好きにはなれません。あまり素敵ではないからです。

色々な情報をEvernoteに蓄積していく。そして数ヵ月後か数年後、それを見返したいと思うときがくるでしょう。ただ、果たしてこのEvernoteで情報を見返して満足感が得られるのか？機能は貧弱でもより魅力的なUIを持つアプリケーションの方が、読み返すモチベーションも読み返した後の満足感も上ではないだろうか？そう感じたことはありませんか？

ただ、見返すものが、文字通りただの情報だたっとしたら、そこにデザインという観点は的外れでしょう。ただ、大学ノートではなく会えて高価なモレスキンなどのノートを手に取るような人であれば、一度は感じたことがあるのではないでしょうか。

Awesome NoteのUIデザインは本当に素敵です。 もう素敵すぎて、アプリを起動する度にウットリしてしまいます。惜しむらくべきはアイコンでしょうか…。

そして、使い勝手も決して悪くないんですよね。ノートの表示方法も多彩だし、ソートも結構強力です。クイックメモ機能やToDo管理も便利です。ノートブック毎にカラーやアイコンを変えて、ノートブック一覧も見やすくできます。検索の速さも優秀です。

• タグクラウドビューのワクワク感！
  • 大きく育ったタグには、たくさんインプットしたなぁという満足感も感じられますね！！
• スライドバー操作で、様々に変化するフラグメントリストビューの爽快感！
  • 画像フラグメントのサムネイルが表示されるようになると更に楽しくなりますね！！（要望です、ご検討よろしく御願いします）
• 軽快な検索スピードと、的確な検索結果を併せ持つ、優秀な全文検索！
  • 一回の表示量を制限しているので、大量の検索結果がある場合でも、極端に遅くなったり重くなったりしないのが職人技って感じです！！
• フィルタ操作を意識させないシームレスな｢関連するタグ｣機能！
  • ＋ボタン、－ボタンでポチっポチっと操作していく感じも、分かりやすく面白いです！！
• フラグメントツリービューからのつながりをたどるネットサーフィンの楽しさ！
  • 双方向つながりだと更にネットワークが広がり、まさに脳内シミュレータと化します！！

• html body div.ac_results ul li.ac_over{ color: #ff6600 ! important;} の発見。
  • タグの入力補完機能が働いている時に選択しているタグを区別するための色の指定の記述を発見。
• 小さなアルファベットが読みやすくなるように"Verdana"フォントを指定。
  • フラグメントのつながり表示が読みやすくなります。
• visited linkの色を変更しない。
  • ニュースサイトなどと違い、自分で入力した記事なので必要が無い。無意味に色に差がでると逆に混乱する。
  • todo的な利用をする方、読み返し具合を把握したい方などは、個別に配色を設定する方が良いでしょう。
• @-moz-document url-prefix("http://localhost:8080/warファイル名/document-view.htm" の記述に注意。
  • スタンドアロン・パッケージ以外のユーザーの方は、微調整が必要です。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://localhost:8080/") {

html body div.ac_results ul li.ac_over{
    color: #ff6600  ! important;
  }
　
body,span, div, td,  h1, h2, h3, h4, h5, h6, li {
   color: #ffffff;
   background-color:#333333 !important;
   font-family:"Verdana" !important;
  }

a:link {
    color: #ff6600  ! important;
  }

a:visited {
    color: #ff6600  ! important;
  }

a:hover {
    color: #ff0066  ! important;
  }

a:active {
    color: #ff0000  ! important;
  }
}


@-moz-document url-prefix("http://localhost:8080/document-view.htm") {
  * {
    background:#ffffff !important;
  }
  body, span,  div, td,  h1, h2, h3, h4, h5, h6, li {
   background-color:#ffffff  !important;
   color: #666666
  }
  H1 {font-size:medium!important;}
  H2 {font-size:small!important;}
}