Pivot川西もくもく会 6月 所感
学習内容を文字情報だけでなく感情も乗せて伝える
そうすると単なる今だけの「経験」を超えて、未来にも過去にも繋がる「体験」になる
ほたー おはようございます! こんにちは!
6月11日 Pivot川西 プログラミング部 もくもく会 #8に参加しました。
リンクを貼っておきますので興味のある方は確認いただければわかりやすくなります。
https://pivot-kawanishi.connpass.com/event/249618/
もくもく会に参加するのも3回目になりました。
初めて参加したとき、もくもく会へ参加する理由に下の1～3を挙げていました。今回、さらにもう一点追加します
- 今後の学習指針決め
- 外部のエンジニアと話す機会ができる
- 予定が空いていた
- 学習内容を文字情報だけでなく感情も乗せて伝える練習をする
自分は一時の流行に乗ったものよりいつまでも残り続けるものを作りたいと考えています。世間の流行が自分にとって「not for me」なものも多かったです。自分にとって興味を持っていないものを押し付けられるのは面倒ですが、逆に属人的なものを一方的に伝えて興味を持たれないのも苦い思い出になります。
魚戸ホタルは自分にとって未来を切り開く、セーフティーネットになる可能性がある存在と言えますが、属人的ともいえます。
自分が助かっているからといって他人にも助けになるわけではない、自前主義に陥らないようにする必要があります。興味を持ってもらうには「自分は誰よりも魚戸ホタルが好きなんだ」と感情を乗せて伝えることが大切です。
さて前置きはこれくらいにして今回のもくもく会で取り組んだ内容を書きだします。
ずばりFigmaでAndroidのフレームサイズを想定したプロトタイプ作成を行いました。
作成したアプリと発表を終えて
6月6日～10日に作成したデスクトップのフレームサイズを想定したプロトタイプを基に作成しました。デスクトップ版は長くなるので別記事を書きます。Figmaの共有リンクも一旦公開して別記事で再掲します。今週作った成果物です。
Androidを想定したフレームでデザインを作る前提条件にAndroidはデスクトップより横幅が狭くなることがあります。
デスクトップが880pxでAndroidが360pxになります。そのため横にスライドすると隠れていた内容が現れるカルーセルUIを採用するなど工夫が必要です。その工夫にもくもく会の大半の時間を費やし、ガワを作れたのは3つだけになりました。加えて全ての画面で文字サイズ拡大や1画面内で何ができるかの明確化などユーザビリティを向上させる必要があるため未完成です。
発表では「現状では文字やボタンが小さくわかりづらいことが改善点にある」と伝えました。ただ「感情が乗っていた発表になっていたか？」と聞かれますと満足に達しません。質問にも事実を返したにすぎず、もっとこんな機能が便利で面白いという感情を伝えたかったと感じています。
あとアプリ内で魚戸ホタルという名前が出ているのに彼の名前を出していなかったのも今回のアプリ作成の目的に反しており、もっと活き活きした存在にしようと思いました。
今回のアプリ作成の目的は5月に作成した魚戸ホタルのイメージ画像を動かすことで彼を静止画から動く生き物にしたかったためです。
反省点はたくさんあります。次に進もうといっても次は別のIT勉強会に参加しようと決めています。
別のIT勉強会
7月 Pivot川西 プログラミング部 もくもく会とは別のIT勉強会に参加しようと決めた理由は今回の参加者の一人であるamasさんの話を聞いて飛び込みたいと思ったためです。
彼は主にLaravelと呼ばれるPHPフレームワークを使ってアプリを作っています。
自分は仕事で主にCakePHPを使ってアプリの開発・保守を行っており、Laravelについては環境構築をして一覧・新規作成・編集・削除機能の作成を試したぐらいでアプリを作った経験はございません。
CakePHPの方が機能を実現するためにどこにどんな名前のファイルを置けばいいか縛りがあるため直感的な分かりやすさでは勝ります。何でもできるほど学習コストが高いとも言います。
話を聞く限り他にはSymfonyやZend framework、CakePHPを使った経験があり、生のPHPでアプリを作ることもできるそうです。PHP歴は10年以上あり幅広い情報を持っていると思いました。
彼は「CakePHPよりLaravelの方が話題にならなくなるかもしれない」と語っていましたが、自分は仕事以外の言語事情に詳しくなかったためピンときませんでした。
後で調べてみるとLaravelの最新版である9.xではLTS（Long Terms Support：長期サポート）をやめたことがわかりました。LTSが付くと公式がセキュリティなどのサポートする期間が長くなることを意味します。
彼は「PHPでLaravelを直撃する仕様変更があった」と語っていましたがおそらくLaravelの基盤であるSymfonyが2025年2月8日までPHP8.0をサポートしなくなることを意味すると考えました。1 2 3
さてそんな彼が自分に薦めてきたのが三宮のIT勉強会に参加することです。彼は他にも幾つものIT勉強会に参加したことがあり、最近はコロナ禍で大阪より三宮の方が多いと聞きました。
自分は現在このPivot川西のもくもく会のみの参加に留まっています。今月は「フタをあける」つまり今持っているものを活用するというのを標語にしましたので他の勉強会への参加より魚戸ホタルたちの活用に時間を掛けたいと考えていました。
他の場所に飛び込んでみる必要があるようです。加えて「明石市でCakePHPの勉強会の主催者になってはどうですか？」と勧められました。確かに明石近辺ではIT勉強会が開催されておらず不足しています。ただ「今の自分に主催者が務めるのか？」という念があります。
いつか自分も開催する側に回りたい、と想いつつ足りない魅力なんて幾らでも挙がります。特に冒頭にあげた学習内容に文字情報だけでなく感情を乗せること、これが上手くいくと人が共感して集まります。そう在ることを目指すように居続けます。
前途多難と思ってはタイムラグを経てその通りの現実が訪れます。軽く楽に入りましょう。そんな感じでいいよ 心配事は起きないよ いこか いこか いこっか
発表したアプリの工夫点
さて今回もくもく会で発表した作品について工夫点を説明します。
先に述べたようにFigmaでAndroidのフレームサイズを想定したプロトタイプ作成を行いました。発表したアプリの画面をスライダーにしましたので確認をお願いいたします。
今回ガワを作成できたのは選択画面、選択後の確認画面、「いいえ」ボタンを押した後の画面の3画面です。以下の3点を工夫しました。
- Androidの上下の固定バーを考慮したフレームを事前に作成した
- 選択画面でカルーセルUIを適用して横にスライドすると別の魚戸ホタルが現れるようにした。
- 「はい」「いいえ」ボタンにVariants機能を適用してマウスオーバーイベントで見た目が切り替わるようにした。
順番に説明します。
① Androidの上下の固定バーを考慮したフレーム
まず1点目は実際に複製できるAndroid UIを見て縦横のpaddingを決めたことです。リンク先はこちら
複製してAltキーを押し続けることでpaddingを確認すると左右16pxであることがわかりました。さらに上下のメニューバーの大きさが56pxであることがわかりました。
上記の仕様を踏まえて上下左右にpaddingを16pxとった位置にアプリの機能を配置するようにしました。デザインを移動させる際はShiftキーを押しながら矢印キーナッジを押すとナッジが効いて2回だけで16pxのpaddingを実現できます。また8pxのグリッドの枠線にはまっているか同時にチェックします。そうすることで一貫性のある美しいデザインになります。
② カルーセルUI適用
2点目はデスクトップのフレームでは横に並べるだけでよかったのですがAndroidのフレームでは狭すぎるのでカルーセルを適用して横スクロールを実現しました。
Bottlesフレームの中にビンが並んでおりAutoLayoutが適用されています。
さらにビン全体をThreeFamiliesフレームが囲んでおり、Androidのフレームでは横方向に飛び出してしまいます。
そこでAndoidのフレームにあった横幅のフレームを作成し、名前をThreeFamiliesScrollingBoxとしました。このフレームのPrototypeを開きOverflow Scrollingを「Horizontal scrolling（水平スクロール）」に設定しました。
すると横にスライドしたときにスクロールして右に並んだキャラクターを出現させることに成功しました。
ちなみにThreeFamiliesとは御三家という意味です。キャラクターはフシギダネ・ヒトカゲ・ゼニガメを基にした魚戸ホタルです。CLIP STUDIOから皮膚の色を変えてキャラクターを再現しました。かわいくなりましたねぇ～。元が25年以上長く愛されているポケモンなので益々元デザインの直感的な受け入れやすさ、愛くるしさを感じました。
③ Variants機能
FigmaのVariants機能は1グループのコンポーネントが管理しやすくなる機能です。実装した際にはこちらの記事が参考になりました。
まずコンポーネント側は下画像のように実装しました。
コンポーネントを2つ選択すると右メニューに「Combine as Variants」ボタンが表示されVariants機能を利用することができます。コンポーネントから作成されたインスタンスを2つ選択した場合はボタンが表示されないのでVariants機能が利用できません。
コンポーネントの名前に「/（スラッシュ）」をつけて区切るとPropertiesに追加されます。SmartConfirmButtonの後に/ Default、/ Hover / Yes、/ Hover / Noと名前を付けた3つのコンポーネントをVariants機能を適用してひとまとめにしています。そうするとインスタンスで呼び出すときに便利なんですよ。
インスタンス側では下動画のように実装しました。YesNoのスイッチを切り替えると「はい」「いいえ」ボタンの見た目が入れ替わり、StatusをHover→Defaultに切り替えると背景が白い状態になります。
便利ポイントはPrototypeで「はい」「いいえ」ボタンを選択してからInteractionsで「While hovering」「Change to」を選択すると簡単にマウスオーバーイベントを実装できる点です。
JavaScriptでもC#のFormsでもマウスオーバーイベントはございます。「こういう風に実装すればいいんだ」と目で確認できるので応用が効きます。エンジニアにも優しいなあ、と思いました。
工夫した点は以上になります。
課題点
課題点は以下の2点です。
- 文字サイズが小さくて見づらい
- 「はい」「いいえ」ボタンがテキストボックスの色と同化しており、画面を一目見たときに何をすればよいのかわかりづらい
正直使いづらいUIと言えます。UIが分かりづらいと良いUX（利用者の体験）をもたらすことはできないことがUIデザイン必携で書かれていました。1画面1機能、一目見たときに何をすればよいのか理解できるのが分かりやすいUIです。
例えばTwitterでは下の流れで分かりやすく投稿できます。
- 「ツイートする」ボタンを押すとダイアログ画面が表示され「いまどうしてる？」というプレースホルダが見えます
- プレースホルダをクリックすると入力アイコンになるので文字を入力すると「ツイートする」ボタンがグレー→水色に早変わりして投稿可能なことが目で分かります
- 一番左のアイコンをクリックするとフォルダが開くので画像や動画が投稿可能なことが分かります
- 文字数が140文字を超えると以降の文字に赤いハイライトがかかり「ツイートする」ボタンが水色→グレーに早変わりして投稿不可能なことが目で分かります
自分で分かりづらいと感じたら修正が必要です。自分で分かりやすいと思っても利用者からみると前提となる情報が必要で分かりづらい可能性があります。
当事者になると作るものがどんどん良くなる。お陰様で成長できましたと感じてありがたいですね。
最後に
自分で作った作品を発表するときは感情も伝えると実在感が増して聞き入るようになります。
感情の伝え方を学ぶには技術書より小説や漫画を優先して読んだ方がいいと感じました。「ペンギンの憂鬱」という本を4月に購入したのですが読了していないので読み進めようかなと思います。そういって色々やることできて先進まないんだから何かできたら自分を褒めよう、成長することが気持ちよくなって一人の時間に没入できる。
必要は発明の母 魚戸ホタルたちにとって必要なものを思いつき発明する。頭ピコピコ動かして楽しく創造する。一表現者として作品が持つ魅力・感情をこれからも伝えていきます。
あともくもく会後MALIMOに行きました。ごちそうさまでした。季節ものバイ貝、プリっとしていてコリコリ噛み応えがよく美味しかったです。トマトのおでんも今回頑張ったご褒美になりました。
食後に行ったせせらぎ公園で昆虫のホタルが放つ蛍光を見ることはできませんでした。しかし自分には大きなホタルが味方に居ます。彼をイカした感じに活かしたい。お洒落さとフラットさを併せ持つ生き物。いいじゃん！うぃ～～！
以上になります。
それでは最後まで読んでいただきありがとうございました。ほたー
