*

改・WorkFlowyで「三色ボールペン方式」

公開日: : WorkFlowy

1.三色ボールペンWorkFlowy

今、私のWorkFlowyは、「三色ボールペンWorkFlowy」です。

WorkFlowyで三色ボールペン方式

「三色ボールペン方式」とは、『三色ボールペンで読む日本語』で齋藤孝氏が提唱した読書の基本技です。本に線を引いたり書き込んだりする際、次のルールに従って、青・赤・緑の3色に色分けをします。

  • 青:客観的にまあまあ重要
  • 赤:客観的にとても重要
  • 緑:主観的に面白い

「三色ボールペン方式」は、読書技法ですが、知的生産一般に応用可能です。たとえば、私は、Googleカレンダーに入力する予定を「三色ボールペン方式」で色分けしています。

WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』

「Stylish」というアドオンを使えば、この「三色ボールペン方式」をWorkFlowyで実現できます。「三色ボールペンWorkFlowy」です。

このことを、以下の2つの記事で書きました。

そうしたところ、takasek(@takasek)さんが、Twitterでコメントを寄せてくださいました。takasek(@takasek)さんのコメントによるすばらしい2つの改善提案を受けて、「三色ボールペンWorkFlowy」は、また少し成長した気がします。感謝です。

そこで、少し成長した「三色ボールペンWorkFlowy」を、「改・WorkFlowyで「三色ボールペン方式」として、ここにまとめます。

2.いただいた改善提案

いただいたtakasek(@takasek)さんのTweetは、こちらです。

2つのことが含まれています。

  • 「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるか?
  • 緑ハイライトと下線が重なる問題の解決法

それぞれ説明します。

(1) 「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるか?

a.takasekさんのご提案と、その根拠

「三色ボールペン方式」の青線・赤線・緑ハイライトを、WorkFlowyの何に割り当てるかについて、takasekさんの提案は、次の組み合わせです。

  • 「三色ボールペン方式」の青線
    • WorkFlowyの下線
  • 「三色ボールペン方式」の赤線
    • WorkFlowyの下線+斜体
  • 「三色ボールペン方式」の緑ハイライト
    • WorkFlowyの太字

この根拠は、次の2つです。

  • 「三色ボールペン方式」の考え方からの根拠
    • 「三色ボールペン方式」では、青線(客観的にまあ重要)の上位概念が、赤線(客観的にとても重要)である。
    • 青線=下線、赤線=下線+斜体という割り当ては、青線の程度が上がったものが赤線、という両者の関係を反映しているので、「三色ボールペン方式」の考え方と合っている。
  • WorkFlowyの操作方法からの根拠
    • 前提として、下線はCtrl+Uで、斜体はCtrl+Iであり、UとIはキーボード上、隣に並んでいる。
    • なので、赤線のためには、Ctrlを押しながらUとIを連続して押せばよく、操作が簡単。

b.改・WorkFlowyで「三色ボールペン方式」へ

私は、この改善提案に深く納得し、さっそく真似させていただきました。

「青の上位概念が赤」というご指摘は、客観系統と主観系統の区別という「三色ボールペン方式」の基本思想に沿っており、すばらしいです。

また、青と赤は、「やっぱり赤」「やっぱり青」などと、青から赤へ、赤から青へ、という修正が多い2色であるところ、青=U、赤=U+Iという組み合わせなら、この往復が簡単であるところも、ポイントが高いです。

(2) 緑ハイライトと下線が重なる問題の解決法

a.takasekさんのご提案

緑ハイライトが上の行の下線と重なる問題について、takasekさんは、「background: -moz-linear-gradient」による解決方法を示してくださいました。

あんまり分かっていないのですが、教えていただいたとおりに記述したところ、うまくいきました。

なんでも、グラデーションを指定しているとのことです。

b.改・WorkFlowyで「三色ボールペン方式」へ

もちろん即採用です。

3.改・WorkFlowyで「三色ボールペン方式」

(1) 今のスタイル

と、いうわけで、「続・WorkFlowyで「三色ボールペン方式」」でもやっていた赤色文字・緑色文字も使えるバージョンに、takasekさんによる2つの改善提案を取り入れて、スタイルを書き直しました。

改・三色ボールペン方式

今の「三色ボールペンWorkFlowy」のスタイルは、次のとおりです。

  • @-moz-document domain(“workflowy.com”) {
    • .contentUnderline{
      • border-bottom: 2px #0000FF solid;
      • text-decoration:none;
      • }
    • .contentUnderline.contentItalic{
      • border-bottom: 2px #FF0000 solid;
      • color: #000000;
      • }
    • .contentBold {
      • font-weight: normal;
      • background: -moz-linear-gradient(top,
        • rgba(188, 245, 169, 0),
        • rgba(188, 245, 169, 0) 5%,
        • rgba(188, 245, 169, 1) 10%,
        • rgba(188, 245, 169, 1)
        • );
      • }
    • .contentItalic{
      • font-style: normal;
      • color: #FF0000;
      • }
    • .contentBold.contentItalic {
      • background: -moz-linear-gradient(top,
        • rgba(255, 255, 255, 1),
        • rgba(255, 255, 255, 1) 5%,
        • rgba(255, 255, 255, 1) 10%,
        • rgba(255, 255, 255, 1)
        • );
      • color: #04B404;
      • }
    • .contentUnderline.contentItalic.contentBold{
      • background: -moz-linear-gradient(top,
        • rgba(188, 245, 169, 0),
        • rgba(188, 245, 169, 0) 5%,
        • rgba(188, 245, 169, 1) 10%,
        • rgba(188, 245, 169, 1)
        • );
      • color: #000000;
      • }
    • }

不要な行もあるかと思います。もっとエレガントに記述することもできるかと思います。ともあれ、とりあえずうまく機能しているので、これでよしとしています。

以下、ひとつひとつの説明です。

(2) 説明

a.基本の三色(青線・赤線・緑ハイライト)

(a) 青線

  • .contentUnderline{
    • border-bottom: 2px #0000FF solid;
    • text-decoration:none;
    • }

「border-bottom: 2px #0000FF solid;」で青線を引きます。

「text-decoration:none;」で下線を消します。

(b) 赤線

  • .contentUnderline.contentItalic{
    • border-bottom: 2px #FF0000 solid;
    • color: #000000;
    • }

「border-bottom: 2px #FF0000 solid;」で赤線を引きます。

「color: #000000;」で、文字色を黒にします。「.contentItalic」で赤色にしてあるので、もとに戻すわけです。

「font-style: normal;」は、「.contentItalic」ですでに解除してあるので、書きません。

「text-decoration:none;」は、「.contentUnderline」ですでに解除してあるので、書きません。

(c) 緑ハイライト

  • .contentBold {
    • font-weight: normal;
    • background: -moz-linear-gradient(top,
      • rgba(188, 245, 169, 0),
      • rgba(188, 245, 169, 0) 5%,
      • rgba(188, 245, 169, 1) 10%,
      • rgba(188, 245, 169, 1)
      • );
    • }

「font-weight: normal;」で、太字を解除します。

「background:」で、背景にグラデーションを設定します。

b.赤色文字・緑色文字

(a) 赤色文字

  • .contentItalic{
    • font-style: normal;
    • color: #FF0000;
    • }

「font-style: normal;」で、斜体を解除します。

「color: #FF0000;」で、文字色を赤色にします。なお、このため、先ほどの「.contentUnderline.contentItalic」で文字色を黒に戻す必要があります。

(b) 緑色文字

  • .contentBold.contentItalic {
    • background: -moz-linear-gradient(top,
      • rgba(255, 255, 255, 1),
      • rgba(255, 255, 255, 1) 5%,
      • rgba(255, 255, 255, 1) 10%,
      • rgba(255, 255, 255, 1)
      • );
    • color: #04B404;
    • }

「background: 」で背景を白にします。「.contentBold」で設定した背景を解除しているわけです。

なお、こんな記述じゃなくてもいい気がしますが、よくわからないので、こうしてあります。

「color: #04B404;」で、文字色を緑にしています。

c.青線+緑ハイライト、赤線+緑ハイライト

(a) 青線+緑ハイライト(客観的にまあ重要で、主観的に面白い)

「.contentUnderline.contentBold」

単純に、「.contentUnderline」と「.contentBold」が重畳的に適用されればよいので、特に記述する必要はありません。

(b) 赤線+緑ハイライト(客観的にとても重要で、主観的に面白い)

  • .contentUnderline.contentItalic.contentBold{
    • background: -moz-linear-gradient(top,
      • rgba(188, 245, 169, 0),
      • rgba(188, 245, 169, 0) 5%,
      • rgba(188, 245, 169, 1) 10%,
      • rgba(188, 245, 169, 1)
      • );
    • color: #000000;
    • }

ほしい表現は、赤線と緑ハイライトです。

赤線は、「.contentUnderline.contentItalic」の設定が生きていますので、何も記述しなくてもよいです。

緑ハイライトは、「.contentBold.contentItalic」で背景を白にしてしまっていますので、「background:」で、改めてグラデーションを設定します。

また、「.contentBold.contentItalic」で文字色が緑になっていますので、「color: #000000」で改めて文字色を黒に戻します。

4.「三色ボールペンWorkFlowy」は、「三色ボールペン方式」のための、最も優れたデジタルツール

私は、「三色ボールペン方式」を愛用しています。齋藤孝氏も繰り返すように、「三色ボールペン方式」は、知的生産の基本技です。日々使いこむことで、3色の色分けという具体的な行為が、客観系統と主観系統の区別という高度な知的作用と結びつきます。

「三色ボールペン方式」を技として使い込むには、道具が大切です。アナログにおいては、「三色ボールペン方式」を実践するための道具として、三色ボールペンが存在しています。ところが、デジタルにおいては、これまで、「三色ボールペン方式」を実践するのに適した道具が存在していませんでした。

「三色ボールペン方式」を実践するためには、少なくとも次の3つの条件を満たす必要があるのですが、この3つを兼ね備えたデジタルツールが見当たらなかったためです。

  • ごく簡単な操作で、赤・青・緑の色分けができる。
  • 赤+緑、青+緑という重ね塗りができる。
  • 文字を、客観系統と主観系統で色分けして、書き込むことができる。

たとえば、パソコンやiOS版のKindleアプリには、3色を含む複数色ハイライトの機能があります。でも、Kindleアプリの色分けは、次の理由で、「三色ボールペン方式」を実践することができません。

  • 赤・青・緑の色分けの操作が、少し面倒。
  • 同じ場所に2色を塗ることができない。赤or青or緑。
  • 書き込む文字を色分けすることができない。

これに対して、今回、アドオン「Stylish」で実現した「三色ボールペンWorkFlowy」は、この3つを満たしています。

  • キーボードからの簡単な操作で、赤・青・緑の色分けが可能。
  • 同じ場所に、赤+緑、青+緑という重ね塗りができる。
  • 文字を、赤色と緑色という客観系統と主観系統で色分けをして、書き込むことができる。

「三色ボールペンWorkFlowy」は、「三色ボールペン方式」という知的生産の基本技を、デジタルツールに活用する道を開くTipsです。

「三色ボールペン方式」の愛用者の方も、そうでない方も、よろしければ、一度お試しください。

【2015/07/27 追記】

@takasek さんから重ねてアドバイスをいただき、「background:」を少し書き換えました。

「:not()」を使ってきれいに書く方法も、考えてみたいです。

【関連】

WorkFlowy

WorkFlowyの説明

WorkFlowyの丁寧な説明

「WorkFlowy専用Firefox」の説明

ブラウザから使うWorkFlowyを、専用アプリのようにするTipsが、「WorkFlowy専用Firefox」です。

「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる(Windows&Mac)

WorkFlowy×Stylish

「WorkFlowy専用Firefox」の余白を、アドオン「Stylish」で調整する

三色ボールペン方式

「三色ボールペン方式」の考え方や応用例

三色ボールペン方式で読書会を運営する方法を構想する

ToodledoとGoogleカレンダー以前のタスク管理・スケジュール管理を振り返る

『三色ボールペンで読む日本語』関係

WorkFlowyで作るKindle本の「読書ノート」の実例:『三色ボールペンで読む日本語』

三色ボールペン方式を取り入れると、なぜ、読書会の場は、創造的になるのか?

三色ボールペン方式×WorkFlowy

WorkFlowyで「三色ボールペン方式」

続・WorkFlowyで「三色ボールペン方式」

スポンサードリンク

関連記事

no image

ウェブ上に存在するWorkFlowyに関する日本語情報を時系列で淡々と整理する(2015年1月〜3月)

先日から、ウェブ上に存在するWorkFlowyに関する日本語情報の整理を試みています。 201

記事を読む

no image

WorkFlowyのDropboxバックアップの基本

1.WorkFlowyのDropboxバックアップ機能 WorkFlowyには、Dropboxへのバ

記事を読む

no image

自分のWorkFlowyを育てる。「赤坂シナモンの地下迷宮」へと続く試行錯誤の中間報告。

1.はじめに (1) WorkFlowyを使い始めて2ヶ月間 私がWorkFlowyを本格的に使

記事を読む

no image

WorkFlowyで作る紙の本の読書ノートの実例:『[超メモ学入門]マンダラートの技法』

1.はじめに 読書からの収穫を増やすために、当たりだと感じた本と出会えたときには、「読書ノート」を作

記事を読む

no image

[展開]『コンテナ物語』から得た「入れ物」一般に関する知見を、WorkFlowyの「トピック」に応用する

1.はじめに 『コンテナ物語』は、2015年に読んだ本の中で、もっともよい収穫を得た本のうちの1冊で

記事を読む

no image

【Mac】WorkFlowyに、キーボードからタイムスタンプを入力するには?(MacApp「WordService」を使って、キーボードショートカットにサービス登録)

1.課題 (1) 課題 Macから、WorkFlowyに、タイムスタンプをテキストデータですばやく入

記事を読む

no image

iOS10対応・OPML機能・文字選択モード/HandyFlowy Ver.1.4のお知らせ

HandyFlowyは、スマートフォンから使うWorkFlowyを驚くほど便利にするアプリです。

記事を読む

no image

WorkFlowyで「発見の手帳」(『知的生産の技術』とWorkFlowy)

1.私は、「発見の手帳」の、どこに惹かれたか? (1) 「発見の手帳」は、着想を文章で記録する手法

記事を読む

no image

「WorkFlowy専用Firefox」にローカルファイルリンク機能をつけて、WorkFlowyを知的生産のコックピットに(Window&Mac)

先日、こんなエントリを書きました。 WorkFlowyに書いたURLを活用し、WorkFlowyを思

記事を読む

no image

データベースとリスト(ひとつの秩序でいろんな役割を果たすための、WorkFlowyの発想)

1.データベースのようなデジタルツール (1) Toodledoはデータベース 現在、私は、自分のタ

記事を読む

スポンサードリンク

スポンサードリンク

no image
お待たせしました! オフライン対応&起動高速化のHandyFlowy Ver.1.5(iOS)

お待たせしました! なんと、ついに、できちゃいました。オフライン対応&

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑