UX Yokohama

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

記事一覧(160)

そのWordPress本当に必要?あらためてAmebaOwndを考える

CMS(コンテンツ・マネジメント・システム)はHTMLやCSSの知識を知らなくともホームページを構築・運営できるツールとして人気があり、その中でもWordPressは市場シェアナンバーワンを誇る人気の高いCMSです。しかしながら、WordPressは多機能過ぎるように思います。多様なニーズに対応するためには多機能である必要があるとはいえ、やりすぎではないでしょうか。UX YokohamaのウェブサイトはWordPressではなくAmeba Owndを利用しています。Ameba Owndには「無料で商用利用可」「高いデザイン性」「手軽で簡単」という素晴らしい特徴があり、且つ、UX Yokohamaでは多機能を必要としていなかったからです。本記事では改めてWordPressとAmeba Owndを比較しその長所と短所を整理します。入手およびインストール○ WordPress : 簡単○ Ownd : 簡単今はどのレンタルサーバー業者もWordPress対応を謳い、ボタンクリック1つで業者がWordPressをインストールしてくれます。入手およびインストールの手軽さは互角です。余談ですが、WordPressはサーバーにインストールするアプリケーションでありレンタルサーバー事業者とは独立して開発されています。AmebaOwndはレンタルサーバーと独自のCMSをワンセットで提供するインターネットサービスです。運用前の初期設定△ WordPress : やや難しい○ Ownd : 簡単固定ページ・パーマリンク・ディスカッション・購読・等々といった聞きなれない専門用語の多い分だけ、WordPressは難しいです。また、SEOのためにプラグインを導入するとその分の初期設定が追加になりさらに難しくなります。デザインの自由度○ WordPress : デザインテンプレート数豊富、カスタマイズの参考資料豊富△ Ownd : デザインテンプレート数必要充分、カスタマイズの参考資料無し個人的にはOwndのデザインテンプレート数は必要充分に思いますが、わざと地味なデザインを作りたいと言ったニッチな需要まで満たしてくれるのがWordPressのすごいところです。他方、カスタマイズの参考資料がないのはやはりOwndの弱点だと思います。プラグインによる機能追加○ WordPress : 豊富× Ownd : なしここは完全にWordPressの圧勝です。なんらかの理由で特殊な機能が必要となった場合、WordPressなら探せばなにかしらの解決策がプラグインとして用意されています。ただし、ニーズの高いECサイト機能については、OwndはBASEというショッピングサイトとの提携で実現しています。SEO(サーチエンジン最適化)○ WordPress : 全ページにSEOの設定を行うことができる(要プラグイン)△ Ownd : トップページだけ、Description等の最低限の設定だけができるOwndは確かに細かいSEO設定はできませんが、それほど不利ではありません。Googleは良質なコンテンツを優先的に検索上位に掲載する方針を掲げており、適切に記載すればブログ記事を検索上位に入れることは可能です。Googleの考える良質なコンテンツの特徴に沿ったブログ記事を書くことで検索上位を狙うことを「コンテンツSEO」と言います。例えば「amebaownd フォント css」というキーワードでGoogle検索するとUX Yokohamaの記事が検索結果第1位に表示されます(2019.5月現在)。これはOwndの会員にCSSをカスタマイズしたいというニーズがあり、当該記事が適切にニーズに応えていたからです。結論として「コンテンツSEO」を実践すればOwndにSEOの不利はありません。禁止事項○ WordPress : レンタルサーバー事業者によって異なるが、ほぼOwnd同等○ Ownd : 商業利用OK、アフィリエイトOK、アダルトNG、犯罪用途NG当然ですが犯罪用途OKのレンタルサーバーは日本にはありません。アダルトコンテンツについては、一部のレンタルサーバー業者のみが「書籍や雑誌として流通可能なレベルのアダルトコンテンツであればOK」としています。結論として、アダルトコンテンツを運営するのでない限り、WordPressとOwndは互角です。余談ですが、Google広告および一部のアフィリエイト事業者は独自ドメインを有しないサイトとパートナーシップ契約を結びません。AmebaOwndでも独自ドメインの利用は可能ですが、独自ドメインの取得および維持にはお金がかかります(目安3,000円/年)。バックアップ○ WordPress : プラグインにより可能× Ownd : なし、ただしIFTTTを使った裏技ありレンタルサーバーであれOwndであれ、ウェブサイトの内容が規約違反だとみなされ、ある日突然ウェブサイトを消されてしまう可能性はゼロではありません。また物理的なサーバーの故障でウェブサイトがなくなってしまう可能性もゼロではありません。バックアップはとても重要です。バックアップ機能のないOwndはこの点圧倒的に不利ですが、IFTTTというウェブサービスによってブログ記事をバックアップする裏技があります。

ウェブサイトを立てる前に考るべき「ブランド・アイデンティティ」

個人経営のお店の開業や任意団体の結成のためウェブサイトを開設しようとしている皆さんへ。ウェブサイト・名刺・封筒・チラシ・店舗内装など様々な「顧客接点」のすべてで統一感のあるデザインを行うと、顧客に強い印象を与え、高い宣伝効果を発揮するようになります。しかし依頼するあなたが「どのようなイメージで統一するか」を決めて業者に指示しなければ、統一感は生まれません。この「どのようなイメージで統一するか」という方針、より正確には「顧客にイメージして欲しい自分達の姿はなにか」を定める基本方針のことを「ブランド・アイデンティティ」と呼びます。顧客に強い印象を与えたいならば、ウェブサイトを立てる前に「ブランド・アイデンティティ」を考てておく必要があります。とはいえ、大企業が行なっているような広範囲な顧客接点をカバーする精密なブランド・アイデンティティの構築を素人が行うのは困難です。本記事では最低限の決め事としてのブランド・アイデンティティを解説します。最低限決めておくべきこと一覧コンセプト編100文字の団体紹介文団体名称とキャッチフレーズウェブサイトのURLビジュアル編ブランドカラーブランドロゴマークブランドロゴフォント100文字の団体紹介文団体紹介文とは、団体の結成目的、主たる事業、理念や価値観、等を簡潔に示したものです。なぜ100文字なのかというと、140文字以内の文章はtwitterで拡散しやすいからです。ホームページURLに20文字使い、ハッシュタグ用に20文字を見込んで、残り100文字が団体紹介文に使える文字数となります。団体紹介文はもっとも難しく、且つ、業者任せにできない部分です。自分達は何者なのかを再確認するため、100文字紹介文を書く前にまず以下の問いを自問してみてください。7つの自問自問1. 私達はなぜこの事業(活動)を始めたのか?自問2. 私達にとって重要な理念や価値観はなにか?自問3. 私達はナンバーワンか?(地域一番/業界一番/特定ジャンルで一番/等)自問4. 私達の競合他社より優れた点はなにか?自問5. 私達ならこの事業(活動)に成功すると誰もが確信する理由はなにか?自問6. 私達のイメージを3つのキーワードで表現するとしたらそれはなにか?自問7. 私達のイメージを顧客が顧客のよく使う平易な言葉3つで表現するとしたらそれはなにか?団体名称とキャッチフレーズキャッチフレーズとは、団体の結成目的、主たる事業、理念や価値観、等を団体紹介文よりもさらに短く20文字程度で簡潔に示したものです。団体名称は地名や創業者名にちなむことが多く、それだけでは団体の理念や主たる事業を連想する事が困難であることから、団体名とキャッチフレーズをワンセットで使用することでこれを補います。キャッチフレーズについて、大企業はキャッチフレーズで自社の理念や価値観を表現することが多いですが、それはすでに企業としての充分な知名度があるからです。大企業でない私達はキャッチフレーズで「主たる事業(活動)」を表現すべきです。 団体名称について、もしも団体名称が極端に長い時は「公式略称」も必要です。また、外国人の参加を想定している場合は「公式英語表記」も必要です。WebサイトのURLアドレスWebサイトのURLアドレスは、第二の団体名称と言えるほど重要です。可能な限り短く覚えやすく、かつ団体名称を連想しやすいURLアドレスを慎重に選んでください。短く覚えやすいURLを実現するには、団体独自のドメインを取得することが理想です。ドメイン(領地)とは、本来は数字だけで表現されるインターネット上の住所を、土地に例えて表現したものです。たとえばソニー公式ウェブサイトのURL「http://www.sony.jp/」のうち「www」はサーバーの名前であってドメイン(土地)ではありませんが、「sony」はソニーという企業の所有するドメイン(土地)、「jp」は日本国のドメイン(領土)というイメージで命名されたものです。企業団体のドメインは登録制です。所定の登録料(レンタル料)を払い、且つ未使用の文字列であれば自由に設定できます。無料レンタルサーバー上でWebサイトを運営する場合、団体独自のドメインは使えません。たとえばJimdoの無料プランで運営されるウェブサイトは「https://団体名.jimdo.com/」というURLになりますが、この場合の「jimdo」はJimdo会員が共同利用しているドメインであり、独自ドメインに比べURLの覚えやすさが一段劣ります。独自ドメインを使わない場合であっても、可能な限り短く覚えやすく、かつ団体名称を連想しやすいURLアドレスを慎重に選んでください。ブランドカラーブランドカラーはWebサイト、名刺、チラシなどの印刷物/電子配布物に統一的に使用する基調色となるものです。基調色を決めておくことで簡単にプロっぽい見た目のデザインが可能になります。念のためサブカラーも決めておくと良いでしょう。ブランドカラーが濃色なら同色相の淡色をサブカラーにすると見栄えが良くなります。ブランドカラーは「CSS3で色名称の定義された147色」から選ぶことをおすすめします。公的な色名称で色を指定すれば、発注する側も受注するウェブデザイン業者側も話を進めやすくなります。[参考] 原色大辞典 https://www.colordic.org/ブランドロゴマーク映像は文字よりも鮮烈に印象に残ります。お店や団体の認知度を高めるためにブランドロゴマークは重要です。ブランドロゴマークのデザインは自由ですが、ブランドロゴマークの基調色はブランドカラーをそのまま採用します。ブランドロゴマークについては、FacebookやTwitterのアイコンで使われることも想定しておく必要があります。2019年現在、FacebookやTwitterでは丸型のアイコンを採用しています。したがって、ブランドロゴマークをデザインする際には、丸型の派生的ロゴマークも一緒にデザインしておくことをおすすめします。ブランドフォント名刺や封筒に社名や住所を印刷する際に用いるフォントも決めておきましょう。フォントにも個性があり、フォントを統一する事でブランドイメージの醸成に役立ちます。たとえば米国Apple社はカタログにApple Garamondという非常に気品のあるフォントを使い続けていました。大企業でない私達はパソコンに最初からインストールされているものの中から選べば良いでしょう。MacもWindowsも、OSに標準搭載されているフォントは、そのOS上で印刷物および電子的配布物を作成する用途であれば商用利用可能です。つまり名刺やチラシにそのフォントを使えます。やや難解なのが「プリインストールされたアプリケーションに付属するフォント」です。商用利用可能かどうかはアプリケーション開発元とフォント開発元との契約によって決まりますが、いちいち確認するのが非常に面倒です。確実に商用利用可能と言えるのは以下のフォントです。Windows: MS明朝、MS P明朝、MSゴシック、MS Pゴシック、メイリオ、Windows10同梱の游明朝、Windows10同梱の游ゴシックMac: 以下リンク先に書かれているすべて https://support.apple.com/ja-jp/HT208968

ゲームUI/UX勉強会・ゲーム的でない楽しさを見つけよう【6/7横浜】

ゲームとは本来ゲームプレーヤーの積極的な関与によって勝敗の決まる能動的な娯楽ですが、現代のゲームアプリは本来のゲームの定義からは外れる受動的な面白さも合わせた複合的な娯楽となっています。すなわち「ガチャ」「壮大なストーリー」「美麗なグラフィック」などです。ゲームにおける「ゲーム的でない楽しさのあり方」を学ぶ勉強会を6/7(金曜)19時に横浜で開催します。 ▼このイベントについて「ゲームUI/UX勉強会」は、UXデザインの初心者を対象にした、スマホゲームの優れたUX事例を学ぶ気軽な集まりです。具体的には以下の内容で進めます。 
みんなで集まる いま人気のあるスマホゲームを適当に一つ選ぶ ダウンロードして1時間程度プレイするプレイしたゲームの良い点悪い点を指摘する挙がった指摘に共通する要素を考える今回は、特に「ゲーム的でない楽しさ」を重点的に考察していきます。ゲームとは本来ゲームプレーヤーの積極的な関与によって勝敗の決まる能動的な娯楽ですが、現代のゲームアプリは受動的な面白さも合わせた複合的な娯楽となっています。すなわち「ガチャ」「壮大なストーリー」「美麗なグラフィック」などです。ゲームにおける「ゲーム的でない楽しさのあり方」を事例を元に学んでいきます。▽UXデザインとはUXデザインとは、まずユーザーに提供したいUX(ユーザーエクスペリエンス、利用体験)を定め、その手段として製品やサービスを設計するものづくりの方法論です。UXの正確な定義は国際規格ISO9241-210:2010によって規格化されています。▼こんな方を対象としています社会人または学生で、UXデザインに興味のある方▼期待できる成果UXデザインに関する基礎的な知識を得ることができるUXデザインの作例に数多く触れることで、インスピレーションが生まれ、よりよいデザインを描けるようになる▼参加当日のご注意 今回はiPhone/iPodTouchの持参は不要です。新しい試みとして、ゲーム動画を再生しその映像からデザイン上の工夫を探します。最少催行人数は5人です。最少催行人数に満たない場合、講座は中止となります。中止の際は事前にご連絡します。プログラムは予告なく変更される場合があります。 イベント当日は参加者の皆様を撮影し、開催報告としてWebサイト等に掲載させていただきます。▼当日のスケジュール18:45 受付開始
19:00 あいさつ、進行説明19:05 講義「ゲームにおけるゲーム的でない楽しさ」19:50 実習 (動画を視聴する/気になった箇所のコメントを付箋紙に書く)20:00 コメントの集計20:10 ディスカッション(各位が特に印象に残った箇所を発表)20:30 終了▼講師紹介講師:森山 明宏略歴:ユーリカ株式会社代表、UXデザイナー、認定HCD専門家。国立信州大学理学部物理学科卒。家電メーカーで商品企画、OA機器メーカーでユーザビリティを担当し、2012年にユーリカ株式会社を設立。UXデザインの普及を目指し、主にWebサイトの改善や人材教育の分野で活躍する。最近の関心事は「善隣的デザイン」(UXデザインによる社会課題解決)。  twitterアカウント: https://twitter.com/hiro_ux▼UX Yokohama についてUX Yokohamaは、主に横浜市中区および西区でUXデザインの勉強会を開催する任意団体です。UXデザインに関する啓発、研究、実践、および交流を行うことを目的としています。  公式サイト:https://uxyokohama.amebaownd.com  FBページ:https://www.facebook.com/uxyokohama  団 体 名:UX Yokohama  設   立:2016年8月20日  所 在 地:〒231-0012神奈川県横浜市中区相生町3-61泰生ビル2F ユーリカ株式会社内 UX Yokohama 事務局  代   表:森山 明宏▼ゲームUI/UX勉強会の過去の開催実績ゲームUI/UX勉強会・ゲーム習慣化の工夫を見つけよう【12/14横浜】 
ゲームUI/UX勉強会・心地よい課金動線を見つけよう【9/12横浜】  ゲームUI/UX勉強会・キャラクターの上手な活用方法を見つけよう【7/23横浜】  ゲームUI/UX勉強会特別編・課金させるための行動経済学入門【11/8横浜】 
ゲームUI/UX勉強会・予想と期待のデザインを見つけよう【10/25横浜】 
ゲームUI/UX勉強会・ゲームの "あたりまえ機能" を見つけよう【9/13横浜】  ゲームUI/UX勉強会・見やすさ/分かりやすさ/操作しやすさの工夫を見つけよう【8/9横浜】 
ゲームUI/UX勉強会・エモーショナルな工夫を見つけよう【7/19横浜】 
ゲームUI/UX勉強会・モーションデザインを見つけよう【6/14横浜】  ゲームUI/UX勉強会出張版・スマホゲームのよいUI/UXデザインを見つけよう【5/8横浜】 
ゲームUI/UX勉強会・ゲームならではの文章表現を見つけよう【4/20横浜】  ゲームUI/UX勉強会・マイクロインタラクションを見つけよう【3/15横浜】 
ゲームUI/UX勉強会・スマホゲームのUX評価を体験しよう【2/8横浜】  ※ 過去の配布資料をWebで公開中。 https://sites.google.com/view/uxyokohama-archives▼支払に関するご注意参加費:無料参加者数の把握のため、無料イベントであっても申込手続きは必ずしていただけますようお願いします。 キャンセル受付の期限はチケット販売期限と同一です。キャンセルされる場合は、Peatix様の定める所定の手続きに従ってください。▼講座概要講座名称:ゲームUI/UX勉強会・ゲーム的でない楽しさを見つけよう【6/7横浜】 日  時:2019年6月7日(金曜)受付開始18:45 開催19:00~20:30場  所:なか区民活動センター 研修室1住  所:横浜市中区日本大通35 (中区役所別館) 最寄り駅:JR関内駅 (南口徒歩7分)みなとみらい線日本大通り駅 (3番出口徒歩4分) 司会進行:森山 明宏 (ユーリカ株式会社代表、UXデザイナー)  定員人数:16名 (先着順)対  象:社会人または学生で、UXデザインに興味のある方申込方法:申込みは以下ページ内専用フォームよりお願いします。http://peatix.com/event/679372参加費用:無料▼申込方法 申込みは以下フォームよりお願いします。 (または http://peatix.com/event/679372 よりお手続きをお願いします)

ゲームを題材にUXデザインを学ぶIT勉強会を 2019年6月7日(金曜)に横浜で開催

 UXデザインをテーマとするIT勉強会コミュニティ UX Yokohama (事務局:神奈川県横浜市中区、代表:森山明宏) は、UXデザインの勉強会「ゲームUI/UX勉強会・ゲーム的でない楽しさを見つけよう【参加費無料】」を2019年6月7日(金曜)になか区民活動センター (神奈川県横浜市中区日本大通35、最寄駅みなとみらい線日本大通り駅) にて開催します。  ▼このイベントについて「ゲームUI/UX勉強会」は、UXデザインの初心者を対象にした、スマホゲームの優れたUX事例を学ぶ気軽な集まりです。 今回は、特に「ゲーム的でない楽しさ」を重点的に考察していきます。ゲームとは本来ゲームプレーヤーの積極的な関与によって勝敗の決まる能動的な娯楽ですが、現代のゲームアプリは受動的な面白さも合わせた複合的な娯楽となっています。すなわち「ガチャ」「壮大なストーリー」「美麗なグラフィック」などです。ゲームにおける「ゲーム的でない楽しさのあり方」を事例を元に学んでいきます。▽UXデザインとはUXデザインとは、まず提供したい体験を定め、その手段として製品やサービスを設計するものづくりの方法論です。UX (User Experience) の正確な定義は国際規格ISO9241-210:2010によって規格化されています。▼講座概要講座名称:ゲームUI/UX勉強会・ゲーム的でない楽しさを見つけよう【6/7横浜】日  時:2019年6月7日 (金曜) 受付開始18:30 開催19:00~20:30場  所:なか区民活動センター 研修室1住  所:横浜市中区日本大通35 (中区役所別館) 最寄り駅:JR関内駅 (南口徒歩7分)みなとみらい線日本大通り駅 (3番出口徒歩4分)司会進行:森山 明宏 (ユーリカ株式会社代表、UXデザイナー)定員人数:16名 (先着順)対  象:社会人または学生で、UXデザインに興味のある方 申込方法:申込みは以下ページ内専用フォームよりお願いします。https://peatix.com/event/679372参加費用:無料▼講師森山 明宏 (もりやま あきひろ)略歴:ユーリカ株式会社代表、UXデザイナー、認定HCD専門家。国立信州大学理学部物理学科卒。家電メーカーで商品企画、OA機器メーカーでユーザビリティを担当し、2012年にユーリカ株式会社を設立。UXデザインの普及を目指し、主にWebサイトの改善や人材教育の分野で活躍する。最近の関心事は「善隣的デザイン」(UXデザインによる社会課題解決)。 twitterアカウント: https://twitter.com/hiro_ux ▼当日のスケジュール18:45 受付開始19:00 あいさつ、進行説明19:05 講義「ゲームにおけるゲーム的でない楽しさ」19:50 実習 (動画を視聴する/気になった箇所のコメントを付箋紙に書く) 20:00 コメントの集計20:10 ディスカッション(各位が特に印象に残った箇所を発表)20:30 終了▼参加当日のご注意最少催行人数は5人です。最少催行人数に満たない場合、講座は中止となります。中止の際は事前にご連絡します。プログラムは予告なく変更される場合があります。イベント当日は、参加者の皆様を撮影し開催報告としてWebサイト等に掲載させていただきます。▼UX Yokohama についてUX Yokohamaは、主に横浜市中区および西区でUXデザインの勉強会を開催する任意団体です。UXデザインに関する啓発、研究、実践、および交流を行うことを目的としています。公式サイト : https://uxyokohama.amebaownd.comFBページ : https://www.facebook.com/uxyokohama団 体 名 : UX Yokohama設   立 : 2016年8月20日 所 在 地 : 〒231-0012神奈川県横浜市中区相生町3-61泰生ビル2F ユーリカ株式会社内 UX Yokohama 事務局代   表 : 森山 明宏以上

iMovie用のセリフ字幕をつくるならKeynoteが便利

MacOS版iMovieを使ったことのある方はご存知でしょうが、iMovieは字幕を入れることができません。iMovieで字幕と呼ばれているものはタイトル表示に用いるための大きなサイズで装飾性の高いものばかりです。外国映画のセリフ字幕のようなものは入れることができないのです。どうしてもセリフ字幕を入れたい場合は、静止画データとしてセリフ字幕を作ってiMovieプロジェクトに配置することになります。この時、Keynoteのアウトライン編集機能を使うと非常に簡単にセリフ字幕を作成できます。手順は以下の通りです。あらかじめセリフ原稿をテキストデータとして作っておく。セリフ字幕の1画面を1行とする作りたい動画の画面サイズを決める。ここでは幅1280x高さ720ピクセルとするKeynoteで新規書類を作成する新規書類のサイズを<カスタムサイズ><幅1280><高さ720>にする字幕用のスライドマスターをつくる- 本文・スライド番号・プレースホルダは不要なので削除- 字幕用マスタースライドの背景は「塗りつぶしなし」- タイトルオブジェクトのサイズは幅45.16センチ・高さ5センチ- タイトルオブジェクトの位置は画面下端- タイトルオブジェクトのスタイルは「塗りつぶしなし」「ドロップシャドウあり」- タイトルオブジェクトのテキストは「文字色 白」「32ポイント」「ボールド」「文字上揃え」「文字左揃え」「行間隔1行」- タイトルオブジェクトのテキスト背景色は「黒 不透明度10%」- タイトルのフォントは太文字のゴシック体である「ヒラギノ角ゴStd」(上記タイトルオブジェクト修飾は、動画の内容に合わせて適宜カスタマイズしてください)表示をアウトラインモードに切り替える台詞原稿のテキストデータすべてをコピーして、Keynote画面左のスライドページタイトル欄にペーストする(セリフ原稿の1行1行がスライドページの1枚1枚に変換される)もしも文字色や文字サイズが不自然になっている場合は、すべてのスライドページを選択し、メニューより「スライドにマスターを再適用」を実行するメニューより「書き出す - イメージ」を選択し、出来上がった台詞字幕スライドをPNGファイルとして書き出す。その際に透明色を有効にする念の為、出来上がったPNGファイルのサイズが幅1280ピクセル・高さ720ピクセルで、背景色が透明であることを確認する以上です。ほぼ同じことをPowerPointのアウトラインモードを用いても行うことが可能です。ぜひお試しください。

ブログ記事を書くときは最初にユーザーゴールを決めよう

上手なブログ記事の書き方(いわゆるコンテンツSEO)は、ネットで検索すればたくさんの情報を入手できます。しかしながらユーザーゴールの概念についてはあまり語られていないようでしたので書いておきます。上手なブログ記事の書き方について書かれた記事を読むと「テーマが大事」「誰に何を伝えたいのかを意識することが大事」という主張を多数見かけます。その説明でも間違いとは言えないのですが、説明が不充分に思います。大事なのはテーマを決める前に「ユーザーゴール」を決めることです。ユーザーゴールとは「製品やサービスを用いてユーザーが達成したい目標」のことです。たとえばこのブログ記事のテーマは「ユーザーゴール」ですが、このブログ記事の読者のユーザーゴールは「上手なグログ記事を書きたい」のはずです。テーマとユーザーゴールを混同すると、ユーザーゴール達成に必要な情報については不充分なまま、重要でない情報ばかり詳しく説明するという、独りよがりな文章を書いてしまう恐れがあります。たとえば「〇〇したいなら△△を買え」というタイトルのブログ記事があったとします。そして記事本文中でなぜ△△を買うと〇〇が可能になるのかについての説明が延々と続きながら、△△の入手方法について一切説明がなかったとしたらどうでしょうか?読者は落胆することでしょう。読者のユーザーゴールはあくまでも「〇〇したい」だからです。そしてブログ記事を信じる限り、△△の入手方法がわからなければユーザーゴールは達成できないのです。逆に、どのようなささやかなユーザーゴールであっても、そのブログ記事によってユーザーがユーザーゴールを達成できたなら、読者は感謝して「いいね!」ボタンを押しSNSで記事をシェアすることでしょう。テーマの前にユーザーゴール。ブログ記事を書かれる方は常に心がけてください。おまけ:上手なブログ記事の書き方(要約のみ)記事の想定読者、および想定読者のユーザーゴールを決める(仮説を立てる)記事のテーマを決めるタイトルだけで記事の趣旨がわかるようにするタイトルには検索されやすいキーワードを含める本文を書く前にまず見出しだけを書いて全体像を明らかにする見出しにそって本文を書き進めるひとつひとつの文を短くする段落は3行程度に収めるわかりやすい文章表現を心がけるユーザーゴール達成に重要でない情報は思い切って削るですます調・である調の混在はダメ誤字脱字は絶対にダメ

超簡単ウィキシステム「MDwiki」を試す

UX YokohamaのウェブサイトはAmeba Ownd上で運営されていますが、Ameba Owndで採用しているCMS(コンテンツ・マネジメント・システム)は基本的にブログ用であり、技術文書のような長文のウェブコンテンツを掲載するのには向いていません。そのようなウェブコンテンツは一般に「wiki」と呼ばれるCMSを用いて運営されます。: https://ja.wikipedia.org/wiki/ウィキ無料で簡単に使えるwikiシステムを探したところ、「MDwiki」がもっとも簡単でしたのでご紹介します。MDwikiとはMDwikiとは、マークダウン記法で素早く書かれたウェブコンテンツを、素早くウェブサイトとして立ち上げることのできる、シンプルなCMSです。MDwikiの公式サイトもまたMDwikiで運営されています。MDwikiの見栄えについては公式サイトで確認してください。: http://dynalon.github.io/mdwiki/MDwikiの特徴MDwikiの最大の特徴は「CMSを構成するファイルが1つしかない」ということです。MDwikiは、その機能を「ウェブブラウザがウェブサーバー上に置かれたマークダウン形式ファイルを読み込むたびに、その都度マークダウンをHTMLに変換する機能」に特化し、一般的なwikiシステムにある機能のほとんどを実装しなかったために「ファイル1つだけのCMS」が可能になりました。特徴CMSを構成するファイルが1つしかないインストール作業不要、初期設定作業不要。ただウェブサーバー上に置くだけPHP不要、SQL不要。無料レンタルサーバー上に設置できる一般的なwikiシステムにある機能のほとんどがなくUIもない。ゆえに操作方法を覚える必要がない設置例(www.example.com/)├index.html ←MDwiki本体├index.md ←表紙├content01.md├content02.md :└navigation.md ←記事一覧MDwikiの制約MDwikiにはシンプルであるがゆえの制約もあります。制約MDwikiが対応するウェブコンテンツはマークダウン形式ファイル(拡張子を.mdに書き換えたテキストファイルで、記法としてマークダウン記法を用いたもの) のみである。マークダウン記法を知らないと作成できないマークダウン形式ファイル文字コードはUTF-8必須である。UTF-8に対応したテキストエディタを用意する必要がある新規投稿しても記事一覧は自動的に書き換わらない。手作業で行う必要がある記事一覧はナビゲーションメニューバーの形でしか表現されない。膨大なページ数のウェブコンテンツには向いていない全文検索機能がない。膨大な文章量のウェブコンテンツには向いていない編集履歴管理機能がない。多人数によるウェブコンテンツ編集に向いていないsitemap.xmlの自動生成機能がない。Google検索の対象にならない (手作業で書けば検索の対象になるので、表紙index.htmlについてだけsitemap.xmlを手作業で書くという妥協策がある)マークダウン記法は難しくないのですぐに克服できると思いますが、他の制約は回避困難です。制約が深刻な問題とならない用途に限って使うべきCMSと言えます。なおマークダウン記法については日本語Markdownユーザー会の解説記事をご参照ください。: http://www.markdown.jp/what-is-markdown/MDwikiの使い方手順は以下の通りです。ウェブサーバーをレンタルするMDwiki(mdwiki.html)を公式サイトより入手する表紙(index.md)を作成する、文字コードは必ずUTF-8にする必要であれば設定ファイル(config.json)も用意する(なくとも良い)必要であれば記事一覧(navigation.md)も用意する(なくとも良い)必要であればfavicon.pngという名前の32x32ピクセルのPNG画像も用意する(なくとも良い)mdwiki.htmlをindex.htmlにファイル名変更するFTPクライアントでMDwiki一式をアップロードする、上記すべてのファイルは同じ階層に置くウェブブラウザでindex.htmlを開く (もしもサイトURLが www.example.com ならば  www.example.com/index.html を開く)設定ファイル(config.json)と記事一覧(navigation.md)の作り方については公式サイトをご覧ください。: http://dynalon.github.io/mdwiki/おすすめのシステム構成おすすめのシステム構成その1MDwikiStarServer Free (無料レンタルサーバー)Notepad++ (テキストエディタ兼FTPクライアント)FireFoxStarServer FreeStarServer FreeはSterServerの提供する無料・無広告のレンタルサーバーです。会員登録の際に要求される個人情報は、メールアドレス、携帯電話SMS番号、生年月日のみです。レンタル期間は3ヶ月で、レンタル契約の継続申請を定期的に行わないと無警告で契約凍結され、さらに1ヶ月放置するとデータ抹消されるので注意が必要です。: https://www.star.ne.jp/free/Notepad++Notepad++はプログラマーに人気のあるWindows用テキストエディタです。多言語対応しており設定の切替で日本語版になります。またプラグインと呼ばれる仕組みによって機能を追加することが可能です。FTPクライアント機能は「nppFTPプラグイン」によって追加される機能です。Notepad++ (およびnppFTP) の素晴らしいところは、FTPサーバー上にあるファイルをダウンロードして編集し、直接FTPサーバー上に上書保存できるところです。StarServer FreeのウェブサーバーはFTPサーバーを兼ねていますので、Notepad++によってMDwikiのウェブコンテンツ(.mdファイル)を直接編集できるということになります。もちろんファイル追加やファイル削除も可能です。: https://notepad-plus-plus.org/FireFoxFireFoxはMozilla Foundationの提供するウェブブラウザです。なぜEdgeやSafariではなくFireFoxをオススメするのかというと、FireFox以外のブラウザではPC上にあるMDwikiが正常動作しないからです。FireFoxであればPC上にあるMDwikiであっても正しく動きます。アップロード前のプレビューとして使うことができます。: https://www.mozilla.org/ja/firefox/おすすめのシステム構成その2MDwikiGitHub Pages (無料レンタルサーバー)GitHub (編集履歴管理サービス)ATOM (テキストエディタ兼Gitクライアント)FireFoxGitHub PagesGitHub PagesはGitHub社の提供する無料レンタルサーバーです。プログラマーが自作ソフトウェアを紹介するウェブサイトを簡単に作成できるようにと無料・無広告・無期限で提供されています。GitHub Pagesを利用するには、GitHubの会員になり、ウェブコンテンツの編集履歴管理をGitHubで行う必要があります。実はGitHub PageにもMDwiki同様に「ウェブブラウザがウェブサーバー上に置かれたマークダウン形式ファイルを読み込むたびに、その都度マークダウンをHTMLに変換する機能」があるのですが、生成されたHTMLにはナビゲーションメニューバーがなく、ページ1枚だけの簡素なウェブサイトとして生成されます。: https://pages.github.com/GitHub GitHubはGitHub社の提供する編集履歴管理サービスです。ソフトウェアのソースコードの編集履歴を管理することで、バグが発生した場合に速やかにバグ発生前の状態に戻し発生原因を調べることができます。またGitHubはウェブコンテンツの編集履歴を管理する用途にも使用できます。GitHubは多人数の参加するソフトウェア開発プロジェクトを想定して設計されているため、非常に多機能でありすべてを理解するのは困難ですが、プロジェクト参加者が自分ひとりの場合であれば、ごく一部の機能だけ覚えておけば問題なく利用できます。また、MDwikiにはない編集履歴管理機能を補う目的でGitHubを利用することも上手な運用法といえます。: https://github.com/ATOM ATOMはGitHub社の提供するテキストエディタ兼Gitクライアントです。FTPサーバーにファイルをアップロードするのにFTPクライアントが必要であるのと同様、GitHubサーバーにファイルをアップロードするのにはGitクライアントが必要です。ATOMで編集したファイルはATOMで直接GitHubにアップロードできます。: https://atom.io/試験運用中ですさっそくUX YokohamaでもStarServerFree上にMDwikiを設置してみました。充分な実用性があると判断しましたら有料サーバーに移行する予定です。: http://uxyokohama.starfree.jp/index.md# UX Yokohama MDwiki Site## About This SiteMDwikiの動作確認用です。## About UX YokohamaUX Yokohamaは、UXを学ぶ横浜人のためのIT勉強会コミュニティです。横浜市内に在住在勤する人が気軽に参加し学び交流できる場をつくるため2016年に横浜で結成されました。主に中区西区を中心に活動しています。 navigation.md# UX Yokohama MDwiki Site[home](index.md)[GoToOwnd](https://uxyokohama.amebaownd.com/)config.json{"title": "UX Yokohama MDwiki Site", "additionalFooterText": "All content and images © UX Yokohama / "}

開催報告:WordPress初心者講座・ワードプレスを使ってみよう【4/28,4/30横浜】

ランディングページの中のカスタマージャーニー

ユーザーの日常生活だけがカスタマージャーニーではないカスタマージャーニーマップは、UXデザインにおけるもっとも有名な手法で、ユーザーの得ている典型的な体験を可視化するための手法です。ユーザーの典型的な体験を状況・心理・行動に分解して時系列順に整理し、さらに、製品・サービス・宣伝・店舗・その他企業からユーザーへの働きかけの全てを「タッチポイント」として追記します。オムニチャネルが当たり前化した現代のWebサービスにおいては、自分達のサービスの全体像を俯瞰するための最重要の手法になっています。ですがユーザーの典型的な体験とは日常生活だけではありません。あるひとつのユーザータスク(ユーザーが目的達成のために行うひとまとまりの手順)だけに着目した場合であっても、やはりユーザーは体験を得ており、カスタマージャーニーマップとして描くことができます。ランディングページ体験とCTAランディングページと呼ばれる宣伝広告用ウェブサイトは、長大な1枚のページに、コンテンツとしての文章や写真と、CTAボタン(Call to Action, 商品購入や会員登録などの企業として顧客に行って欲しい行動の総称)が配置される構成が一般的です。いくつかのランディングページを続けて読むと、ランディングページのコンテンツには決まったパターンがあることがわかります。このパターンは、実はマーケティング業界で用いられるAIDA理論に基づいて作られています。▼1.Attention(注意を引く) ▽オンライン広告を出稿して注意を引き、ランディングページに呼び寄せる ▼2.Interest(興味を持たせる) ▽ファーストビュー(扉絵とキャッチコピー) ▽問いかけ(困りごとや願望を思い出させる) ▽価値提案(困りごとや願望の解決した幸福な状態の提示)  ▼3.Desire(ぜひ欲しいと思わせる) ▽商品説明(特徴、他社優位、仕組み、等) ▽信頼獲得(実績、表彰、等) ▽不安解消(お客様の声、金額提示、返金保証、等) ▽クロージング(背中押しトーク) ▼4.Action(買わせる) ▽CTA(Call to Action)ボタンAIDA理論の重要なポイントは、消費者の心理と行動は企業からの働きかけによって徐々に変化していくということです。AIDA理論に基づいてデザインされたランディングページもまた、読み進むことによって読者の心理と行動が徐々に変化していきます。すなわち体験がそこに存在しカスタマージャーニーマップとして描くことができるのです。CTAボタンを最後に置く理由は、それがランディングページを読むというユーザータスクのカスタマージャーニーにおける最良のタイミングだからです。ページ冒頭にCTAボタンを置くランディングページもありますが、それはリピート購入者への配慮であり、初見者のためにはページ最後にCTAボタンを置くのが最良です。応用:ソーシャルゲーム体験とCTAユーザータスクもカスタマージャーニーマップとして描ける、という考え方はソーシャルゲームのCTA(ソーシャルゲームの場合は課金を促す表示)に応用されています。ソーシャルゲーム内に表示されるCTAは、ゲームのプレイヤーが「課金してでも直面するユーザータスクを達成したい」ともっとも強く願うタイミングで表示されます。「巧妙なゲーム内広告によってレアアイテムの希少性を煽られた直後」「ゲームにおいて大敗北を喫した直後」などです。CTAを表示するベストのタイミングを見極めるためには、ユーザータスクをカスタマージャーニーマップとして表現し直すことが必要です。このマップは経営者や株主に見せられる綺麗なマップとして描かれることはなく、UIデザイナーが画面フロー図を描く際にユーザーの感情の起伏を追記することで(または脳内でイメージすることで)表現されます。

UXデザインにおける "苦痛のデザイン" という概念

UXデザインでは、あえてユーザーに苦痛を与えることがあるUXデザインとは心地よさを与え不愉快さを取り除くことだと思われがちですが、必ずしもそうではありません。UXデザインではあえてユーザーに「適切にデザインされた苦痛(properly designed pain)」を与えることがあります。それはおもに以下の様な場合です:達成感を与えるための苦痛行為を禁止するための苦痛行為を誘導するための苦痛達成感を与えるための苦痛テレビゲームの中の世界では、あたりまえのように敵や障害物が現れてゲームプレイヤーを妨害します。当然ながら、敵や障害物はゲームのデザイナーが意図的に配置したものです。これは「挑戦」という人間の本質的な娯楽をゲーム内で再現するためです。ただ敵や障害物を配置するだけでなく、プレイヤーの能力レベルに合わせてゲームの難易度レベルを調節することで、プレイヤーは達成感や自己効力感という心地よさを得ることができます。ゲームではない製品やサービスにおいても「挑戦」の要素を盛り込むことで満足感を高めることができます。たとえば、Apple社製品は伝統的に取扱説明書を同梱しません。ユーザーが自分で操作方法を見つけていくという非常に「挑戦」的なデザインになっています。そしてApple社製品の難易度レベルはユーザーの能力レベルに合わせた適切な難易度(取説がなくとも問題ないほど使いやすい)になっています。行為を禁止するための苦痛人間には苦痛から逃れたいという無意識の欲求があります。そこで「特定の行為を行うと苦痛が与えられる」と予感させることで、特定の行為を阻止することができます。たとえば、火災報知器(発信機)のボタンは透明なプラスチックの保護板で覆われ、指で保護板を破壊しないとボタンを押すことができません。実は近年の保護板はそれ自体がボタンであってそのまま押し込めるのですが、見た目は昔ながらの強化ガラス風に作られています。これは子供がいたずらでボタンを押すことを阻止するためです。実は保護板には罪悪感(すなわち心理的苦痛)を強調する効果があります。誤報知が社会に与える迷惑の大きさを理解できない子供でも「いくらいたずらでも物を壊すのはやりすぎだ」という良心の基準があるため、押すことをためらうという仕組みです。行為を誘導するための苦痛禁止するための苦痛という考え方を発展させ、特定の行動を促すために苦痛を与えることがあります。童話「北風と太陽」において、太陽が旅人のマントを脱がせるために暑い日差しを浴びせたようなものです。行為を誘導するための苦痛は、ソーシャルゲームにおいてプレイヤーに課金を促すためによく使われます。たとえば、ソーシャルゲームの典型的な構成の一つとして「ゲーム内資源を獲得するためのサブゲーム + ゲーム内資源を消費して楽しむメインゲーム」の2段構成があります。サブゲームは大して面白いものではなく且つ現実の余暇時間を消費するよう設計されます。また、メインゲームはゲーム内資源を消費するほど楽しさが増すよう設計されます。プレイヤーはメインゲームを楽しむために積極的に現実の余暇時間を消費してゲーム内資源を入手しますが、現実の余暇時間は有限であるため、プレイヤーはある時点でメインゲームを楽しむことができなくなります。「いままで楽しかったゲームを楽しむことができない」という苦痛が与えられるわけです。そして、苦痛を感じているプレイヤーにタイミングよく課金によるゲーム内資源の購入を提案すると、課金を受け入れるプレイヤーが増えるという仕組みです。なお、タイミングを見定めるためにはデジタル行動観察によるプレイヤー一人ひとりの観察が必要です。ソーシャルゲームにおける苦痛のデザインは複雑なものですが、もっとシンプルな事例としては宣伝広告があります。宣伝広告の分野では消費者の物欲を煽るためのさまざまなテクニックがありますが、これもUXデザイン的には「欲しいのに持っていない」という苦痛をデザインしていると解釈可能です。