プログラミングで作れるものと聞くと、ゲームを思い浮かべる方も多いかもしれません。
今回、オンライン校の生徒が作ったのは、画像・音声・動画のファイルサイズを小さくできるWebアプリ「LightBox Compress」です。
実はこの作品、オンライン校の講師から「こんなツールを作ってほしい」とお願いしたことから始まりました。
しかも、ただ動けば完成ではありません。
うまくいけばアルスクールのツールとして公開したいと考えているため、見た目もアルスパークのツールになじむように整えてくれています。
「自分が作りたいもの」から一歩進んで、「誰かが本当に使うもの」を作る。そこには、機能を考えるだけではない、相手を思う工夫がたくさん詰まっていました。
画像を選ぶだけ。結果がひと目で分かる軽量化アプリ
使い方はとても分かりやすく、画像を画面にドラッグ＆ドロップするか、ボタンからファイルを選びます。圧縮後の形式はWebP・JPEG・PNGから選べ、画質や最大サイズもスライダーで調整できます。
ファイルを読み込むと、元の画像と変換後のプレビューが並んで表示されます。さらに「圧縮前」「圧縮後」「変化率」「形式」が数字で示されるので、どれくらい軽くなったのかを見比べてからダウンロードできます。
今回、用意した約7.0MBのPNG画像で試したところ、WebP形式で約337KBになり、画面には95.2％のサイズ削減と表示されました。圧縮率は画像によって変わりますが、数字と見た目の両方を確認してから保存できるのは、使う人にとって安心できる設計です。
画像だけでなく、音声や動画にも対応
画面上部には「画像」「音声」「動画」の3つのタブがあります。
画像では形式・画質・最大幅・最大高さを選び、音声ではビットレートと音量、動画では解像度や映像・音声のビットレートを調整できる構成です。
同じ「軽くする」でも、扱うファイルによって必要な設定は違います。その違いをタブごとに整理し、必要な項目だけが見えるようにしたことで、初めて使う人でも次に何をすればよいか迷いにくくなっています。
処理はブラウザの中で行う仕組みで、作品の画面にも「ファイルは外部サーバーに送信されません」と案内されています。便利な機能だけでなく、使う人が不安に思いそうな点まで先回りして伝えているところにも、ツールとしての細やかさを感じました。
アルスパークの仲間として使えるデザインに
このアプリでは、機能だけでなくデザインにも理由があります。
淡い水色や紫、ピンクを使った背景、角の丸いカードやボタンなど、アルスパークにあるツールの雰囲気に寄せて作られています。アルスクールのツールとして公開することを考え、「いつもの場所に並んだときに違和感がないように」と、見た目まで意識してくれました。
デザインは、単にきれいに飾るためのものではありません。文字は読みやすいか、押せる場所が分かるか、設定が多くても迷わないか。誰かに使ってもらう作品では、こうした一つひとつが使いやすさにつながります。
講師からの依頼をそのまま形にするだけでなく、すでにあるサービスの世界観まで見て考えたこと。ここに、この作品ならではの頼もしさがあります。
「作ってほしい」が、学びを社会につなげる
子どもの作品づくりでは、「自分が楽しい」が大きな原動力になります。そこに「誰かが待っている」という目的が加わると、考える範囲がぐっと広がります。
今回は、講師が実際に使いたい機能を伝え、公開する可能性まで見据えて制作をお願いしました。そのため生徒は、ファイルを軽くする処理だけでなく、結果の見せ方、設定項目の整理、サービスになじむデザインまで考えることになりました。
これは、大人の仕事にもつながる大切な経験です。相手の希望を聞き、必要な機能に分け、使う場面を想像し、動く形にする。お子さんの「作るのが好き」という気持ちは、こうして身近な人の困りごとを解決する力にも育っていきます。
このアプリは、アルスクールのツールとしての公開を目指している制作途中の作品です。生徒の作品が、本当に誰かの役に立つ道具になるかもしれない。私たち講師も、その先を楽しみにしながら、一緒に磨いていきたいと思います。
AI・プログラミング教室【アルスクール】では、オンラインでAIやプログラミングを学べるレッスンを行っています。
実際のレッスンに参加できる無料体験で、この機会にアルスクールの学びを体験してみませんか。
また、実際の教室でもレッスンを行っています。
- 東京にお住まいの方 → 自由が丘校、中野校
- 大阪にお住まいの方 → 大阪南千里校
- 福岡にお住まいの方 → 福岡西新校
教室での無料体験レッスンをご希望の方は、こちらをご覧ください。
