先日、使いやすいオープンデータを使ったサンプルとして作った「山梨県のオープンデータを使ったアプリ」は、デザインがいまいちでした。

デザインの良し悪しの正体は?
それは、自分に向けて作り手の伝えたい気持ちが伝わってくるかどうか。
なんだかいい加減に作っただけだなぁ感が、イケてない感となります。

そこで、デザイン性をアップする便利なツール「Bootstrap」を使ってみました。

before

特選やまなしの食 オープンデータ

after

特選!山梨グルメ
いい感じになりました!

プログラムはほとんど変わってません。いい感じのリンクボタンが付けられるので、説明と合わせて全部表示しています。(53行 src on GitHub)

<script type="module"> import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import { shuffle } from "https://code4sabae.github.io/js/shuffle.js"; window.onload = async () => { const csv = await CSV.fetch("https://code4sabae.github.io/yamanashinoshoku/yamanashinoshoku3.csv"); const data = CSV.toJSON(csv); console.log(data); const ss = []; shuffle(data); for (const d of data) { const [ no, url, imgurl, name, area, desc ] = [ d["No."], d["「食べられる・買えるお店」URL"], d["写真URL"], d["名称"], d["地域"], d["説明文"] ]; const html = ` <div class="card"> <img class="bd-placeholder-img card-img-top" width="100%" src="${imgurl}"> <div class="card-body"> <h5 class="card-title">${name}</h5> <p class="card-text">${desc}</p> ${url.length ? `<a href="${url}" class="btn btn-primary">食べられる・買えるお店</a>` : ""} </div> </div> `; ss.push(html); } main.innerHTML = ss.join(""); }; </script>

Bootstrapは、CSSを自分で書かなくていいのが便利。
HTMLのclass指定だけで間をとったり、色を変えたり、調整するのが簡単です!

一人ひとりの意識が大切、長期戦となりそうな新型コロナウイルス対策。日本の状況を把握するアプリをオープンソースで開発中。 オーバーシュート(爆発的感染)を招くかどうかの防衛ライン、厚生労働省によるオープンデータ、感染症病床の数と、現在患者数を都道府県別に見える形にしています。
COVID-19 JAPAN - 新型コロナウイルス対策ダッシュボード
ただ、見せ方や、仮定の仕方を含めて、手探り状態。誰にとってもベストなアプリは一朝一夕ではできませんが、ちょっとここが見にくい。もうすこし文字の大きさが小さく、または、大きく・・・など、デザインの変更は比較的簡単です。

CSSはじめのいっぽ - GitHub x 新型コロナウイルス対策ダッシュボード編

まずはGitHubアカウントを作ります。(参考「GitHubはじめのいっぽ」)
COVID-19 JAPANの最下部、クレジットにある src on GitHub を開きます。

こちら Code for Sabae で、オープンソースとして公開しているプログラムです。


右上「Fork」をクリック。先割れのフォーク、プログラムを自分用に枝分かれさせるイメージです。この段階では本体に影響しないのでご安心を!


GitHubの自分のアカウントへコピー中(Forking)


できました!メインのプログラム、index.html を開きましょう。


右上の鉛筆アイコン、エディットをクリック。


「<style>」から「</style>」までがCSS(カスケーディング スタイル シート)というHTMLの見た目を決めるコンピューター言語。 とりあえずテーマカラーを変更してみましょう。rgbで赤、緑、青の順に指定するか、16進法でシャープマークの後に6桁で指定するか、red とか色名で指定してもOKです。

-- で始まる項目は、自由に名前を付けられるCSSの変数。var(--main-color) などとして繰り返し使えて便利です。 background-color は、背景色。color は文字色を表します。「background-color css」などと、CSSと合わせていろいろ検索します。


とりあえず適当な色に変更したら、画面下の方の「Commit changes」ボタンをクリック。どう変更したかメモしておくと便利です。


続いて、変更したサイトを見るための準備。こちらは一度だけ行えばOK。画面上の方「Settings」をクリック


スクロールして、GitHub Pages という項目を見つけ、Source を master branch に変更します。


一度リロードがかかるので、もう一度 GitHub Pages という項目までスクロールすると、自分のアカウントで公開されたよ!とリンクがあるので、開いてみます。(反映されるまで1分ほどかかることがありますので、ちょっと間を置きリロードしてみましょう)


色、変わりました!(もうちょっといい色にすればよかった)


高解像度な4Kモニターではレイアウト崩れを起こしていたので、自宅テレビでCSSを調整。


「@media (max-aspect-ratio: 3/4)」を使って、縦長になった場合にフォントサイズを変更して、縦長でも見やすくなるようにしています。(参考、aspect-ratio - CSS: カスケーディングスタイルシート | MDN

GitHubは13才以上で利用可能。大人や、学生、高専生だけでなく、中学生でもOK!
Let's design!

福井のWeb関係の集まりWCAF(Web Creators Association Fukui)のVol.11「Design」に参加してきました。東京から講師として、ズルいデザインで有名な赤塚妙子さん、P4D(Programming for Designer)の代表の海老沢聡さんを招いての豪華なデザイナー向け勉強会。

デザインとは非常に幅広い言葉でもあって、広義のデザインにはものづくりの何もかもを含むため、当然プログラミングもその一部です。サービスの利用者が国籍を超え老若男女問わずどんどん広がる中、プログラマーとかデザイナーとか己の枠を勝手に決めていてはもったいない。利用者にいかに使ってもらうか追求し切るチームワークには、広く知識や技術を持つことが大切です。

海老沢さんP4D活動紹介に感銘受け、その福井版、P4D in FUKUIのCSEDWEEK中、12/12(木)夜の開催を決めました(開催場所未定、イベントはこちら)。

赤塚さんのズルいデザインのテクニック集は、目からうろこで。早速、このサイトのブログにまずは簡単にできるところだけ適応してみました。じっくり読みなおして、どんどんデザインしていきたくなります。


ズルいデザイン適応後 / after - メリハリ、行間、文字間調整、背景適応など


ズルいデザイン適応前 / before - いまいちだけどどこが悪いかわからなかった

交流会では、みんなで福井の味覚を囲みながら、デザイン&プログラミング話他でもりあがり、最後には福井のキラーコンテンツポーズで記念撮影。

福井のITシーン、ますますおもしろくなっていきそうです。
みなさま、例のコンテストは、こちら「オープンデータ・アプリコンテスト」です!
WCAF Vol.11「Design」 - Togetterまとめ

おまけ:こちら私の発表資料「DESIGN for FUKUI」です。

人間、見た目が9割とか言われますが、アプリも同じかもしれません。第一印象は非常に大事です。パッと見て、いいなっと思わなければそこまでです。よっぽど必要としている場合は別ですが。もちろん、スピード、機能性は大事ですが、まず使ってもらわないことには何も始まりません。

ということで、デザインに凝る実験をしてみます。まだ詰め切れていませんが、つつじバスモニター用にアイコンを創ってみました。


(アイコン CC BY fukuno.jig.jp)

このアイコンを使って、バージョンアップした鯖江市内を走る小学生無料の100円バスのリアルタイムな位置情報も見られる、鯖江つつじバスモニターver.3がこちらです。


「鯖江つつじバスモニターver.3」

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS