Yoshitaka

Yoshitaka

UI/UXの学びメモ3

HCD（Human Centered Design）とは？HCDは「人間中心設計」と訳され、ユーザー（人間）を中心に置いてデザインを考える方法。従来のコスト重視から、ユーザー体験（UX）重視への意識の変化を表す。 ポイント： ユーザーの権利を優先 良い体験を提供することが目的 最近では、持続可能性も考慮する傾向 https://www.hcdnet.org/hcd/column/hcd-2130.html HCDプロセスは、ユーザーのニーズを中心に置いた設計プロセ

Yoshitaka

    • UI/UXの学びメモ2

      色彩日本と欧米の色彩感覚の違い 日本：鮮やかな色使い、色の対比で美しさを表現 欧米：トーンが落ち着いている、明暗差（彩度）で表現 文化的背景と色彩感覚 日本：高湿度、木造建築、豊富な自然光 欧米：低湿度、石造建築、比較的少ない自然光 地理的要因と色彩 緯度と光による色の見え方の変化 ブランドカラーの地域差 YahooやMerucariの例 色彩の基本理論色彩モデル RGB：Web用途 CMYK：印刷用途 HSB (HSV)：色相、彩度、明度 HSL

      Yoshitaka

      • UI/UXの学びメモ1

        プロダクト設計で最も優先しないといけないことは「一貫性を保つこと」アプリ外の一貫性について メガサービスと似てれば似ているほどユーザーは使いやすい 開発しているプロダクトに使っている時間は「ユーザーのプロダクト利用時間全体の数％以下」と考える アプリ横断で使う時に使いやすいかどうか 市民権を得ているUIはどんなUIなのかを考える 同じUIは同じ使い勝手で使う アプリ内の一貫性について 一貫性がないと誤操作につながりやすい どの画面も似たような画面になっている（

        Yoshitaka

        • パデルに出会ってからの5年間の振り返り

          初めてスペインでパデルを体験してから約5年が経ち、節目を感じたので簡単に振り返りを書きたいと思いました。 スペインで偶然パデルを知り、パデルにどハマりし、帰国してパデルコーチにチャレンジするまでを写真多めでざっくりまとめてみます。 パデルとの出会い（2018年末〜） パデルを知ったのは、2018年末にスペイン移住したことがきっかけでした。（スペインでは0歳児の息子の育児を専業でやっていました） 住むことになったマンションの住人用の設備としてパデルコートがありました。

          Yoshitaka

        UI/UXの学びメモ3

        Yoshitaka

          Human Interface Guidelinesを読んでみる〜コンポーネント/コンテンツ〜

          こちらの続きです コンポーネントを読んでいきます コンポーネント日々の業務ではコンポーネント化がうまくできずに困っているのでここはしっかり理解したいところです。 コンテンツ レイアウトと編成 メニューとアクション ナビゲーションと検索 表示 選択と入力 コンポーネントの内容は6つに分かれていましたが、それぞれさらに子テーマに分かれているので、まずはコンテンツから見ていきます。 コンテンツグラフ イメージビュー テキストビュー Webビュー 現在業務で開発しているア

          Yoshitaka

          Human Interface Guidelinesを読んでみる〜コンポーネント/コンテンツ〜

          Yoshitaka

          Human Interface Guidelinesを読んでみる〜基本要素〜

          何を読むのかhttps://developer.apple.com/jp/design/human-interface-guidelines こちらの日本語訳されたHuman Interface Guidelinesを読みます。 （日本語訳が登場したのは最近らしいです） なぜ読むのか日頃iOSエンジニアとして仕事をしていますが、デザイナーの方々とミーティングをする上で最低限のデザイン知識は必要だと感じることがありました。 Human Interface Guidelines

          Yoshitaka

          Human Interface Guidelinesを読んでみる〜基本要素〜

          Yoshitaka

          AWSざっくり理解しました

          ヒストリーAmazon社内のインフラ構築で都度構築だと無駄が多くなってきた->一括構築＆分割利用というスタイルを取ってできたのがAWSで、もともとは社内のツールだったそう インフラ構築の課題 -> 解決したことをサービスとして提供 AWSの90%以上のサービスは顧客の要求から生まれたものらしい サービスは200を超える Infrastracture24のリージョン、84アベーラビリティーゾーンがある 日本は東京リージョン・大阪リージョン リージョンは複数のアベイラ

          Yoshitaka

          AWSざっくり理解しました

          Yoshitaka

          .bubbleでGoogleログインを使う

          .bubbleでは標準でユーザ管理機能が作られておりますが、この機能（新規登録・ログイン）画面にGoogleログインの機能を足すことも簡単にできます。 PluginsにGoogleを追加してApp SecretとApp ID/API Keyを保存することで簡単に実装できますが、この2つのパラメータを取得するためにGoogle Cloud Platformに登録＆設定する必要があります まずはアカウントを作成し 新しいプロジェクトを作っていきます プロジェクトの作成が完

          Yoshitaka

          .bubbleでGoogleログインを使う

          Yoshitaka

          .bubble 無料プランでできること

          .bubbleの標準機能アプリケーションの公開(テスト版として) .bubbleのロゴがついてしまいます 公開するURLは、https://●●●. bubble .io / version-test/ のようなものになる データベースが使える 合計のレコード数に制限があり、無料プランでは200レコードまでつくれる 200レコードに達するとアプリ上でエラーになる 使用量は設定の(currently using ___ out of 200)の部分で確認できます Fig

          Yoshitaka

          .bubble 無料プランでできること

          Yoshitaka

          .bubbleでHTMLのvalueを取得する方法

          やりたいこと HTMLで作ったアイテムから値を取得する さっそくやっていきます🙌 まずはHTMLエレメントを配置します 目的のパーツをHTML書いておきます 今回はTimePickerにしました idに適当な値を入れます（あとで使います ①） 次にPluginを入れていきます JavaScriptを使うには『Toolbox』というプラグインをいれていきます Javascript to Bubbleというエレメントが使えるようになるので適当な位置に配置していきます

          Yoshitaka

          .bubbleでHTMLのvalueを取得する方法

          Yoshitaka

          .bubbleってどうなの(stateを理解する)

          👇のつづき bubbleではページやグループに状態を持たせることができますstateについてみていきます まずは左側の項目よりElements treeの最上位エレメントを選択します 最上位＝ページの編集画面が表示されます 編集画面の 「i」ボタンをクリックすると Element inspectorが表示され一番上にCustom statesの欄があります ここのAdd a new custom stateを選択します ここからstateを新規作成できます 名前とタイ

          Yoshitaka

          .bubbleってどうなの(stateを理解する)

          Yoshitaka

          .bubbleってどうなの(Workflowを使ってみる)

          👇のつづき 今回はワークフローをつかってみますまずはボタンをタップしたときの処理をワークフローで追加していきます 左側のタブからWorkflowを選択しても良いですが ここではボタンの編集画面よりStart/Edit workflowを選択していきます そうすると自動でWorkflowタブへ遷移するのでこちらより処理を追加していきます add an actionから希望の処理を選択していきます 選択画面はこんな感じでたくさんあります Accountではログイン処理など

          Yoshitaka

          .bubbleってどうなの(Workflowを使ってみる)

          Yoshitaka

          .bubbleってどうなの(Dataの管理と表示)

          👇のつづき bubbleのデータ管理についてみていきます左側のタブからDataを選択します デフォルトでUserというテーブルが存在しますが、bubbleではテーブルをData typeといいます Table = Data type Column = Field Row = Thing テーブルを追加する場合は、New typeにテーブル名を入れて新規作成します テーブルを新規追加すると、必ず4つのデフォルトカラムが含まれます 上部のタブからApp dataを選

          Yoshitaka

          .bubbleってどうなの(Dataの管理と表示)

          Yoshitaka

          .bubbleってどうなの(Groupの仕組み)

          👇のつづき 今回はbubbleのグループの仕組みをみていきますDesiginのUI Builderの一番上にElement treeというものがあり ここを開きます Only show hideableのチェックを外し表示します ＋マークを選択していくとエレメントの階層が確認できます この中ではたくさんのGroupが使われています GroupはUI Builderから追加できます 追加するとこんな感じ 編集画面はこれです 編集したい場合はremove style

          Yoshitaka

          .bubbleってどうなの(Groupの仕組み)

          Yoshitaka

          .bubbleってどうなの(Dynamic Dataとは)

          👇のつづき 今回はダイナミックデータの使い方をみていきます例えばTextの編集画面では、入力欄の横に青枠でInsert dynamic dataという表示がでています これを選択すると外部のデータを入れ込むことができるというものです 例えば、現在時刻を常に表示するTextをつくる場合、Current date/timeを設定することで実現できます デフォルト設定のままだとこのように表示されます すこし応用します InputとTextを追加します（Input の名前

          Yoshitaka

          .bubbleってどうなの(Dynamic Dataとは)

          Yoshitaka

          .bubbleってどうなの(アイコン・画像などの追加)

          👇のつづき DesingのUI Builderにて気になるパーツを追加していきますまずは、Iconを追加してみます 編集画面はこんな感じ たくさんのアイコンからお気に入りのものが選べます つぎに、Imageを追加してみます 編集画面はこんな感じ Static Image項目からUploadをすると .bubbleに保存されDynamic imageにURLが表示されます ちなみに保存されたデータはData のFile Managerタブから確認できます 続いて

          Yoshitaka

          .bubbleってどうなの(アイコン・画像などの追加)

          Yoshitaka