Aggregator

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップとして、伊原 力也さん（freee）+太田 良典さん（ビジネス・アーキテクツ）の『多様なユーザーニーズに応えるフロントエンドデザインパターン：ベーシック編』セッションのスライドなどを公開します。

• Googleスライド 実際のプレゼンで使用したスライドです。プレゼンテーションモードにしていただくと、コード右下の再生ボタンからスクリーンリーダーの読み上げ音声を聞くことができます
• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2017年11月）の時点のものです。

フォローアップメッセージ（補足など）

ご挨拶

ご参加ありがとうございました！マークアップが体験に大きく影響するということをお伝えできたなら嬉しく思います。少し手を掛けるだけでも対象ユーザーの範囲を飛躍的に増やせる可能性があるのが、Webフロントエンドの醍醐味です。それこそ、divをbuttonにするだけでも。ぜひ「規則を守る」という考え方から、「コードで体験をデザインする」という考え方にスイッチしてみましょう！またお会いできる日を楽しみにしております。

スライド

• Googleスライド
  • 実際のプレゼンで使用したスライドです。プレゼンテーションモードにしていただくと、コード右下の再生ボタンからスクリーンリーダーの読み上げ音声を聞くことができます。

告知

書籍　

• インクルーシブHTML+CSS & JavaScript
  • 本セッションで取り上げた本です。11月5日夜の時点では、amazonの在庫状況は特に問題なく、すぐに発送されるようです。
• コーディングWebアクセシビリティ
  • インクルーシブ本と同じ、ヘイドン・ピカリングさんの前著です。こちらはWAI-ARIAの入門書として、よりマークアップに特化した内容になっています。
• デザイニングWebアクセシビリティ
  • 戦略、要件定義、設計、デザインといった、Webデザインのワークフロー全体でアクセシビリティに取り組むための具体的なアプローチを紹介しています。

イベント登壇

• 11月9日（木）
  • Web・アプリとカラーユニバーサルデザイン
  • 配色をテーマにしたイベントです。動画配信を予定しています。
• 11月11日（土）
  • Japan Accessibility Conference
  • 国内最大級のアクセシビリティカンファレンス。初心者向けから上級者向けまで幅広いラインナップでお届けします。
• 11月22日（水）
  • GitHub＋OmegaTによる翻訳書制作ワークフローの可能性と課題
  • インクルーシブ本監訳の舞台裏を紹介する、ちょっとマニアックなセッションです。

あのTシャツ

• Use button, not div Tシャツ

質問へのご回答

アンケートやTwitterでお寄せいただいた質問や感想に回答します。

インクルーシブデザインという言葉について

質問・感想

• 「インクルーシブ」って言葉、単語に「？」と思いましたが、中身はアクセシビリティの話だったのでがっかりしてしまった…。（セミナーの内容に、ではなく、また「新しい名称」作り出したのか…という意味です）
• インクルーシブデザインっていろんな立場や（身体的）能力の人と一緒になってデザインをしていこう……という話と思っていたけど普通にアクセシビリティなのか……

回答

「インクルーシブデザイン」という言葉の一般的な意味はその通りで、極端な立場に置かれたユーザー (リードユーザー) と一緒にデザインをしていくようなことです。とはいえ本書ではもう少し広い意味で使っています。このあたりの話はAccSellポッドキャスト第122回でお話ししていますので、興味がありましたらお聞きください。

また、原著者のヘイドンさんが、なぜわざわざインクルーシブデザインという言葉を選んだのかを説明しているブログ記事もあります（英語です）。なぜアクセシビリティではなく、UXではなく、バリアフリー的な話ではなく、ユニバーサルデザインではなく、インクルーシブデザインという言葉を選んだのか。より詳しく知りたい方はこちらを読んでみると面白いかもしれません。

グラフィックデザイナーの定義

質問・感想

• グラフィックデザイナーのたとえは少し悲しいです
• グラフィックデザイナーは、実装のことはまったく考えていない人種……（と、本の中で定義されているのか）

回答

すみません。><
本書では「グラフィックデザイナー」を「コードが書けるデザイナー」の反対概念として言っていますが、もちろん、グラフィックデザイナーと呼ばれる人の全てが実装のことを全く考えていない、というわけではありません。ビジュアルデザイン専門であっても、実装のことやアクセシビリティのことを考慮したデザインができる人はいますし、そうであることが望ましいです。

マークアップ以外の職種

質問・感想

• エンジニアもさることながら、PM、ディレクター、デザイナーがちゃんと聞くべき内容だと思いました。
• コーダーだけでなくデザイナー、ディレクターも考えていくべきと思いました。
• そろそろ現場でがんばってなんとかするみたいなのは限界だと思うので組織として…みたいな話を希望します

回答

高津戸さんのCSSのセッションで、マークアップの現場に降りてきたときに手遅れになっているという例が紹介されていましたが、これはアクセシビリティにも良くあてはまる話です。上流からアクセシビリティに配慮しておくことが重要です。

Webサイト制作の全工程でアクセシビリティを考えてほしい、ということで書いたのが「デザイニングWebアクセシビリティ」という本です。これをデザイナーやディレクターの方に読んでいただけると嬉しいです。

組織にWebアクセシビリティの考え方を浸透させる取り組みについては、サイボウズの小林さんのお話（あなたの言葉で伝えるWebアクセシビリティ）が参考になります。

アクセシビリティとコスト

質問・感想

• どこまでインクルーシブを考慮するか、クライアントにどう説明するか（お金をもらうか）
• アクセシビリティのことをしっかり考えてマークアップした方がよいのは理解できるが、会社には「予算そんなにないから、そこまでやらなくていいよ」と言われるのが想像できる。案件によるのかな。
• アクセシビリティは売り上げに直結しないし、説明したり勉強会をやっても「今回はそういう人対象外だから」と言われがちです。SEOに絡めたほうが興味を持ってくれる気がしますよー（やること似てるし）
• アクセシビリティに工数が出せない場合がとても多いと思うのですが、どの程度の優先順位になるのでしょう？対象ユーザーが多い場合のみかなあ…
• アクセシビリティ対応って実際に現場ではどれくらい対応されているのでしょうか。その場合、別で金額を取っている？んですよね。

回答

今回のセッションでは、divで実装された「賛成」ボタンに対して、アクセシビリティを担保しようとしてあとからさまざまな機能を付け加えようとする例をご紹介しました。このように、望ましくない実装に対して後からアクセシビリティを担保しようとすると、大きなコストがかかることがあります。

それに対し、最初からbutton要素を使えば、それだけでもうキーボードアクセスやスクリーンリーダーへの対応ができているということになります。この場合、追加の作業は何も必要ありません。

このように、後から対応しようとすると大きなコストがかかりますので、最初から考えておくことが重要です。

ただし、動画やPDFなど、明らかにコストがかかるコンテンツも存在しますし、試験を実施すればその分はコストがかかります。このあたりの話は、書籍「デザイニングWebアクセシビリティ」の1章で触れていますので、興味ありましたら参照していただければと思います。

アクセシビリティをやらせてもらえないという悩み

質問・感想

• アクセシビリティについてはまだまだ実装されているサイトは少ないと思います。今後本当に普及するのですか？
• ワクワクするけれど、今の仕事では求められていない、やりたい

回答

アクセシビリティへの取り組みが必要な案件は近年増加している印象です。特に大規模案件や公共系の案件については、現在ではRFPにアクセシビリティ要件が含まれていないことのほうが珍しいように思います。

小規模案件では求められないことも多いと思いますが、そのような場合は要件定義でこちらから「今回はこのレベルまでの対応をします」と提案してしまうのもありです。逆に、要件定義で「アクセシビリティ対応は行わない」と明確に決めることもあります。決めておかないと後で問題が起きた際に費用内での追加対応を求められ、トラブルになることがあるからです。

このあたりの話も、書籍「デザイニングWebアクセシビリティ」の2章で触れていますので、参照していただければと思います。

おすすめのサイトは?

質問・感想

• お二人がインクルーシブデザイン的に一番いいと思うサイトを教えていただきたいです
• インクルーシブデザインが上手にできているサイトが日本のサイトにあるなら教えてほしいです

回答

サイトによっては「ウェブアクセシビリティ方針」を掲げて、自らの取り組みをアピールしていることがあります。方針を掲げているサイトはアクセシブルであることが多いので、それを見ると参考になるでしょう。(ただ、自治体系のサイトは方針を掲げていても正直それほど良くないことが多い印象です。民間企業のサイトを見たほうが良いと思います。)

また、私たちが所属しているウェブアクセシビリティ基盤委員会では、公的機関や一般企業における、ウェブアクセシビリティ方針策定と試験結果表示の実態調査を定期的に行っています。こちらも合わせてご覧ください。

その他、私の周りでアクセシビリティ文脈でよく話題に上がる企業や団体のウェブサイトをご紹介します。これらの企業や団体はアクセシビリティに取り組んでいくことを明言しており、そのサイトやプロダクトの状況にも注目していきたいと思っています。

• ChatWork
• サイボウズ
• サイバーエージェント
• アルファサード
• KDDIウェブコミュニケーションズ
• GREE
• ヤフー
• YAMAHA
• キヤノン
• NEC
• 富士ゼロックス
• 神戸市
• 東京オリンピック
• Apple
• Microsoft

現場が大変

質問・感想

• 視覚的に見えない部分までがんばるのは正直きつい…
• ここまで考慮しつつ実装のスピードを落とさない方法に苦心しそうと思いました

回答

現場の方にお勧めなのは、実際にスクリーンリーダーで一度アクセスしてみることです。そこまで時間はかかりませんし、これだけで多くの問題に気づくことができます。WindowsならNVDAが無料で利用できますし、iOSやOS XであればOS標準のVoiceOverが利用できますので、費用もかかりません。

最近はコンポーネント単位で実装することが多くなっていると思いますが、コンポーネントを実装するたびに、一度スクリーンリーダーでアクセスしてみると良いと思います。

スクリーンリーダーとその他の支援技術

質問・感想

• スクリーンリーダーの利用率はどうやって調べられるのか？
• スクリーンリーダー以外に考慮すべきツールはありますか？
• 本セッションはスクリーンリーダーに特化していましたが、それ以外はどんなものがあるか知りたかったです

回答

さまざまな状況の方がWebを利用するために使うツールを「支援技術」と呼びます。支援技術の代表格はスクリーンリーダーですが、それだけではありません。画面を拡大するツール、点字ディスプレイ、マウス操作を支援するツールなど、さまざまなものがあります（ちなみに、茗荷谷にある東京都障害者IT地域支援センターというところでは、こういったさまざまな支援技術の常設展示を行っているそうです）。

スクリーンリーダーの利用率をサイト側で調査するのは難しいです。スクリーンリーダーはブラウザの表示結果を読み上げるため、サイト側のログには通常のブラウザのUser-Agentが記録され、スクリーンリーダーを使っているかどうかはわかりません。

SVG

質問・感想

• 図版、表などもSVGで書いたほうがアクセシビリティ的にはよいのか？
• SVGスプライトの運用方法は皆さんどうしていますでしょうか？
• SVGスプライトにdisplay:noneを使うとグラデーションが反映されないので別の方法を使ったほうがよいと思いました

回答

SVGにすればアクセシブル、という単純な話でもありません。基本的には、テキストだけで必要な情報が伝わるようにする必要があります。そのテキストをSVGの中に入れるか、HTML側に入れるかという話になりますが、これは実際のブラウザやスクリーンリーダーの実装状況に照らして判断する必要があります。基本的に、img要素でSVG画像を参照しても、SVG内のテキストは読まれません。インラインのSVGであれば読まれることが多いですが、ブラウザやスクリーンリーダーによって処理が異なります。

表であれば、基本的にはHTMLのtable要素を使ったほうが良いでしょう。tableはアクセシブルでないという印象があるかもしれませんが、スクリーンリーダーは表を読むための専用のモードを実装していることが多く、行見出しや列見出しを読んでくれるなど、さまざまな支援があります。

SVGスプライトの運用は、アイコンの数が少ないときは良いのでしょうが、増えてくると管理がとても大変になります。illustratorのファイルを管理する必要もありますし、このあたりはみなさんそれぞれ工夫されているのではないかと思いますので、私も皆さんのノウハウをお聞きしたいところです。

参照される側のSVGスプライトにdisplay:noneを指定すると、Android4系の環境でグラデーションが反映されないという問題があるようです (他にも問題が起きる環境があるかもしれません)。ここで紹介したものは著者がおすすめする実装方法のひとつにすぎませんので、状況によっては別の方法を選択するほうが良いこともあります。

今回ご紹介した中には、VoiceOverでうまく読まれない事例もありましたね。さまざまな実装方法があり、どれかひとつが「正解」というわけではありませんので、状況によって適切なものを選ぶようにしていただくと良いと思います。

アイコンの実装

質問・感想

• <i>タグでアイコンを置くのはどうでしょうか？

回答

i要素が支援技術で特別扱いされることはありません。つまり、divやspanと同じ扱いだと考えてください。i要素にテキストを入れればふつうに読まれますし、中身が空でもaria-labelをつけて読ませることもできます。CSSのcontentプロパティでテキストを追加した場合も読まれます。

アイコンをどのように実装するかがポイントで、さまざまな実装方法があり、それぞれにメリットとデメリットがあるのは今回お話しした通りです。i要素を使う場合、contentプロパティを使ってアイコンフォントを入れる実装になっていることが多いように思いますが、その場合もやはり、今回ご紹介した豆腐の問題が起きることがあります。

ボタンとフォーム

質問・感想

• <button>はformタグが必要なので<a>とかそれこそ<div>でマークアップしていたのですが今後はbuttonを使うようにします
• button type の初期値 submit だったはずなので、type=“button” 指定した方が良かった気がする

回答

実は、button要素はform要素のないところでも使えます。今回ご紹介した本の前著にあたる「コーディングWebアクセシビリティ」の2章で説明されていますので、興味がありましたらご覧いただければと思います。

buttonのtypeの初期値はsubmitです。フォーム送信をしない場合は、type=buttonを明示的に指定したほうが良いですね。

buttonとinput要素

質問・感想

• <input type="button>と<button>でも使い分けたほうがいいものでしょうか？
• buttonタグを積極的に使ってると、プログラマーから、アンカーか input type=“button” に変えてってよく言われてた

回答

button要素はHTML4で登場した比較的新しい要素です (といっても、20年の歴史がありますが……)。

昔はbutton要素がなく、<input type=button>を使っていましたが、ボタンの見た目が制御しにくいという問題がありました。ボタンの見た目を変えたい場合には<input type=image>を使って画像をボタンにするということも行われていました。button要素であれば、中にさまざまな要素を入れることもでき、スタイルの制御も自由が利きますので、最近はbutton要素を使うことが多いかと思います。

ただ、バックエンド側のフレームワークを使っている場合、リンクやフォームコントロールをフレームワークの機能で動的に生成しなければならない場合があります。この際、フレームワークの機能がbutton要素に対応していないと、aかinputにせざるをえないことがあります。これはシステム側の制約ですね。

このような場合には、<input type=button>や<input type=submit>を使っても問題ありません。これらもれっきとしたボタンですので、キーボードでフォーカスが当たる、スクリーンリーダーで「ボタン」と読まれる、といったbutton要素と同じ特徴を備えています。

buttonとa

質問・感想

• ボタンはdivより<a>で組んでしまうことがよくあるのですが、<a>もあまり良くないのでしょうか？
• ボタンにbuttonではなくaタグを使うことに対してはどうですか？
• カーソルがポインターになるので<a>タグをボタンに使うことがありましたが、<button>を意識して使ってみようと思います
• 見た目buttonでもリンクの場合はa要素でお願いしますね

回答

今回はご紹介できませんでしたが、実は本書にはこの議論もあります（9章が該当します）。a要素はキーボードフォーカスが当たりますが、あくまでリンクですので、スクリーンリーダーにはリンクとして扱われます。見た目がボタンでも、機能がリンク（つまり別ページに遷移するもの）であればa要素を使ったほうが良いでしょう。なお、ボタンにマウスカーソルを載せた際にポインター（指）にすべきかどうか、という議論も同じ章で語られていますので、ご参考ください。

その他マークアップの質問

質問・感想

• 見出しの前に出てくる（日付などの）マークアップのしかたが知りたかったです

回答

今回はご紹介できませんでしたが、本書では解説されていますので、ぜひご覧ください。個人的には、可能であれば純粋に日付を見出しの後ろに置く (マークアップだけでなく、見た目上も後ろに置く) のが良いと思っています。

質問・感想

• aria-hiddenじゃなくhiddenなんですね

回答

aria-hiddenはWAI-ARIAの属性、hiddenはHTML5の属性です。似ていますが意味合いは異なり、aria-hiddenが見た目に影響しないのに対し、hiddenは見た目上も非表示になります (display:noneを指定した時と同じような挙動です)。

質問・感想

• マークアップに正解がないのか……

回答

今回はご紹介しませんでしたが、本書で著者のヘイドンさんは以下のようなことをおっしゃっています。

HTMLの構造は、自然言語の構造と同じように、ニュアンスで判断するべきです。役立つのか、じゃまなのか、少なすぎるのか、多すぎるのかといった観点です。

あることを表現する言葉が一つでないように、ある構造をマークアップする方法も一つではなく、どれが正しい、どれが間違っている、ということはないというのが著者の考えです。ただし、わかりにくい、伝わりにくいということはあります。マークアップの方法によって、伝わりやすくなったり、より多くの人に伝わるようになったりするわけです。この点も言葉と同じですね。

その他

質問・感想

• 八卦の「天」は、「乾」がベターな表現です（副業占いの観点より）

回答

ありがとうございます。勉強になります。占いには詳しくなく、八卦と言われても良くわからないというのが正直なところでした。よろしければ詳しく解説していただけると嬉しいです!

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップとして、前川 昌幸さん（イー・ネットワークス）の『コーダーの前仕事、後仕事』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2017年11月）の時点のものです。

フォローアップメッセージ（補足など）

「コーダーの前仕事、後仕事」のセッションを行った前川です。ありがとうございました。

内容はTipsやツールの紹介でしたが、何かひとつでも明日から使えるものがあれば嬉しいです。
また、セッション中からTwitterで、みなさんが利用しているツールやTipsをツイートしてくれました。ありがとうございます。
全てを拾ってはいませんが、いくつか紹介します。

• MAMPの有料版、MAMP Proについて @sivacchi さん
• node.jsのバージョン管理について @turusuke さん
• ウェブベースのエミュレーター、Browserstack（ https://www.browserstack.com/ ）について @AVELWP さん
• Photoshopでの書き出し設定について @crema さん

今日の他のみなさんのセッションのように、ひとくちに「コードを書く」といってもさまざまな方法論やツールがあるように、その前後の作業でも同様にさまざまな方法論やツールがあります。

私のセッションがきっかけになって、自身の作業の棚卸しや周りの人たちとの共有などしてみてください。

【告知：書籍】

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像
こもりまさあき、栄前田 勝太郎、坂上 北斗、塚口 祐司、前川 昌幸、松田 直樹 共著
エムディエヌコーポレーション (2017/9/20 発売)
価格（本体2,000円＋税）

Amazonでの購入

告知：イベント

WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」
高知で上記の書籍出版に関連したイベントを行います。
開催日時 2017年12月2日（土）13:30 開場
会場 高知市文化プラザ　かるぽーと　9F 第1学習室

「コーダーの前仕事、後仕事」のセッションを行った前川です。

アンケートでのコメント、質問

アンケートでのコメント、質問についてまとめます。

Local by Flywheel

Local by Flywheelについて、「使ってみます」というコメントが多かったです。導入の際には以下のエントリーが参考になります。

WordPressのローカル環境のためのGUIツールLocal by Flywheelが便利 - Capital P

Windowsでは、batファイルではなくcmdファイルが最近の流れ?

というコメントがありました。ざっと調べてみたところ、大きな違いは無いようですが、もしこのあたりアップデートするようであれば、どこかでアウトプットします。

Windowsのアプリも紹介してほしい

今回紹介したうちで、VirtualHostXとFluid BrowserはMacのアプリでした。すいません。
Local by FlywheelやGenymotionなど他のアプリやツールは全てWindowsでも使えるものですので、活用してください。

Photoshopの書き出し形式の「すべてのスケール」使うのキライですか？

defaultレイヤーでの作業に慣れきっているので、ほぼ使っていないです（キライではないです）。
結果同じ書き出しになるので、性に合う方を使うのが良いと思います。

乗算でパーセント指定された時に困っています。解決方法はありますか？

すいません、そのケースは遭遇した経験がなく。なにか見つかれば共有します。

会社では gyazo.com を使っています。便利です。

これでフィードバックの指示を作成されているデザイン会社さんと仕事しています。確かに便利ですね。ありがとうございます。

Gyazo

WindowsでPC、モバイル一通り利用できるエミュレーターを知りたい

クラウド型のエミュレーターのBrowserstackがカバー範囲も広いので良いかもしれません。

デフォルトで利用できるApacheで良いのでは？

私もその意見には同意する部分も多く、以前はMacに搭載されているApacheを利用していました。
ただ、並行した案件が多くなると管理が煩雑になってきたので、VirtualhostXなどを利用するようになったので、状況によってはツールに頼るのも選択肢のひとつと考えています。

XAMPPを使っていて、Browsersyncを使うことはできるのでしょうか？

できます。BrowsersyncのProxyオプションを利用すれば、Browsesync越しにXAMPPの出力を表示することができます。
（このやり方は弊社でも行っています）

Windows/Macが混在する環境の場合、違いをうまく埋める方法はありますか？

node.jsなどを利用するツールの場合は、ほぼほぼどちらでも動作するので特に気にする必要はないと考えています。
ツール類は確かにいろいろ変わってきますが、環境よりも成果物に差が出ないようにフォーカスして考えていくとよいのでは、と考えています。
なので、あくまでも弊社の場合はエディターなど利用するものは結構違っていますが、その違いを埋めることについてはあまり気を使っていません。

画像をきれいに軽量化して書き出すおすすめの方法はありますか？

私は書き出した後にImageOptimを利用して最適化しています。WindowsだとFileOptimizerなど似たようなツールがありますので、そちらを活用してみてください。

アイコンフォントやCSSスプライトの生成、更新時の管理方法が知りたい

アイコンフォントについては、生成するgulpを作成したことがあります。

https://github.com/enetworks/iconfontcreation。

このあたりが参考になれば。

CSSスプライトに関してはあまり最近使っていないので、すいません。目新しい管理方法などは持っていません。

対象ブラウザの決定はどのようにしていますか？提案していますか？言いなりですか？

提案できる案件であれば提案するのですが、そうでない状況の場合は、ほぼ抵抗せず、言いなりでやっています。

最近Sketchを使うことが多いですが、制作会社ではどうなのでしょうか？

個人的にSketchは所有していて、利用することはありますが、案件では弊社の場合は無いです。商流など環境的要因が大きいので、制作会社でも積極的に採用されているところはあると思います。

nodebrewは利用しませんか？

以前は利用していましたが、今年に入ってからnodenvに変わりました。

ルートパスってなんですか？

href="/hoge.html"という形で、「/」から書くファイルの指定です。説明不足失礼しました。

Photoshopでレイヤーマスクだとサイズの変更や確認がやりづらい、なにか良い対応方法はないか？

いまはこれと言った対応方法は持っていないので、なにかないか探してみます。

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、林 大輔さん（楽天）の『「闇」をなくすためのコミュニケーションとユーザーテスト』セッションのスライドなどを公開します。

• スライド（SlideShare）
• 音声
• 動画

フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。

メッセージ

「『闇』をなくすためのコミュニケーションとユーザーテスト」を担当しました林大輔です。

今回は楽天トラベルの実例を交えながら、インハウスの制作ワークフローの一例や、コミュニケーションとユーザーテストについてお話ししました。

• ワイヤーフレームの立ち位置、PM（ディレクター）とデザイナーの役割を明確にしておく
• ディレクターはデザイナーに案件の背景や課題を伝えて欲しい
• デザイナーは案件の背景や課題し、デザイナーの視点でベストは何か？を考える
• ユーザーテストによって得られるデータから、根拠のある議論が可能になる
• プロジェクトの初期段階（ワイヤーフレーム、デザインを作っている最中）からユーザーテストを実施することで、精度を上げることができる

案件のスケジュールや予算、会社規模など、様々な要因によりすぐに取り入れることが難しいこともあるかもしれません。もし、取り入れられる案件やタイミングがあった際は、私の話を思い出していただけると幸いです。

アンケートでの質問への回答

被験者が社内の人間だとネットリテラシが高い人に偏らないか？

偏ります。ここは、被験者を正しく集めるか、スピード感を持ってテストをするかのトレードオフだと考えています。ネットリテラシが高い人にテストをしても、改善点はそれなりに発見されます。
同様にオンラインのユーザテストサービスも、被験者がテスト慣れしているなどの偏りはあります。

ワイヤーフレーム作成段階でのテストってどうやるのでしょうか？

ペーパープロトタイプでテストをするとは、具体的にどういうことをされるのでしょうか？

本編で口頭でお話しした「ペーパープロトタイプ」という手法が有効です。
ペーパープロトタイプについては下記のサイトを始め、いくつか参考になる記事があります。
http://fladdict.net/blog/2013/12/paper-prototyping-1.html

オススメのUTサービスでオススメのものはありますか？

日本では本編でも紹介した「ポップインサイト」「UIscope」が有名だと思います。

ユーザーテストを省略することはありますか？

小さな案件・改修でも100%テストしていますか？

ユーザーテストをすることを強く推奨していますが、実施するかしないかは、PMやデザイナーの判断に任せています。

仕様書はPMがひとりで作るのか？

改善系のプロダクトが多いので、1人のPMで作ることがほとんどです。もちろん規模によって2人、3人でというプロダクトもあります。

ワイヤーフレームはPMが修正するのでしょうか？

ワイヤーフレームについては、デザイナーがデザインに着手した後は、多くの場合修正されません。最終的な仕様書にはデザインが貼られるカタチになります。

仕様書の課題はどのように決まるのか？

課題があって、はじめて案件・プロダクトになります。例ですが「ここの使い勝手が悪い」「〇〇というユーザー層にリーチできていない」という課題に対して、PMがどのように解決していくかを考えていきます。

お知らせ

楽天トラベルではUIデザイナーを募集しています。
ご興味持たれた方、ご応募お待ちしてます！

• トラベル事業 UIデザイナー

また、楽天トラベルのPMシニアマネージャー・齊藤満のインタビュー記事が掲載されています。PMに興味を持たれた方は、ぜひご一読ください。

• 「理想を追え、世界を見よ」 楽天トラベル 齊藤満が語った、PMこそ理想主義者であるべき理由
• 18年間プロダクトマネジメントを生業にして来た男を支える「5％の光」とは?楽天トラベル齊藤満氏の流儀【及川卓也のプロダクトマネジャー探訪】

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、益子 貴寛さん（まぼろし）、松田 直樹さん （まぼろし）の『ワイヤーフレームに必要な視点とワークフローの再考』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。

メッセージ

益子さんから

セッション4「ワイヤーフレームに必要な視点とワークフローの再考」を担当した益子貴寛です。

各登壇者からの「コミュニケーション」や「合意」という共通のメッセージがコインの表側で、クライアント（社内の担当者であれば事業責任者）の納得感を高めることがコインの裏側。両方をきちんとケアすることが「よい仕事」なんだ。そんな力強さをしっかりと感じたイベントでした。

クライアントの中でも、担当者は「完成度」を、決裁権者は「納期」を、というように、求められる満足が異なるケースもあります。こういった複数の満足を支えるひとつのカギであり、初動段階でのコミュニケーションや合意の蒸留物がワイヤーフレームだと考え、「たかがワイヤーフレーム、されどワイヤーフレーム」という気持ちで仕事をしています。そんな言外の思いが、みなさんに伝わったのなら幸いです。

以下、アンケートでいただいた質問に回答します。

Q1：写真撮影を実施するタイミングは、全体のワークフローの中でどのあたりがよいですか？

A1：私は、サイトマップをひととおり作り、主要ページ（数ページ分）のワイヤーフレームを描いたら、撮影の日程調整に入るパターンが多いです。つまり、設計作業のわりと初期の段階で動き出す感じです。撮影の実施（クライアント側の日程とカメラマンの日程が合うタイミング）まで、早くても2週間、遅ければ1か月くらいは先になるので、それまでに設計作業もだいぶ進んでいるはずで、当日までに撮影項目やそれぞれの仕上がりイメージを決めておくのはむずかしくないでしょう。

外観、社内や社外の様子、イメージカット（キービジュアルで使う雰囲気重視の写真）などであれば、それほど入念な準備はいらず、長くても2時間くらいの撮影で済むはずです。撮影費もそれほどかからないと思うので（たとえば5万円前後など）、ストックフォトなどを使うよりも、このようにオリジナルの写真を用意するとよいでしょう。けっこう、「撮影予算が取りにくい」という話を聞くのですが、そこはきちんとクライアントや社内に認めてもらう（見積り項目として堂々と立てる）ことが大切です。

もし予算が出にくければ、制作会社内や知り合いで（プロまでは当然いかなくても）撮影が上手な人に頼む方法もあります。あるいは、クライアントの社内で撮影が上手な人を探してもらい、写真を支給してもらう方法もあるでしょう。とにかく、「オリジナルに勝る素材はない」という意識が大切です。

一方、採用サイトで社員インタビューをともなう場合、プロダクトサイトでブツ撮り（製品の説明写真）の点数が多い場合などは、きっちりとスケジューリングし、数日に分けて実施することもあります。このような案件は、撮影費をきちんと予算取りできるはずで、その点は大きな問題はないと思います。

Q2：コピーライティングなどに関する作業について、見積書ではどのようにしていますか？

A2：きちんと項目を立てます。私は「コピーライティング／文章校正費」（素材準備段階の費用）や「エディトリアル費」（テストサイトを作るまでのブラッシュアップの費用）といった項目名を使っています。コピーや文章は、段階的に完成度を高めていくので、なかなかこれといった見積り項目を立てるのがむずかしい（工数が読めない）部分はありつつですが、まず企画や設計の段階（たとえばワイヤーフレーム）でその力や付加価値を認めてもらうことが、見積り項目の説得力を支えます。

Q3：ワイヤーフレームの完成度が高いと思いましたが、ディレクターにもデザインのスキルが必要ですか？

A3：ある程度はあったほうがよいと思います。というのも、デザイン的に完成度が低すぎるワイヤーフレームだと、アラにばかり目がいってしまい、肝心な「中身の検討」に意識を向けにくいからです。といっても、私も高いデザインスキルがあるわけではまったくなく、何とかここ数年、ワイヤーフレームの段階で、クライアントに「よし、行ける」と思ってもらえるクオリティにしようと心がけてきた積み重ねとして、お見せしたようなワイヤーフレームに行き着いた、という感じです。

Q4：優柔不断なクライアントのときは、どうしていますか？

A4：まず、「私たちの仕事は、提案である」という意識が大切です。クライアントが優柔不断であれば、こちらからどんどん提案し、リードして進めていきましょう。

このような前提がありつつ、テクニックとしては、担当者だけでなく決裁権者（上長など）に打ち合わせや意思決定に加わってもらう、A案とB案から選んでもらう（選択肢を狭める。ガラッと変えるのではなく、特徴的な部分を変えるだけでOK）、フィードバック期日をきちんと設定する、といったことが有効です。

そうそう、せっかくなので、とっておきの方法を教えますね。こちらが作ったワイヤーフレーム（などの中間成果物）について、「これでよいですか」「何か意見はありますか」という聞き方ではなく、「違和感がある部分はありますか」「どうしてもここは、という部分はありますか」という聞き方にすると、相手の視野を限定でき、リアクションのハードルを下げられます。公開日や納品日までタイトなスケジュールで進めなければならないときにも使える方法です。

松田さんから

以下、アンケートでいただいた質問に回答します。

Q：ワイヤーフレームはAdobe XDで作っているとのことですが、ワイヤーフレームとプロトタイピングを一緒に進めるメリットとデメリットは何ですか？

ワイヤーフレームは画面の構成要素を確定させるもの、プロトタイプは複数の画面のインタラクションを決めるためのもの、ということを前提とすれば、各画面のワイヤーフレームを作った後にプロトタイプとして画面間の関係性を検証できます。となると、複数画面の遷移において、整合性が取れているか、情報が冗長的でないか、ユースケースに適合するかなど、時系列での情報設計を行うことになります。これにより更にワイヤーフレームの精度を高めていくことが可能になります。

デメリットとしては、プロトタイピングを行うために想定されるすべての画面を用意しなければいけない点ですね。結構手間がかかります。そういう場合は手書きのプロトタイプにしてしまう方がいいかもしれませんね。

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、角田 綾佳さん（spicagraph）の『デザインの考え方、つくり方』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。

メッセージ

「デザインの考え方、つくり方」を、お話しさせていただきました角田綾佳です。今回はワイヤーフレームとビジュアルデザインの間にあるすれ違いや、わたしの実例、デザインの考え方などをお話しさせていただきました。当日はみなさんあたたかく聞いていただけて、緊張しながらも思いを出し切ることができました、ありがとうございました。

アンケートでは「デザイナーがこんなに考えているなんて」というありがたいお言葉をたくさんいただきましたが、同時に「わたしも同じことを考えていました！確認できて嬉しいです！」というお言葉もたくさんいただきました。大丈夫です、みんな頑張って考えています！

アンケートでの質問への回答

デザインで使っているソフトはなんですか？

WebはPhotoshop : Illustrator : Sketchで、比率は8:1:1です（元Fireworsk100%）。印刷物はIllustrator＋Photoshopで、スライドはIllustratorで作成しています。デザインデータを納品しますので、発注元の制作会社さんからの指定が使用の理由です。

苦手なジャンルはどうしてる？

ビジュアル部分の制作の場合に限ってお答えします。例えば「装飾的なデザインが苦手」「シンプルなデザインが苦手」というようなことなら、ターゲットの好む雑誌やWebサイトを見て、「どういうところが好まれているのかな？」というポイントを探し、取り入れます（例えば写真のあしらいや、フォント、色数など）。

イラストを描くには何からすれば？

一番簡単なのは、今描いているイラストを「描けていない」と思わず、人に見せて一つでも褒められたところを伸ばすことです。「こういうイラストを描きたい」というモデルがあれば、線の太さ、色数、塗り方、デフォルメの方法など、よく観察して真似してみてください。わたしは実は手で描くのは苦手で、ベジェ曲線だといくぶんきれいに描けます、ツールの力も最大限借りましょう！

CMSのデザインの時どういう制約が出ますか？

物によりけりなので、「どういう制約が出ますか？」ということを最初に確認します。例えば、フォームのプラグインを使う、という時には「確認画面があるか」「ページ遷移するか」というようなことを確認します。なるべく労力少なくデザインを当てて欲しいので、デフォルトのデザインを活かせないか考えます（一部カラー変更のみなど）。

他のデザインメソッドを知りたい

まとめられるように、最小単位を探っているところです。わたしも知りたいので、みなさんぜひオレオレメソッドを発信してください^ ^

コンバージョンをあげられるメソッド

すみません、フリーランスということもあって、結果を事細かに知る機会が少ないのが現状です。制作会社さんから「前回はこれで下がったので、上がったので」という情報はいただきますが、案件によりけりという感じです。矢野さんのバナーくるくる会での「写真とコピー！画像内にテキストがあるのがいい」という言葉がすごく参考になりました。

どうやって見積もりを作る？

いつも難しいのですが、基本は時間工数で出しています。そのほかに* いくら欲しいか* どれくらい手戻りがありそうか* やり取りのコストこれらを加味して決めます。

ディレクターや依頼者に恵まれないのでは？

とんでもない！そんな風に聞こえていたらすみません。これまでわたしがワイヤーフレームを超えて提案できるのは、お客様とやりとりしていただくディレクターさんの苦労があってのことです。様々な案件で、区切りをつけすぎず、任せていただけるのは嬉しいことです。いつもありがとうございます！（本当ですよ）

お知らせ

2017/10/28（土） WordFes Nagoya 2017　「デザイナー＆エンジニア座談会」参加します2017/10/28（土） DevLOVE関西2017 commitment ?"何"にコミットするのか？?　「デザインを「伝える」ためにすべきこと」というテーマで登壇します

2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、角田 綾佳さん（spicagraph）、矢野 りんさん（バイドゥ）の『コンテスト、「バナーデザインくるくる会」拡大版』セッションのスライドなどを公開します。

• 音声
• 動画

フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。

メッセージ

矢野さんから

セッション6「バナーデザインくるくる会」拡大版 の合いの手担当、矢野です。

最後までご参加下さりありがとうございました！
メディア制作においてデザイナーは、常にユーザー視点と発注者視点の板挟み。どちらも納得、満足させなければなりませんよね。
原則的には発注側とデザイナー、ディレクター皆が｢ユーザー満足」をともに目標とすることで結果が出せるはず。
どんな時もデザイナーはユーザーを主語にしてコミュニケーションすれば良くて、ディレクターも発注側もデザイナーの力量を信じ、任せれば問題は起こりにくいはずだと各セッションを通じて思いを新たにしました。

最後に、最近めっちゃ面白かった私のデザインタスクの要件定義メモ（うちのPMが作り、ぺっ！とメール送ってきました）。
??????????????????????????????
画像A（若い人が好きそうなアーティストのライブ風景）
画像B（若い人に限らず誰でも好きそうなアーティストのライブ風景）
目標 CVR8%増
??????????????????????????????
なんだよそれwwww
ふざ（以下略）

いや、準備します。してこます。あげてやろうじゃねえか！！！そのCVRを！！！

ではまた！

アンケートでの質問への回答

コンテストの周知が足りなかったことから企画について唐突に感じたかたがいらっしゃったようです????申し訳ありませんでした。最後のセッションでしっかり時間を頂戴したのに反省です。また、リニュアル用バナーの募集という前提なら「現在」のバナーをまずちゃんと紹介すべきでは？というご意見ももっともです?????♀?

知っていたら参加したのになあ！とおっしゃってくださったかたもいらっしゃるので、運用状況をもっと改善したうえで、コンテスト形式に挑戦してみたいです（ね！角田さん！）

お知らせ

• 12月恒例のShift11今年も参加します！皆様も是非ご参加下さい
• マーケ寄りのPM職を随時募集しております...自社サービス運用に興味のあるかた是非こちらをご覧ください！！！！

角田さんから

「バナーくるくる会」出張版でお話しさせていただきました角田綾佳です。
CSS Niteの中でも珍しい取り組みの、参加型コンテストでしたが、たくさんの方に応募いただき全て紹介し切れなかったのが本当に残念です。応募作品についてはこちらにまとめました。

• CSS Nite LP53 コンテストページ

講評ではビジュアル的な話だけでなく、矢野りんさんの現場のノウハウを伺えて、大変勉強になりました。同じお題にこれだけ複数のデザイナーが取り組む、というのはなかなか機会のないことです。「なるほど、そういう解決法が」と言う発見がひとつふたつあったのではないでしょうか。ぜひこれからの制作に生かしていただきたいです。

アンケートでは、「知っていたら参加したかった」「時間があれば」と言う声もいただき、周知の甘さ・時間配分については大変反省しております。しかし、「たくさんのデザインを見られて参考になった」と言う声も多数いただきました。

今回のことを教訓に、また次回たくさんの方に参加いただけるコンテストにしたいと思います。

アンケートでの質問への回答

素材を選んでいるサイトについて

応募いただいたデザイナーさんそれぞれ、ご自身のお気に入りのストックフォトがあるかと思いますが、角田の話をさせていただきますと「Adobe Stock」を契約しています。
日々の業務だけでなく、こういったプライベートワークや、ブログのアイキャッチなど幅広く利用しています。
様々なサービスがありますが、好みの写真がありそうかけんさくしてみて、合ったものを選ばれるといいと思います。

リンク集

バナーデザインくるくる会は、どなたでも開催いただけます。会の狙いなどについてはこちらにまとめています。
もし開催いただけましたら、こちらに出題された課題などフィードバックいただけますととても嬉しいです。

• バナーデザインくるくる会GitHub

神森さんから

コンテストについて

既存のランディングページのリニューアルというお題を設け、目的と現状の課題、打ち出したい要素を提示させていただきました。また、構成に関しては、ランディングページの基本構成で構築されることを目標とし、そこで展開される項目などは既存のものを使ってかまわないという形にしました。

実際の案件においても、ランディングページのようなものであれば、この要件で制作をお願いすることが多くあります。

今回応募いただいたワイヤーフレームでは、既存のものから大幅に情報をそぎ落とし、スッキリさせていただいたり、キャッチコピーも含めてご提案いただいたりと、短い時間の中でサイトから情報を引き出し、ワイヤーフレームに落とし込んでいただきました。

またこのような機会がいただけることがありましたら、応募期間をしっかり設けた上で、開催できればと思います。

長い時間のご参加、本当におつかれさまでした。

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップを公開します。

• （1）前川 昌幸さん（イー・ネットワークス）
• （2）伊原 力也さん（freee）+太田 良典さん（ビジネス・アーキテクツ）
• （3）中村 勇希さん（トゥーアール）
• （4）久保 知己さん（まぼろし）+伊藤 由暁さん（まぼろし）
• （5）鹿野 壮さん（ICS）
• （6）阿部 正幸さん（KDDIウェブコミュニケーションズ）
• （7）大串 肇さん（mgn）
• （8）高津戸 壮さん（ピクセルグリッド）

ツイートは下記にまとめました。

• CSS Nite LP54「Coder's High 2017」 - Togetterまとめ

強調スニペットについて詳しく解説する記事を Google は公式ブログに投稿した。クエリ書き換え強調スニペットや選択型強調スニペットなど、強調スニペットの新しい機能について紹介している。

- クエリ書き換えや選択型など強調スニペットの新しい機能をGoogleが導入 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki