UX Yokohama

UXデザインをテーマにした横浜のIT勉強会サークルです。

記事一覧(209)

UX Yokohama より新年のご挨拶

あけましておめでとうございます。UX Yokohama 代表の森山です。2024年が皆様にとって素晴らしい年になります事を心よりお祈りいたします。  UX Yokohamaは感染症流行を期にオンラインに軸足を移し様々な試行錯誤をくりかえして来ましたが、なかなか満足のいく活動とまではいえないもどかしい一年でした。 本年のUX Yokohama は、生成AI等、新しい産業分野におけるUXデザインの実践をテーマとした勉強会などを開催したいと考えております。UXデザインには、新たな気づきを得る力・豊かな体験を生む力・人の行動を促す力があります。この力を正しく使えば社会をよりよくすることも可能であると信じます。UXデザインの発展のため、UX Yokohama は今年も様々な活動を企画運営する予定です。  2024年1月1日 UX Yokohama 代表 森山 明宏

静的サイトジェネレーター「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/以上

適格請求書等保存方式(インボイス制度)対応に関するお知らせ

令和5年(2023年)10月1日より開始される適格請求書等保存方式(インボイス制度)について、検討を重ねました結果、UX Yokohamaはインボイス事業者登録を行わないものとする結論に至りましたこと、ここにお知らせ申し上げます。インボイス発行のご依頼は対応できません。悪しからずご了承願います。なおインボイス制度に関するご不明点は管轄税務署までお問合せ下さい。ご理解の程よろしくお願い申し上げます。2023年9月1日UX Yokohama 代表 森山明宏

「音声をすべてのブレイクアウトルームに配信する」機能で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までを実行する「ブレイクアウトルーム進行中」ダイアログの表示されていることを確認するダイアログ下端の[ブロードキャスト]ボタンをクリックするポップアップしたメニューより[音声を配信]をクリックする再生ボタン(三角マークのボタン)をクリックすると配信が始まる配信されている状態で停止ボタン(四角マークのボタン)をクリックすると配信が止まる

UX Yokohama より新年のご挨拶

あけましておめでとうございます。UX Yokohama 代表の森山です。2023年が皆様にとって素晴らしい年になります事を心よりお祈りいたします。昨年もまた、世界規模の感染症の流行が収まらず充分に活動のできない年でした。オンラインに軸足を移しての活動となりましたが、まだ充分とはいえない一年でした。本年のUX Yokohama は、昨年に引き続き、イベント・ブログ・等既存の情報発信の枠にとらわれない、多様な情報発信（書籍、Youtubeビデオ等）にチャレンジいたします。UXデザインには、新たな気づきを得る力・豊かな体験を生む力・人の行動を促す力があります。この力を正しく使えば社会をよりよくすることも可能であると信じます。UXデザインの発展のため、UX Yokohama は今年も様々な活動を企画運営する予定です。2023年1月1日 UX Yokohama 代表 森山 明宏

誰のためのLEDランプ？

私事ですが先日旅行中に印象的な出来事がありました。全席指定の特急列車に乗り込んだところ、すでに誰かが私の予約した指定席に座っていました。先客氏に「席をお間違えではないですか？」と尋ねたところ「ここは空席のはずである、指定席券を買うため車掌を待っている」という予想外の答えが返ってきました。  結論としては私が正しかったのですが、なぜ先客氏は空席だと誤解したのでしょう？しばらくの思案の後、どうやら特急車両に備え付けられた空席表示LEDランプが原因だろうと思い至りました。  最新型の特急車両には空席表示LEDランプが備わっており、予約済席には「緑」、空席には「赤」のLEDが点灯することになっています。一般的に「緑＝肯定を意味する色」「赤＝否定を意味する色」です。では空席表示LEDランプの緑点灯は「誰」に「何」を肯定しているのでしょうか？そもそも空席表示LEDランプは「とりあえず乗車して車内で車掌から指定席券を買うつもりの、未予約客」のために設置されたもののはずです。予約済客はLEDランプなど無くとも指定席券があるのですから。未予約客からすれば「緑＝未予約客が座っても良い席」「赤＝未予約客が座ってはいけない席」だと錯誤するのは当然のように思えます。空席表示LEDランプは「緑＝未予約客に、着席を肯定する色」として設計すべきでした。些細なことではありますが不愉快なユーザー体験であることは間違いありません。今からでも遅くないので改善を望みます。(森山)中央線特急に新たな着席サービスを導入します｜JR東日本
:https://www.jreast.co.jp/press/2018/20181019.pdf

そのデザインは本当に「常識」か？

皆さんは立ち食い蕎麦屋に入ったことはありますでしょうか？店の中の様子を思い出していただきたいのですが、ほとんどの蕎麦屋さんは詳しい商品情報を店内に掲示していません。「たぬきそば」「きつねそば」等々、商品名称の書かれた札が壁に並ぶだけです。聞いた話ではイタリアのピザ屋さんも日本の蕎麦屋さん同様に「MARINARA(船乗り)」「BUFFALATA(水牛)」といった初見には意味不明な商品名称が並んでいるだけだそうです。デザインにおいては「誰もが知っていることは説明しなくても良い」という暗黙の了解があります。省略できる説明は省略する事で情報量を減らし、美観・機能性・操作性を兼ね備える事ができます。WindowsやMacのアプリの操作作法が皆似ているのも、似せておけば(UIデザインガイドラインに従っておけば)説明を省略できるという考え方によります。しかしながら、気をつけなければならない事がひとつあります。「デザイナーの常識とユーザーの常識は異なる」という点です。たとえば、私事ですが、以前にお蕎麦屋さんで「あられそば」を注文したら青柳の貝柱ではなくふやけたあられ餅の載った蕎麦が出てきて驚いた事があります。店側と私とであられそばについての常識が異なっていたわけです。スマホアプリや家電製品も同じです。デザイナーの常識とユーザーの常識が異なることに気づかないままデザインしてしまうと、とんでもなく使いづらい製品が出来上がることになります。このような失敗を防ぐための最良の方法が「ユーザーテスト」です。製品企画時に決めた想定対象顧客に協力してもらえれば最良ですが、身近にいる友達や会社の同僚に10分程度試作品を操作してもらい意見を聞くだけでもいいでしょう。デザイナーの常識とユーザーの常識は異なります。己の常識を過信せず、常にユーザーを中心に置いて考える心構えを持ってデザインに望みたいものです。 

ネコちゃんロボットの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.html

vscode-textlintで読みやすい文章を書く

読みやすい文章を作成するには｢校正｣が不可欠です。｢校正｣とは文章の誤字脱字や表記揺らぎを修正する作業のことです。事実関係の誤りの修正や不快表現の修正までを含めた作業は｢校閲｣と呼びます。マイクロソフトWordの校閲機能が最も普及していますが、Wordではなく軽量のテキストエディタを使って長文を書きたい人もいます。そのような人には｢vscode-textlint｣がおすすめです。vscode-textlintとは｢vscode-textlint｣は、Visual Studio Codeに校正機能を追加する拡張機能です。Visual Studio Codeはマイクロソフト社製のテキストエディタです。Visual Studio Code、vscode-textlint、どちらも無料です。Windows版とMac版が用意されています。vscode-textlintの主な機能主な機能は以下の通りです。校正ルール違反箇所の表示文章に対して、校正ルール違反箇所を赤線で表示し、マウスカーソルを重ねると、どのようなルール違反であるかの解説がポップアップ表示されます。指摘箇所を修正してファイルを保存すると、ふたたび校正ルール違反のチェックが行われます。校正ルール違反箇所の自動修正自動修正可能な校正ルール違反については、違反箇所にテキストカーソルを置いた状態でキーボードの[Alt] + [Enter] (MacOSの場合は[command] + [. ])を同時押しすると、校正ルール違反は自動的に修正されます。vscode-textlintの必要構成ここから非常に難解な話になります。vscode-textlintは単体では動作しません。使うには以下の要素を以下の手順に従って揃える必要があります。Node.jsとnpmのインストールtextlintのインストールルールプリセットのインストールVisual Studio CodeのインストールVisual Studio Codeの日本語化vscode-textlintのインストール Node.jsとはNode.jsは、JavaScript言語で書かれたプログラムを動かすための基本プログラムです。textlintはJavaScript言語で書かれており、textlintを動作させるには、まずNode.jsをインストールする必要があります。npmとはNode.jsに同梱されているパッケージ管理ツールです。パッケージ管理ツールは、WindowsやMacOSアプリにおけるインストーラに相当します。近代的なコンピュータプログラムは複数のソフトウエア部品を組み合わせた構造であり、そのような構造であることを強調するためにプログラムのことをパッケージと呼びます。textlintとはtextlintは、画面UIを持たない文書校正プログラムです。通常はコマンドプロンプト(MacOSの場合はターミナル.app)を使って操作します。Visual Studio Codeとtextlintはそれぞれ独立した別のアプリですが、vscode-textlintにより、textlintの機能をVisual Studio Codeに組み込むことができます。ルールプリセットとはルールプリセットとは、textlintで用いる校正ルールのうち多用されるルールをまとめたものです。｢語尾をですますで統一する｣｢二重否定表現は使わない｣などです。詳細にルールを設定することも可能ですが、初心者はルールプリセットを使った方が無難です。Visual Studio CodeとはVisual Studio Codeはマイクロソフト社製のテキストエディタです。メモ帳(notepad.exe)と異なり、さまざまな拡張機能を追加インストールすることができます。vscode-textlintとは先ほどvscode-textlintは｢Visual Studio Codeに校正機能を追加する拡張機能｣だと説明しましたが、正確には｢Visual Studio Codeからtextlintを操作できるようにする拡張機能｣となります。Visual Studio Codeとtextlintはそれぞれ独立した別のアプリですが、vscode-textlintにより、textlintの機能をVisual Studio Codeに組み込むことができます。Node.jsとnpmのインストールNode.jsは、JavaScript言語で書かれたプログラムを動かすための基本プログラムです。以下の手順でインストールしてください。インストール手順下記URLを開く https://nodejs.org/OSに合わせたインストーラが自動的に一覧表示されるので、画面左の｢Recommended For Most Users｣と書かれた方のボタンをクリックする(2022年1月現在のRecommendedはバージョン16.13.2)保存先を指定して[保存]ボタンをクリックする保存した.msiファイル(MacOSの場合は.pkgファイル)をダブルクリックするインストーラ画面の指示に従いインストールするtextlintのインストールtextlintは画面UIを持たない文書校正プログラムです。textlintのインストールにはコマンドプロンプト(MacOSの場合はターミナル.app)を使用します。下記に C:¥textlint フォルダにtextlintをインストールする場合の手順を紹介します。インストール手順コマンドプロンプト(MacOSの場合はターミナル.app)を開くコマンドプロンプトに｢cd ｣(シー、ディー、半角スペース)と文字入力するデスクトップに戻り、C:¥textlint フォルダをつかみ、コマンドプロンプト画面内に(MacOSの場合はターミナル.app画面内に)ドラッグアンドドロップするコマンドプロンプトに戻りキーボードの[Enter]を押すと、コマンドを実行する場所が C:¥textlint フォルダに切り替わるコマンドプロンプトに｢npm install --save-dev textlint｣と文字入力し、キーボードの[Enter]を押す。デスクトップに戻り、C:¥textlint フォルダを開き、以下ファイルフォルダが作成されていることを確認する　C:¥textlint├ フォルダ node module├ ファイル package.json└ ファイル package-lock.json注意点textlintは、基本的には、自分の存在するフォルダおよびその下位フォルダの中にあるテキストファイルしか校正できません。コンテンツごとに最適な校正ルールは異なるはずだという考えに基づいています。PC内のすべてのテキストファイルをtextlintの校正の対象とする方法については、お手数ですが｢textlint インストール Global｣で検索してください。ルールプリセットのインストールルールプリセットとは、textlintで用いる校正ルールのうち多用されるルールをまとめたものです。｢語尾をですますで統一する｣｢二重否定表現は使わない｣などです。詳細にルールを設定することも可能ですが、初心者はルールプリセットを使った方が無難です。ルールプリセットは目的に応じて多数用意されています。入手可能なルールおよびルールプリセットについては、下記URLを参照してください。 https://github.com/textlint/textlint/wiki/Collection-of-textlint-ruleここでは｢技術文書向けルールプリセット｣を C:¥textlint フォルダ(注:必ずtextlint本体と同じ場所であること)にインストールする場合の手順を紹介します。インストール手順コマンドプロンプト(MacOSの場合はターミナル.app)を開くコマンドプロンプトに｢cd ｣(シー、ディー、半角スペース)と文字入力するデスクトップに戻り、C:¥textlint フォルダをつかみ、コマンドプロンプト画面内に(MacOSの場合はターミナル.app画面内に)ドラッグアンドドロップするコマンドプロンプトに戻りキーボードの[Enter]を押すと、コマンドを実行する場所が C:¥textlint フォルダに切り替わるコマンドプロンプトに｢npm install --save-dev textlint-rule-preset-ja-technical-writing｣と文字入力し、キーボードの[Enter]を押す。コマンドプロンプトに｢npx textlint --init｣と文字入力し、キーボードの[Enter]を押すと、不可視のファイル｢.textlintrc｣がC:¥textlint フォルダに作成される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の日本語化インストール直後のVisual Studio CodeはUIがすべて英語表記UIになっています。日本語表記に変更できます。以下の手順で変更してください。日本語化手順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が日本語になったことを確認するvscode-textlintのインストールVisual Studio Codeは、メモ帳(notepad.exe)と異なり、さまざまな拡張機能を追加インストールすることができます。以下の手順でvscode-textlintを追加インストールしてください。インストール手順Visual Studio Codeを起動する左端ツールバーより[拡張機能]アイコンをクリックする検索入力欄に｢vscode-textlint｣と入力する検索結果一覧より[vscode-textlint]アイコンをクリックする[インストール]ボタンをクリックする画面右下の[再起動]ボタンをクリックして再起動するvscode-textlintによる校正vscode-textlintで校正作業を行うには、ファイルを開くより先にフォルダを開く必要があります。注意してください。手順Visual Studio Codeを起動するメニューより[ファイル＞フォルダーを開く]を選ぶダイアログでtextlintのインストールされているフォルダを指定し、開く画面左のフォルダ内ファイル一覧より、校正したいテキストファイルを選ぶ校正ルールのカスタマイズ先ほど紹介した技術文書向けルールプリセットの校正ルールが厳しすぎると感じる場合、校正ルールをカスタマイズできます。しかしながら、校正ルールをカスタマイズするには、不可視ファイル.textlintrcを手作業で書き換えるという非常に難解な作業が必要です。カスタマイズ方法については下記URLを参照してください。 https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

UX Yokohama より新年のご挨拶

あけましておめでとうございます。UX Yokohama 代表の森山です。2022年が皆様にとって素晴らしい年になります事を心よりお祈りいたします。昨年もまた、世界規模の感染症の流行が収まらず充分に活動のできない年でした。主たる活動となったイベントのオンライン化が試行錯誤を重ねてようやくまとまった形になり、来年以降の進展を期待できるようになりました。本年のUX Yokohama は、オンラインIT勉強会を活発化させます。また昨年に引き続き、イベント・ブログ・等既存の情報発信の枠にとらわれない、多様な情報発信（書籍、Youtubeビデオ等）にチャレンジいたします。UXデザインには、新たな気づきを得る力・豊かな体験を生む力・人の行動を促す力があります。この力を正しく使えば社会をよりよくすることも可能であると信じます。UXデザインの発展のため、UX Yokohama は今年も様々な活動を企画運営する予定です。2022年1月1日 UX Yokohama 代表 森山 明宏

年賀状をKeynoteでつくる

最近は年賀状の印刷と投函代行をオンラインで依頼できるようになりました。｢宛名職人｣のような年賀状アプリがアプリ機能の一部としてオンライン印刷と投函代行を提供している他、特定のアプリに依存しないオンライン印刷サービスも多数存在します。このようなオンライン印刷サービスに印刷と投函代行を依頼する場合、宛先データはExcelやNumbersといったアプリを使って管理するとして、絵柄面データは互換性を考慮しJPEGかPNG形式で入稿したいところです。この絵柄面データ、アップル純正無料アプリ「Keynote」で作成できます。作成の手順手順は以下の通りです。準備として年賀状に適したフリー画像素材や筆文字フォントを集めておく作りたい絵柄面データの画像サイズを決める。ここでは日本郵便総合印刷サービスへの入稿用に幅1181×高さ1748ピクセルの縦長の画像とするKeynoteで新規書類を作成する新規書類のスライドサイズを＜カスタムサイズ＞＜幅1181＞＜高さ1748＞にする絵柄面を作成する、その際、スライドの上下左右端に2.1センチの余白をとるメニューより[ファイル＞書き出す＞イメージ]を選択し、スライドをPNGファイルとして書き出す念の為、出来上がったPNGファイルの画像サイズが幅1181×高さ1748ピクセルであることを確認する注意事項いくつか注意すべき点があります。スライドサイズ前述の通り、短辺1181×長辺1748ピクセルのPNG画像データをKeynoteで出力するには、スライドサイズを＜幅1181＞＜高さ1748＞、または縦横入れ替えて＜幅1748＞＜高さ1181＞にする必要があります)。この短辺1181×長辺1748ピクセルという数字は、プリンタの印刷解像度とはがきの用紙寸法から計算されています。たとえば、日本郵便総合印刷サービスでは「画像サイズ＝短辺1181×長辺1748ピクセル」と指定されています。これは「印刷解像度＝300dpi、用紙寸法＝短辺100×長辺148mm」から計算されたものです。もしもオンライン印刷サービス業者から画像サイズが指定されていない場合、印刷解像度は300dpiの二倍高解像な600dpiとした方が無難です。すなわちスライドサイズを＜幅2362＞＜高さ3496＞にする必要があります。上下左右端の余白大多数のオンライン印刷サービスでは「普通年賀はがきに印刷」「写真印刷用はがきに印刷」のいずれかを選択できます。そして「普通年賀はがきに印刷」を選択した場合、プリンタの技術的制約により、はがきの上下左右端5ミリにはインクを載せられず余白となります。絵柄面データもプリンタ制約に合わせて上下左右端5ミリを余白にしておく必要があります。さて、ここで問題になるのはKeynoteの見かけ上の寸法です。スライドサイズ＜幅1181＞＜高さ1748＞のスライドは、Keynote上では「幅41.66×高さ61.67cmのスライド」として扱われているはずです。この大きなスライドがオンライン印刷時にはがきサイズに縮小されるわけです。縮小を考慮した余白サイズは、スライドサイズ＜幅1181＞＜高さ1748＞の場合2.1cmです。2.1cmの余白がオンライン印刷時に5ミリに縮小されます。もしもスライドサイズ＜幅2362＞＜高さ3496＞の場合は4.2cmの余白をとってください。フリー画像素材と筆文字フォントの入手方法Googleで検索すれば多数ヒットしますが、有名どころを挙げておきます。フリー画像素材イラストAC https://www.ac-illust.com/日本郵便株式会社フリーイラスト集 https://www.post.japanpost.jp/send/create/freeillust/downloads/キヤノンクリエイティブパーク https://creativepark.canon/jp/エプソン年賀状特集 https://www.epson.jp/katsuyou/nenga/ブラザー年賀状特集 https://online.brother.co.jp/ot/dl/nenga/フリーフォントFONT FREE https://fontfree.me/Googleフォント https://fonts.google.com/?subset=japanese

開催報告：シカケ～したくなるデザイン～アイデアワークショップ【11/3横浜】

UX Yokohamaは、11/3(水曜 文化の日)、オンラインにてイベント「シカケ～したくなるデザイン～アイデアワークショップ」を開催しました。昨年に引き続きオンラインの開催でしたが、19人の参加申込がありました。今回のイベントでは残念なことに、途中退席が相次ぎ、参加者過小で後半のグループワークの開催を断念せざるをえませんでした。近年は無料の動画コンテンツが増えて誰でも気軽に様々な知識を得ることが可能となりましたが、ひきかえにアウトプットによる学びの強化が軽視されるようになった感があります。残念でなりません。次回に向けてイベントの在り方そのものを再考いたします。UX Yokohamaでは、今後とも、実践者から初学者まで幅広い層を対象としたイベントを企画してまいります。