2008年の論理ドリルプログラムLogiColaのリバースエンジニアリング

← Blogオリジナルの処方箋に戻る リバースエンジニアリングした2008年のオリジナルからLogiColaの新しいデザイン言語を構築する マリク・ピアラ著 · 2026年9月8日 発表 2年前、私はProfessor Genslerの仕事を保存し、あらゆるデバイスやオペレーティングシステムを持つ学生が使用できる、よりアクセスしやすいソリューションを導入することを目標に、LogiColaのアップデート版を設計・リリースするという目標を設定しました。オリジナルはWindows用に構築されていたため、多くの学生が使用できませんでした。今日、多くの学生がChromebookやモバイルデバイスを使用しています。8月には、アジアの100台以上のデバイスが1週間でLogiCola 3を訪問し、そのうち72台が少なくとも1つの演習を行いました。そのうち66台はフィリピンからのものでした。その半数以上がスマートフォンやタブレットでした。これは私が熱意をもって受け取るシグナルです。この製品は、2024年に私が立てたオリジナルの約束を果たしているようです。今日、私は、Hacker Newsのディスカッション、GitHubのイシュー、および電子メールを通じて共有されたフィードバックに応える新しいバージョンをリリースします。このリリースは、無限の翻訳ドリルによるマスタリーラーニングを復活させ、オリジナルのソフトウェアの遊び心の一部を私自身のタッチで埋め込みます。 魂を吸い取るデザインについて ランディングページは間違った目標を優先し、論理ドリルよりもメール購読フォームを通じたユーザー獲得に重点を置いていました。他のコメンターは、デザインがモダンすぎて場違いだと指摘しました。私の最初の再設計はLogiCola 3をエンタープライズソフトウェアのように感じさせ、古いインターフェースの活気からの逸脱となりました。 ポートをモダンに見せるためにモダンなルックを使用することは、非常に理にかなっています。それが生み出す魂を吸い取るような感覚は、モダンなルックの動機から来ており、それは作者だけのせいではなく、私たちが現在生きている「すべてを市場に出して売る」時代に起因しています。リフレッシュごとに変わるカラフルな背景は、オリジナルのブランドの決定的な要素の1つでした。オリジナルの色使いを借用しましたが、各セットにユニークなパレットを割り当てました。三段論法と命題論理は異なる色を帯びます。これにより、常に自分がどこにいるかを知ることができます。 2008年のプログラムで見つかったカラーダイアログは、9つのカラーテーマを表示し、それぞれ3つの深度（パステル、モデレート、ディープ）があります。以下に6つのテーマを示します。背景、パネル、そして足元に暗い帯があります。サイコロを振ってランダムなものを表示し、3つの深度を試してください。 深度 パステル モデレート ディープ テーマ 名前付きペア もう一度振る アクア/ローズ #CDFFFF · #FFCDCD ローズ/アクア #FFCDCD · #CDFFFF ブルー/クリーム #CDCDFF · #FFFFCD クリーム/ブルー #FFFFCD · #CDCDFF ライム/マゼンタ #CDFFCD · #FFCDFF マゼンタ/ライム #FFCDFF · #CDFFCD 前のセクションの小さな画面は、プログラムが実際の画面を構成する方法と同じように構成されています。色は手で選ばれたのではなく、計算された色で構成されています。各パステルは、明るくプッシュされた彩度の高い色相です。各ペアは、RGBカラーホイール上の補色と色相を設定します：アクアとローズ、ブルーとクリーム、ライムとマゼンタ。そして、下部の暗い帯は、InvertRect、つまり長方形のすべてのピクセルの色値を論理NOT演算するWindows描画関数を通して実行された背景色です。すべてのビットが反転します。バイトの場合、それはFFから引くのと同じです：FF - CD = 32、FF - 00 = FF。帯は、その背景の完全な補色であり、黒いタイトルテキストは同じ規則で白になります。逆コンパイルされたルーチンから再構築された、全体のスキームは次のとおりです。 level = 0xCD # パステル (0xB9 モデレート, 0x91 ディープ) background = rgb(level, 0xFF, 0xFF) # アクア panel = rgb(0xFF, level, level) # ローズ band = ~background # InvertRect 深度を変更すると、levelのみが変更されます。固定されたFFチャンネルは移動しないため、より深いスキームは濁るのではなく、より鮮やかになります。帯は背景のどこにでも追従します。 パステル · CD → 32 モデレート · B9 → 46 ディープ · 91 → 6E 新しい色の選択方法 友人と話しているときに、私はGenslerではないので、LogiCola 3にオリジナルのものと全く同じ声を与えることはできないだろうと気づきました。そこで、カーボンコピーを作る代わりに、オリジナルの遺産を尊重しながら、私自身の印を残すことにしました。昨冬、私はGucci、Chanel、Dior、Louis Vuittonのような家名ブランドに関する本を読みました。Chanelには3人の公式な後継者しかいませんでした。彼らがどのように運営し、オリジナルのソースからインスピレーションを得ながら、ブランドを関連性を保ち、新しい製品を制作したかについて読むことは、私が同様の帽子をかぶることを大胆にしました。オリジナルの色を呼び起こしつつ、新しい興奮をもたらす色を選びたかったのです。そして、各セットが韻を踏むことを望んでいましたが、それらを区別できるほど十分に異なったものにしておくことも望んでいました。カラーテーマは、互いに、そして単独でうまく機能する必要がありました。 Ruxandra Duruは、2つの色が生成できる刺激の量に基づいてそれらを組み合わせる方法に関する優れたツールキットを執筆しました。後に、彼女はBrian Liと共に、選択された刺激の量に基づいて色のペアを提案するツールを構築しました。これはまさに私がやろうとしていたことだったので、その背後にあるモデルを移植し、実験を開始しました。刺激は3つの項から生じます：全体の強度、2つの色の間の明るさのギャップ、およびそれらの色相の距離。最終結果は、スリープ状態からハイパーエキサイトメントまでの範囲で、色のペアがどれだけの視覚的興奮を生み出すかを示します。私は、両極端の間のペアを作成することを目指しました。各セットのカラーテーマを関連性のあるものにするために、0.45〜0.58の刺激間隔内のペアを選択しました。すべての色相に白を加えて柔らかくし、プラットフォームを遊び心がありながらも重すぎないようにするために、暗い表面よりも明るい表面を好みました。セット間のより強い一体感を作り出すために、他のセットの色を表面化するパターンでそれらをペイントしました。以下のカラーラボで操作できます。 表面 インク アクセント 開始 A C J L N Q R S インクを提案 この表面の 表面 このインクの 候補 「提案」ボタンを押してこの行を埋める パターン カモ カモ · ジャイアント キルト あなたのセット 意味と定義 定義の間違いを見つける—広すぎる、狭すぎる、循環している、あるいはもっと悪い。 1広すぎる 2感情的なトーンでの不一致 σ強度0.44 ΔL0.78 色相Δ135° 刺激0.58 3振動0.00 温度ぬるい + クール 表面へのインク12.67:1AA スコアには1つの盲点があります。それは学習ツールにとって重要です。それは可読性については何も知りません。ペアが間隔内にあっても読みにくい場合があり、友人が製品を見せたときに指摘しました。そのため、まずコントラストをチェックし、WCAG AAフロアの4.5:1をクリアしたペアのみを保持しました。 ピクセルはどこから来るのか LogiCola 3にさらに個性を与えるために私が借用したもう1つの要素は、私がベルリンのCODE Universityで勉強していた頃のVitor Abreuによるオリジナルのデザインでした。Vitorは、ソーシャルメディア用の資産と共にロゴをデザインしました。私の友人Vitorが思い描いたブランドはレトロな雰囲気を持っていました。ロゴは、ソーダ缶のピクセル化によって固定されています。私は、ボタンからアイコンまで、新しいユーザーインターフェースのすべての側面にそのディテールを頼りました。ソーシャルメディアカバーは、丸みを帯びた長方形のパターンを特徴としていました。新しいパターンは古いパターンのアイデアを維持し、形状をピクセル化しています。新しい色は、カラーセクションでクリックした色です。 2024年に選ばれたカラーテーマ（ゴールド、バイオレット、グリーン、レッド）は、カトリック教会とよく関連付けられる色相に触発されました。論理は、何世紀にもわたってカトリック教育のコアカリキュラムの基礎となっており、多くの学生が使用しています