UX Yokohama より新年のご挨拶あけましておめでとうございます。UX Yokohama 代表の森山です。2025年が皆様にとって素晴らしい年になります事を心よりお祈りいたします。UX Yokohamaは感染症流行を期にオンラインに軸足を移し、昨年はオンラインならではの動き方が見えてきた一年でした。本年のUX Yokohama は、非IT分野におけるUXデザインの応用をテーマとした勉強会などを開催したいと考えております。UXデザインには、新たな気づきを得る力・豊かな体験を生む力・人の行動を促す力があります。この力を正しく使えば社会をよりよくすることも可能であると信じます。UXデザインの発展のため、UX Yokohama は今年も様々な活動を企画運営する予定です。2025年1月1日 UX Yokohama 代表 森山 明宏2024.12.31 23:00
オンラインホワイトボードmiroが使えない？確認すべき点３つUX Yokohamaではイベントのオンライン化に伴い、ツールとして「オンラインホワイトボードmiro」を使用しています。miroは模造紙と付箋紙を使ったワークショップをオンライン化する用途に非常に適しているツールですが、いくつか使いやすさに関わるトラブルも出ています。本稿ではよくあるトラブルと対策をご紹介します。ホワイトボードのサンプルまず確認のために以下のURLを開いてください。もしも既にmiroアプリがインストールされていればmiroアプリが起動します。そうでない場合はブラウザでmiroホワイトボードが表示されます。:https://miro.com/app/board/o9J_lOQKCwI=/2024.10.07 10:00
「テキスト校正くん」で読みやすい文章を書く読みやすい文章を作成するには｢校正｣が不可欠です。｢校正｣とは文章の誤字脱字や表記揺らぎを修正する作業のことです。事実関係の誤りの修正や不快表現の修正までを含めた作業は｢校閲｣と呼びます。当サイトでは以前に校正ツール「textlint」を紹介しましたが、グラフィカルなUIを持たないtextlintを非常に難解だと感じた方もいたと思います。本稿では、比較的導入容易な校正ツール「テキスト校正くん」をご紹介します。「テキスト校正くん」とはテキスト校正くんはウェブ制作会社ICSの提供する日本語用校正ツールです。Visual Studio Codeの拡張機能として配布されています。テキスト校正くんは無料で利用できます。 「テキスト校正くん」の主な機能主な機能は以下の通りです。校正ルール違反箇所の表示ファイルの更新時に校正ルール違反のチェックを行い、画面下端の問題パネルにルール違反内容を表示します。主なチェック項目は以下の通りです：「ですます」調と「である」調の混在ら抜き言葉二重否定同じ助詞の連続使用同じ接続詞の連続使用逆接の接続助詞「が」の連続使用全角と半角アルファベットの混在弱い日本語表現の利用（〜かもしれない）読点の数（1文に4つまで）ウェブの用語や名称の表記統一（Javascript→JavaScript、Github→GitHub等）漢字の閉じ方、開き方（下さい→ください、出来る→できる等） 校正ルール違反箇所の自動修正自動修正可能な校正ルール違反については、違反箇所にテキストカーソルを置いた状態でキーボードの[Alt] + [Enter] (MacOSの場合は[command] + [. ])を同時押しすると、校正ルール違反は自動的に修正されます。Visual Studio Codeのインストールテキスト校正くんはVisual Studio Codeの拡張機能として配布されています。テキスト校正くんを使うために、まずVisual Studio Codeを入手してください。インストール手順下記URLを開く https://code.visualstudio.com/download自分のPC環境に合わせたダウンロードボタンをクリックする(たとえばM1チップ搭載Macを使用しているなら[Apple Silicon]ボタンをクリックする)保存先を指定して[保存]ボタンをクリックする保存した.exeファイルまたは.zipファイルをダブルクリックするWindowsの場合はインストーラ画面の指示に従いインストールする、Macの場合は解凍されたアプリをApplicationフォルダに移動する日本語化手順Visual Studio Codeを起動するメニューより[view＞Command Pallete]を選ぶ検索文字列欄に｢Configure Display Language｣と入力する検索結果一覧より[Configure Display Language]をクリックするポップアップメニューより[Install additional langages]をクリックする画面左の選択肢一覧より[Japanese Language Pack for Visual Studio Code]をクリックする[Install]ボタンをクリックする画面右下の[Restart Now]ボタンをクリックして再起動する再起動後のUIが日本語になったことを確認する 「テキスト校正くん」のインストールVisual Studio Codeは、メモ帳(notepad.exe)と異なり、さまざまな拡張機能を追加インストールすることができます。以下の手順でテキスト校正くんを追加インストールしてください。インストール手順Visual Studio Codeを起動する左端ツールバーより[拡張機能]アイコンをクリックする検索入力欄に「テキスト校正くん」と入力する検索結果一覧より[テキスト校正くん]アイコンをクリックする[インストール]ボタンをクリックする画面右下の[再起動]ボタンをクリックして再起動する2024.08.19 05:52
だれでもできる超簡単ウェブサイト構築 MDwikiワークショップ自分のウェブサイトをつくりたい、でも難しそう、そうお考えではありませんか？昔のように難解なHTML知識を学ぶ必要がなくなったとはいえ、商業利用目的のウェブサイト構築ツールは非常に多機能であり、覚えなければならないことが多数あります。そんな時、あえて低機能のシンプルなWebサイト構築ツールを利用してみる、という方法があります。低機能ツールは覚えることが少なく「ウェブサイトをつくるとはどういうことか」を初心者が体験するには最適のツールです。この講座は、超簡単ウェブサイト構築ツール「MDwiki」の使い方を学ぶ1時間半の講座です。講師森山 明宏 (UX Yokohama代表)当日のスケジュール13:00 受付開始13:30 あいさつ、進行説明13:35 講義「MDwikiとは」14:00 ワーク「MDwikiで1時間でウェブサイトをつくる」15:00 終了開催概要日時 ： 2024/2/12(祝) 受付13:00 開催13:30～15:00会場 ： オンライン(Zoom)定員 ： 30人 (先着順) 対象 ：Webサイト構築に関心のある一般の方申込方法 ： Web申込https://peatix.com/event/4423778 よりお手続きをお願いします2024.01.14 10:00
静的サイトジェネレーター「HonKit」を試すUX YokohamaのウェブサイトはAmeba Ownd上で運営されていますが、Ameba Owndで採用しているCMS（コンテンツ・マネジメント・システム)は基本的にブログ用であり、技術文書のような長文のウェブコンテンツを掲載するのには向いていません。そのようなウェブコンテンツは一般に「wiki」と呼ばれるCMSを用いて運営されます。 : https://ja.wikipedia.org/wiki/ウィキ当サイトでは以前に、制作者視点での作りやすさに優れたツールとして「MDwiki」を紹介しましたが、ウェブコンテンツ読者の視点で見ると、MDwikiは他のCMSに比べ使いやすさに劣ります。本稿では技術文書のような長文のウェブコンテンツを簡単に作成するツールとして「HonKit」を紹介します。HonKitとはHonKitは、マークダウン記法で書かれたテキストデータをウェブコンテンツに変換するアプリケーションソフトウェアです。HTMLやJavaScriptを学ぶことなく、ページ送り戻しやサイト内検索などの豊富な機能を備えたウェブコンテンツを作成することができます。HonKitはWindows、Linux、UnixおよびMacOSで動作します。HonKitの特徴長所長所1：ウェブコンテンツを容易に作成できるHonKitではマークダウン記法で原稿を作成します。通常のウェブコンテンツの作成で用いるHTML/CSS記述言語に比べ、マークダウン記法は習得容易です。長所2：長文ウェブコンテンツに適しているHonKitは技術文書のような長文のウェブコンテンツ作成に適しています。ウェブコンテンツ読者の視点で見ても、他のCMSと同等かそれ以上の使いやすさを実現します。長所3：プラグインにより機能を追加できるHonKitはプラグインと呼ばれる仕組みにより機能を追加できます。たとえば数式やUML図などのマークダウン記法では表現できないコンテンツをプラグインによって実現できます。短所短所1：操作が難解であるHonKitは画面UIを持たないプログラムです。MacやWindowsのようなGUI(グラフィカルユーザーインターフェース)に慣れているユーザーにとっては非常に難解です。短所2：デザインの自由度が低いHonKitのUIデザインは技術文書のような長文を前提としています。企業ウェブサイトや個人のブログを作る用途にはHonKitは適していません。HonKitを利用しているサイトHonKit公式の説明資料はHonKitによって作成されています。: https://honkit.netlify.app/HonKitのインストール手順ここでは C:¥HonKitフォルダの中にHonKitをインストールする ことを前提にして説明を進めます。Node.jsのインストールNode.jsは、JavaScript言語で書かれたプログラムを動かすための基本プログラムです。HonKitのインストールおよび起動に必要です。手順Node.jsウェブサイトを開く: https://nodejs.org/画面左の｢Recommended For Most Users｣と書かれた方のボタンをクリックする(2023年11月現在のRecommendedはバージョン20.9.0)保存先を指定して「保存」ボタンをクリックする保存した.msiファイル(MacOSの場合は.pkgファイル)をダブルクリックするインストーラ画面の指示に従いインストールする作業完了HonKitのインストールHonKitは画面UIを持たないプログラムです。HonKitのインストールにはPowerShell (MacOSの場合はターミナル.app)を使用します。手順PowerShell (MacOSの場合はターミナル.app)を開くC:¥HonKitフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKitフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpm install honkit --save-devデスクトップに戻り、C:¥HonKitフォルダの中に以下のファイルフォルダが追加されていることを確認するC:¥HonKit├─ node_modules├─ package-lock.json└─ package.json作業完了コンテンツひな形のインストールHonKitでは、コンテンツひな形をカスタマイズしてウェブコンテンツを制作していきます。コンテンツひな形は、必ずHonKitをインストールしたフォルダかそのサブフォルダにインストールしてください。以下に、C:¥HonKitフォルダの中にnewbookフォルダをつくりそこにコンテンツひな形をインストールする手順を示します。手順PowerShell (MacOSの場合はターミナル.app)を開くC:¥HonKitフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKitフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpx honkit init ./newbookデスクトップに戻り、C:¥HonKit¥newbookフォルダが追加されていることを確認するC:¥HonKit├─ newbook│ ├─ SUMMARY.md│ └─ README.md├─ node_modules├─ package-lock.json└─ package.json作業完了 ウェブコンテンツの作成ここからは C:¥HonKitフォルダの中にHonKitがインストールされ、C:¥HonKit¥newbookフォルダに編集中のウェブコンテンツがあることを前提にして説明を進めます。HonKitの原稿データは、典型的には以下のように配置されます。原稿データはマークダウン記法で書かれたテキストファイル(拡張子.md)です。原稿データの配置例newbook├─ book.json ←なくても良い├─ GLOSSARY.md ←なくても良い├─ README.md├─ SUMMARY.md ←なくても良い├─ part1| ├─ README.md| └─ (contents)└─ part2├─ README.md└─ (contents)本文の作成HonKitの原稿データはマークダウン記法で書かれたテキストファイル(拡張子.md)です。HonKitで利用できるマークダウン構文についてはHonKitの公式資料(英文)を参照してください。: https://honkit.netlify.app/syntax/markdownNOTE後述するプレビュー機能を用いて、プレビュー中に原稿(拡張子.mdのテキスト)を修正し保存すると、リアルタイムでプレビューに反映されます。目次の作成HonKit画面左に表示されるウェブコンテンツ目次は、SUMMARY.mdの内容を表示しています。残念なことに、このSUMMARY.mdを自動生成する機能はHonKitにはありません。ユーザーが手作業でSUMMARY.mdにコンテンツ一覧の情報を書き込む必要があります。非常に面倒な作業です。よって本稿では後述するプラグインによってSUMMARY.mdを生成するものとし、ここでの詳細説明を省きます。記述例# Summary* [about this site](README.md) * [description](README.md#description) * [author](README.md#author)* [Part I](part1/README.md) * [title of document 1](part1/doc1.md) * [title of document 2](part1/doc2.md)* [Part II](part2/README.md) * [title of document 3](part2/doc3.md) * [title of document 4](part2/doc4.md) NOTESUMMARY.mdからリンクされていない原稿データ(拡張子.mdのテキストファイル)は、HonKitに無視されます。書誌情報の作成ウェブコンテンツの書誌情報(作者名、概要、等)はbook.jsonファイルに記述されます。書誌情報として記述可能な項目の詳細はHonKitの公式資料(英文)を参照してください。記述例 { "title":"ウェブコンテンツのタイトル", "description":"ウェブコンテンツの詳細説明", "author":"ウェブコンテンツの作者名", "language":"ja", "styles": { "website": "styles/website.css" }, "plugins":[ "intopic-toc", "back-to-top-button" ]} NOTEbook.jsonファイルにはウェブコンテンツの書誌情報だけでなく、ウェブコンテンツで使用するカスタムCSSファイルやプラグインも記述されます。 jsonファイルは記述ルールに厳密に従う必要があります。わずかでも間違えるとウェブコンテンツのプレビューやビルドはできません。特にカンマの打ち間違いに注意してください。 配色やレイアウトの変更 テーマプラグインを使う後述するプラグインによって配色やレイアウト等を変更できます。ただしサンプル画像なしに配布されているテーマプラグインが多く、見た目の確認が面倒です。本稿では詳細説明を省きます。 CSSを使う一般的なウェブサイトと同様、CSSファイルに書かれている設定を書き換えることで配色やレイアウト等を変更できます。CSS記述言語の詳細については本稿では詳細説明を省きます。 手順 C:¥HonKit¥newbook¥stylesフォルダを作成するC:¥HonKit¥newbook¥stylesフォルダの中にwebsite.cssというファイル名のテキストファイルを作成するCSS記述言語を用いて配色やレイアウト等に関する設定を記述するbook.jsonのstyles欄に"website": "styles/website.css"と追記し、保存する。styles欄が無ければ欄ごと追記する作業完了記述例{ "title":"ウェブコンテンツのタイトル", "description":"ウェブコンテンツの詳細説明", "author":"ウェブコンテンツの作者名", "language":"ja", "styles": { "website": "styles/website.css" }, "plugins":[ "intopic-toc", "back-to-top-button" ]}NOTEbook.jsonファイルにはウェブコンテンツの書誌情報だけでなく、ウェブコンテンツで使用するカスタムCSSファイルやプラグインも記述されます。jsonファイルは記述ルールに厳密に従う必要があります。わずかでも間違えるとウェブコンテンツのプレビューやビルドはできません。特にカンマの打ち間違いに注意してください。プレビューとビルドプレビューHonKitには簡易ウェブサーバー機能が搭載されています。コンテンツをサーバーにアップロードしなくても、ウェブブラウザでの見栄えを確認することができます。手順PowerShell (MacOSの場合はターミナル.app)を開くC:¥HonKit¥newbookフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKit¥newboookフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpx honkit serveウェブブラウザを起動してhttp://localhost:4000を開き、コンテンツがプレビュー表示されることを確認するPowerShellに戻り、キーボードの[control]と[C]を同時押ししてプレビュー表示を終了する作業完了NOTEプレビュー中に原稿(拡張子.mdのテキスト)を修正し保存すると、リアルタイムでプレビューに反映されます。ビルドプレビュー機能で表示されるウェブコンテンツは、HonKitのシステムが原稿(拡張子.mdのテキスト)を一時的に変換して表示しているものです。「ビルド」コマンドを用いて原稿を完全なウェブコンテンツとして出力します。手順PowerShell (MacOSの場合はターミナル.app)を開もしもプレビュー中であるならプレビュー表示を終了するC:¥HonKit¥newbookフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKit¥newboookフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpx honkit build デスクトップに戻り、C:¥HonKit¥newbook¥_bookフォルダが追加されていることを確認するC:¥HonKit├─ newbook│ │ └─ _book│ │ ├─ index.html│ │ └─ (other contents)│ └─ (other contents)├─ node_modules├─ package-lock.json└─ package.json作業完了NOTEC:¥HonKit¥newbook¥_bookフォルダの中にあるファイルフォルダ一式をそのままウェブサーバーにアップロードすればウェブサイトは公開されます。位置関係やファイル名は変更しないでください。 プラグインHonKitには「プラグイン」と呼ばれる機能を追加する仕組みがあります。多数のHonKit用プラグインが配布されている他、HonKitと互換性のあるアプリ「Gitbook」用のプラグインも利用可能です。プラグインを使うには「インストールコマンドの実行」または「.jsonファイルの修正」が必要になります。以下に２つのプラグイン「gitbook-plugin-intopic-toc」「gitbook-plugin-back-to-top-button」をHonKitに追加する手順を説明します。なお、ここでは C:¥HonKitフォルダの中にHonKitがインストールされ、C:¥HonKit¥newbookフォルダに編集中のウェブコンテンツがあることを前提にして説明を進めます。プラグインの検索正しい名前のわからないプラグインを入手したい場合、以下のウェブサイトで、入手可能なHonKitプラグインを検索できます。ウェブサイト画面上端の検索欄にgitbook-pluginまたはhonkit-plugin と入力して検索してください。: https://www.npmjs.com/NOTE独自のインストールコマンドの用意されたプラグインがあります。その場合は後述するpackage.jsonの修正は不要で、book.jsonだけを修正することになります。npmjs.comの各プラグイン紹介ページの記述を確認してください。.jsonファイルの修正package.jsonC:¥HonKit¥package.json(アプリ設定ファイル)のdependencies欄に、追加したいプラグインの名前とバージョンを追記して保存します。記述例{ "devDependencies": { "honkit": "^5.1.1" }, "dependencies": { "gitbook-plugin-intopic-toc": "^1.1.1", "gitbook-plugin-back-to-top-button": "^0.1.4" }}NOTE jsonファイルは記述ルールに厳密に従う必要があります。わずかでも間違えるとウェブコンテンツのプレビューやビルドはできません。特にカンマの打ち間違いに注意してください。独自のインストールコマンドの用意されたプラグインがあります。その場合はpackage.jsonの修正は不要で、book.jsonだけを修正することになります。npmjs.comの各プラグイン紹介ページの記述を確認してください。book.jsonC:¥HonKit¥newbook¥book.json(コンテンツ設定ファイル)のplugins欄に、追加したいプラグインの名前を追記します。記述例{ "title":"ウェブコンテンツのタイトル", "description":"ウェブコンテンツの詳細説明", "author":"ウェブコンテンツの作者名", "language":"ja", "styles": { "website": "styles/website.css" }, "plugins":[ "intopic-toc", "back-to-top-button" ]}NOTEjsonファイルは記述ルールに厳密に従う必要があります。わずかでも間違えるとウェブコンテンツのプレビューやビルドはできません。特にカンマの打ち間違いに注意してください。 プラグインのインストールpackage.jsonおよびbook.jsonの修正が完了したら、プラグインのインストールを行います。 手順PowerShell (MacOSの場合はターミナル.app)を開くC:¥HonKitフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKitフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpm update作業完了NOTE独自のインストールコマンドの用意されたプラグインがあります。その場合はnpm update コマンドではなくプラグイン毎に用意されたインストールコマンドを使ってインストールしてください。 プラグインの設定プラグインによっては設定が必要になる場合があります。設定はbook.jsonへの記述によって行われます。具体的な設定方法については、先ほど紹介した https://www.npmjs.com/ の各プラグインの説明ページにて確認してください。 動作確認プラグインが正しく追加されたことの確認のため、前述したプレビュー機能を用いてウェブコンテンツをプレビューしてください。 SUMMARY.mdの自動生成HonKit画面左に表示されるウェブコンテンツ目次は、SUMMARY.mdの内容を表示しています。残念なことに、このSUMMARY.mdを自動生成する機能はHonKitにはありません。ユーザーが手作業でSUMMARY.mdにコンテンツ一覧の情報を書き込む必要があります。非常に面倒な作業です。SUMMARY.mdを簡単につくる方法として「gitbook-plugin-auto-summary」を紹介します。なお、ここでは C:¥HonKitフォルダの中にHonKitがインストールされ、C:¥HonKit¥newbookフォルダに編集中のウェブコンテンツがある ことを前提にして説明を進めます。 「gitbook-plugin-auto-summary」とは「gitbook-plugin-auto-summary」(以後 auto-summary と略す)は、原稿データからSUMMARY.mdを自動生成するプラグインです。HonKitのプレビューコマンド実行時にSUMMARY.mdの内容が書き換えられます。: https://www.npmjs.com/package/gitbook-plugin-auto-summary 注意事項auto-summaryにはやや癖があり、C:¥HonKit¥newbookフォルダ直下にある原稿データをREADME.md以外無視します。あらかじめ、README.md以外の原稿データを C:¥HonKit¥newbookフォルダのサブフォルダに (たとえば C:¥HonKit¥newbook¥docフォルダなどに) 移動してください。 インストールauto-summaryには独自のインストールコマンドが用意されています。手順PowerShell (MacOSの場合はターミナル.app)を開くC:¥HonKitフォルダを作業ディレクトリとして指定する- PowerShellに｢cd ｣(シー、ディー、半角空白)と文字入力する- デスクトップに戻り、C:¥HonKitフォルダをPowerShell画面内にドラッグアンドドロップする- PowerShellに戻りキーボードの[Enter]を押すPowerShellに以下のコマンドを入力し、キーボードの[Enter]を押すnpm i gitbook-plugin-auto-summary作業完了設定C:¥HonKit¥newbook¥book.json(コンテンツ設定ファイル)のplugins欄に、"auto-summary" と追記してください。さらに、 C:¥HonKit¥newbook¥book.jsonのpluginsConfig欄に、"auto-summary": {"parts": {"README.md": ""}} と追記してください。記述例{ "title":"ウェブコンテンツのタイトル", "description":"ウェブコンテンツの詳細説明", "author":"ウェブコンテンツの作者名", "language":"ja", "styles": { "website": "styles/website.css" }, "plugins":[ "intopic-toc", "back-to-top-button", "auto-summary" ], "pluginsConfig": { "auto-summary": { "parts": { "README.md": "" } } }}NOTEauto-summaryのその他の設定項目については、npmjs.comのauto-summary紹介ページを確認してください。本稿では詳細説明を省きます。: https://www.npmjs.com/package/gitbook-plugin-auto-summary実行SUMMARY.mdの書き換えは、HonKitのプレビューコマンド npx honkit serve 実行時に合わせて行われます。 NOTE書き換えには成功したのにプレビューにSUMMARY.mdの書き換えが反映されていない場合は、いったんプレビューを終了し再度プレビューを実行してください。 試験運用中ですさっそくUX YokohamaでもStarServerFree上にHonKitを設置してみました。HonKitで作成したウェブコンテンツがどのような見栄えになるか、是非ご確認ください。: http://uxyokohama.starfree.jp/honkit/以上2023.11.15 11:00
「シカケ～したくなるデザイン～」アイデアワークショップ【11/3オンライン】押してダメなら引いてみな !? 人の行動変化を誘発するシンプルな工夫「シカケ」を考えるアイデアワークショップを2021/11/3(文化の日)13時30分よりオンラインで開催します。このイベントについて2009年にフォルクスワーゲン社は「the fun theory」キャンペーンと銘打ち興味深い動画を発表しました。とある地下鉄のホームから地上に向かう階段は、すぐ隣にエスカレータがあるため誰も使おうとしません。その階段を、踏板を踏むとピアノの音が鳴るように改造しさらに踏板をピアノの鍵盤のように塗装したところ、通行人の66％が階段を使うようになったのです。踏むとピアノの音がする「登りたくなる」階段、ゴールポストの形をした「入れたくなる」ゴミ箱、駅のホームの床に引かれた「並びたくなる」線、…このような人の行動変化を誘発するシンプルな工夫を「シカケ」といいます。このイベントは、大阪大学大学院経済学研究科教授の松村真宏氏の提唱する「仕掛学」の理論を元に、私たちの身近なテーマである「エコ活動」を誘発するシカケを考えるアイデアワークショップです。技術者、デザイナー、学生、および社会課題解決に関心のある市民の皆様の参加を心よりお待ち申し上げます。シカケとはシカケとは「問題解決につながる行動を誘発するきっかけとなり得るもので、且つ "シカケの3要件" を含むもの」を指す概念です。仕掛学とはシカケを研究する学問です。シカケの概念は、大阪大学大学院教授の松村真宏氏により2015年に論文発表され、2016年に書籍化（http://amzn.asia/btX0PiF）されました。 UXデザインとはUXデザインとは、まずユーザーに提供したい体験を定め、その手段として製品やサービスを設計するものづくりの方法論です。UXの正確な定義は国際規格ISO9241-210:2010によって規格化されています。こんな方を対象としていますIT技術者、UI/UXデザイナー、理系学生、および社会課題解決に関心のある一般の方期待できる成果シカケ、およびデザインによる行動誘発の手法に関する基礎的な知識を得ることができる家庭でできるエコ活動について知ることができる参加当日のご注意本イベントはオンラインで開催します。仮想会議室URLは事前にご連絡します。オンラインツールとしてZoomおよびmiroを使用しますがZoomおよびmiroのアカウントは不要です。後半のグループワークに参加するためにマイクとウェブカメラの付いたパソコンが必要です。最少催行人数は4人です。最少催行人数に満たない場合、講座は中止となります。中止の際は事前にご連絡します。プログラムは予告なく変更される場合があります。イベント当日の参加者成果物は、開催報告としてWebサイト等に掲載させていただきます。オンラインホワイトボードmiroに関するご注意「自分のネットワーク環境からオンラインホワイトボードmiroの閲覧や編集ができない」というご意見を数件いただいております。主な原因として（１）企業内LANのネットワークセキュリティ設定により遮断されている（２）操作方法が特異であるため閲覧編集できないように思える、が挙げられます。 よくあるトラブルと対処方法については、以下の記事を参照してください。https://uxyokohama.amebaownd.com/posts/21899617当日のスケジュール13:00 受付開始13:30 開始・あいさつ13:35 講義「シカケ～したくなるデザイン～」14:30 講義「地球温暖化と家庭でできるエコ活動」15:00 ワークショップ「エコ活動したくなるシカケを考えよう」16:20 まとめとふりかえり16:30 ワークショップ終了司会進行役司会：森山 明宏 (UX Yokohama 代表、UXデザイナー)略歴：国立信州大学理学部物理学科を卒業後、家電メーカーで商品企画、OA機器メーカーでユーザビリティを担当し、2012年にユーリカ株式会社を設立し現在に至る。UXデザインの普及を目指し、主にWebサイトの改善や人材教育の分野で活躍する。2018年より岩崎学園情報科学専門学校非常勤講師。最近の関心事は「善隣的デザイン」(UXデザインによる社会課題解決)。twitter：https://twitter.com/hiro_ux主催者主催団体：UX Yokohama（ゆーえっくすよこはま）団体概要：UX Yokohamaは、主に横浜市中区および西区でUXデザインの勉強会を開催する任意団体です。UXデザインに関する啓発、研究、実践、および交流を行うことを目的としています。公式サイト：https://uxyokohama.amebaownd.com支払に関するご注意参加費：無料参加者数の把握のため、申込手続きは必ずしていただけますようお願いします。キャンセル受付の期限はチケット販売期限と同一です。キャンセルされる場合は、予約と決済を代行するPeatix様の定める所定の手続きに従ってください。開催概要開催名称：「シカケ～したくなるデザイン～」アイデアワークショップ【11/3オンライン】日 時：2021年11月3日（文化の日）受付開始13:00 開催13:30～16:30会 場：オンライン必要機材：オンラインツールとしてZoomおよびmiroを使用しますがZoomおよびmiroのアカウントは不要です。後半のグループワークに参加するためにマイクとウェブカメラの付いたパソコンが必要です。進 行 役：森山 明宏 (UX Yokohama 代表、UXデザイナー)定員人数：30名 (先着順)対 象：IT技術者、UI/UXデザイナー、理系学生、および社会課題解決に関心のある一般の方申込方法https://peatix.com/event/3422776 よりお手続きをお願いします2023.10.01 10:00
適格請求書等保存方式(インボイス制度)対応に関するお知らせ令和5年(2023年)10月1日より開始される適格請求書等保存方式(インボイス制度)について、検討を重ねました結果、UX Yokohamaはインボイス事業者登録を行わないものとする結論に至りましたこと、ここにお知らせ申し上げます。インボイス発行のご依頼は対応できません。悪しからずご了承願います。なおインボイス制度に関するご不明点は管轄税務署までお問合せ下さい。ご理解の程よろしくお願い申し上げます。2023年9月1日UX Yokohama 代表 森山明宏2023.08.31 23:00
「音声をすべてのブレイクアウトルームに配信する」機能でZoomミーティングを効率的に進めるオンラインミーティングサービス「Zoom」に、2022年8月より、新機能「音声をすべてのブレイクアウトルームに配信する」が追加されました。これまで、Zoomミーティング参加者がブレイクアウトルームに参加すると他のルームの参加者の声は聞こえなくなりました。議論に集中してもらうための仕様ですが、学校の授業をオンラインで行う場合には不都合な機能です。先生の声は常に生徒全員に届かなければなりません。先生がいちいちすべてのブレイクアウトルームを巡って同じ説明を繰り返すのは非効率的です。しかし「音声をすべてのブレイクアウトルームに配信する」機能があれば不都合は解消されます。先生(ミーティングのホスト役)の音声をすべてのブレイクアウトルームに配信することができます。Zoomアプリ最新版を入手するこの便利な機能を使うにはミーティング参加者全員が最新版のZoomアプリを使用する必要があります。2022年8月より前のバージョンでは「音声をすべてのブレイクアウトルームに配信する」機能で配信される音声を聞くことができません。Zoomアプリを最新版にアップデートする方法は以下の通りです。Zoomアプリを起動する画面右上端にある自分のプロフィール写真をクリックするポップアップされたメニューから[更新を確認] をクリックする自動的にアップデート処理が始まる。処理が終了したら[完了]ボタンをクリックするブレイクアウトルームを開くブレイクアウトルーム機能の使い方に変更はありません。ミーティングのホスト役はブレイクアウトルームを設置し、各参加者の部屋の割り当てを決め、参加者に入室を催促することができます。ミーティングのホスト役が、Zoomミーティングを開催し、参加予定者全員がミーティングに参加していることを確認するミーティングのホスト役が、Zoomミーティング画面の下端にあるミーティングコントロールツールバーより、[ブレイクアウトルーム]ボタンをクリックするブレイクアウトルーム作成ダイアログで、開設したいブレイクアウトルームの数を指定する同じくブレイクアウトルーム作成ダイアログで、割り当て方法を指定する。グループが事前に決められている場合は＜手動で割り当てる＞を指定する[作成]ボタンをクリックする参加者割り当て設定ダイアログで、各ルームの名前の書かれた列の右端にある[割り当て]をクリックするポップアップされたメニューで、そのルームに割り当てたい参加者にチェックマークを入れるすべてのルームに対して割り当てを設定したら、[全てのルームを開ける]ボタンをクリックするブレイクアウトルームが開かれると、参加者の画面に入室を促すメッセージダイアログが表示される。参加者は、ダイアログ上の[参加]ボタンをクリックすることでブレイクアウトルームに入室できる。ミーティングコントロールバーが表示されていない時は？Zoomアプリは、キーボードショートカットによってミーティングコントロールバーを非表示にすることができます。意図せずキーを押してしまい、元に戻せず困っている人もいるでしょう。以下の手順で表示させることができます。Windows版アプリの場合ミーティングコントロールバーが消えている場合は「Alt」キーを押せば元に戻ります。画面共有中のフローティングコントロールが消えている場合は「esc」キーを押せば元に戻ります。Mac版アプリの場合ミーティングコントロールバーが消えている場合は「Ctrl+]」キーを同時押(USキーボードならば「Ctrl+/」キー同時押)すれば元に戻ります。画面共有中のフローティングコントロールが消えている場合は「Ctrl+Option+Command+H」キーを同時押すれば元に戻ります。音声をすべてのブレイクアウトルームに配信する「B」キー押しで配信ミーティングのホスト役は、自分の声をすべてのブレイクアウトルームに配信することができます。配信するには、「ブレイクアウトルーム進行中」ダイアログの表示されている状態でキーボードの「B」キーを押し続けてください。押している間はホスト役の声がすべてのブレイクアウトルームに配信されます。「B」キー押し以外の方法また、以下の手順でもホスト役の声をすべてのブレイクアウトルームに配信することができます。前述ブレイクアウトルームを開く手順の8までを実行する「ブレイクアウトルーム進行中」ダイアログの表示されていることを確認するダイアログ下端の[ブロードキャスト]ボタンをクリックするポップアップしたメニューより[音声を配信]をクリックする再生ボタン(三角マークのボタン)をクリックすると配信が始まる配信されている状態で停止ボタン(四角マークのボタン)をクリックすると配信が止まる2023.02.17 04:00
UX Yokohama より新年のご挨拶あけましておめでとうございます。UX Yokohama 代表の森山です。2023年が皆様にとって素晴らしい年になります事を心よりお祈りいたします。昨年もまた、世界規模の感染症の流行が収まらず充分に活動のできない年でした。オンラインに軸足を移しての活動となりましたが、まだ充分とはいえない一年でした。本年のUX Yokohama は、昨年に引き続き、イベント・ブログ・等既存の情報発信の枠にとらわれない、多様な情報発信（書籍、Youtubeビデオ等）にチャレンジいたします。UXデザインには、新たな気づきを得る力・豊かな体験を生む力・人の行動を促す力があります。この力を正しく使えば社会をよりよくすることも可能であると信じます。UXデザインの発展のため、UX Yokohama は今年も様々な活動を企画運営する予定です。2023年1月1日 UX Yokohama 代表 森山 明宏2022.12.31 23:00
誰のためのLEDランプ？私事ですが先日旅行中に印象的な出来事がありました。全席指定の特急列車に乗り込んだところ、すでに誰かが私の予約した指定席に座っていました。先客氏に「席をお間違えではないですか？」と尋ねたところ「ここは空席のはずである、指定席券を買うため車掌を待っている」という予想外の答えが返ってきました。 結論としては私が正しかったのですが、なぜ先客氏は空席だと誤解したのでしょう？しばらくの思案の後、どうやら特急車両に備え付けられた空席表示LEDランプが原因だろうと思い至りました。 最新型の特急車両には空席表示LEDランプが備わっており、予約済席には「緑」、空席には「赤」のLEDが点灯することになっています。一般的に「緑＝肯定を意味する色」「赤＝否定を意味する色」です。では空席表示LEDランプの緑点灯は「誰」に「何」を肯定しているのでしょうか？そもそも空席表示LEDランプは「とりあえず乗車して車内で車掌から指定席券を買うつもりの、未予約客」のために設置されたもののはずです。予約済客はLEDランプなど無くとも指定席券があるのですから。未予約客からすれば「緑＝未予約客が座っても良い席」「赤＝未予約客が座ってはいけない席」だと錯誤するのは当然のように思えます。空席表示LEDランプは「緑＝未予約客に、着席を肯定する色」として設計すべきでした。些細なことではありますが不愉快なユーザー体験であることは間違いありません。今からでも遅くないので改善を望みます。(森山)中央線特急に新たな着席サービスを導入します｜JR東日本:https://www.jreast.co.jp/press/2018/20181019.pdf2022.11.01 10:00
そのデザインは本当に「常識」か？皆さんは立ち食い蕎麦屋に入ったことはありますでしょうか？店の中の様子を思い出していただきたいのですが、ほとんどの蕎麦屋さんは詳しい商品情報を店内に掲示していません。「たぬきそば」「きつねそば」等々、商品名称の書かれた札が壁に並ぶだけです。聞いた話ではイタリアのピザ屋さんも日本の蕎麦屋さん同様に「MARINARA(船乗り)」「BUFFALATA(水牛)」といった初見には意味不明な商品名称が並んでいるだけだそうです。デザインにおいては「誰もが知っていることは説明しなくても良い」という暗黙の了解があります。省略できる説明は省略する事で情報量を減らし、美観・機能性・操作性を兼ね備える事ができます。WindowsやMacのアプリの操作作法が皆似ているのも、似せておけば(UIデザインガイドラインに従っておけば)説明を省略できるという考え方によります。しかしながら、気をつけなければならない事がひとつあります。「デザイナーの常識とユーザーの常識は異なる」という点です。たとえば、私事ですが、以前にお蕎麦屋さんで「あられそば」を注文したら青柳の貝柱ではなくふやけたあられ餅の載った蕎麦が出てきて驚いた事があります。店側と私とであられそばについての常識が異なっていたわけです。スマホアプリや家電製品も同じです。デザイナーの常識とユーザーの常識が異なることに気づかないままデザインしてしまうと、とんでもなく使いづらい製品が出来上がることになります。このような失敗を防ぐための最良の方法が「ユーザーテスト」です。製品企画時に決めた想定対象顧客に協力してもらえれば最良ですが、身近にいる友達や会社の同僚に10分程度試作品を操作してもらい意見を聞くだけでもいいでしょう。デザイナーの常識とユーザーの常識は異なります。己の常識を過信せず、常にユーザーを中心に置いて考える心構えを持ってデザインに望みたいものです。 2022.10.02 10:00
ネコちゃんロボットのUXデザイン昨今、配膳ロボットを導入したファミリーレストランが増えました。ロボットとはいいますが要するに自律走行型配膳ワゴンです。ロボットに手足はなく、客が自分でワゴンの棚から料理を取ります。 人間の店員と比べて明らかに劣ったサービスしか提供できない配膳ロボットですが、不思議と不快感は覚えません。その理由は「猫型ロボットだから」だと考えます。 ロボット筐体上端には猫耳をイメージした突起があり、顔に相当する液晶パネルにはマンガ調のネコの顔が映っています。会話はできませんが可愛い声でアナウンスすることもできます。猫の持つ可愛らしさ・自由気ままさのイメージを借りる事で「猫だから仕方ない」と客に思わせる巧妙なデザインだと言えます。 物理的なロボット店員だけでなく画面を経由した接客にも同様の動きがあります。先日ローソンが、遠隔地にいる店員がアバター(キャラクター)の姿で接客する実験店舗を開業すると発表しました。遠隔接客はロボットとは別の形の接客省力化であり、アバターもまた外見状の工夫によって新しい接客形態を社会に受容してもらおうとする試みと考えられます。 高齢化と人口減少の進む現代日本でロボットが社会に受容されるために、「ロボットの可愛らしさの演出」はUXデザインの重要なテーマになり得ると考えます。今後の進展に期待します。 「ガスト」「しゃぶ葉」1,000 店以上にロボット導入｜すかいらーくグループ: https://www.skylark.co.jp/company/news/press_release/pk637h000006gkn3-att/211018_Robot_at_Gusto_Syabuyo.pdfローソン×AVITA アバター活用で協業開始！｜ローソン: https://www.lawson.co.jp/lab/tsuushin/art/1458363_4659.html2022.10.01 10:00