こないだ読んだ本の中で、ビジネスを戦争の比喩で語るのはいかがなものか、という指摘があって、気がついたことがあった。「あること・もの」について語る「言葉」の選び方によって、「あること・もの」がつまらなく見えたり、本質が歪むことがあるのだということ。
（読んでいた本：『一回半ひねりの働き方 反戦略的ビジネスのすすめ』平川克美 角川新書）

それから、今、こんな本を読んでいる。『誰のためのデザイン？-増補・改訂版』（D.A.ノーマン 新曜社）。認知科学の分野からデザインを考えた本で、初版では「人間中心のデザイン」とは何かを論じた書籍です。まだ1章しか読んでないけど、そこに、良いデザインの特性として「発見可能性」と「理解」があることをあげている。そして発見可能性を得るための心理的概念として「アフォーダンス」「シグニファイア」「制約」「対応づけ」「フィードバック」「概念モデル」をあげています。

なんでこんなことを書くかというと、こういう言葉や概念があることを知っていなければ、あるデザインを「良くしようとする議論」が立ちいかないからです。デザインに何かしらの問題があるとして、それが個々人の思う「なんとなく違う」のままだと、修正ができないけど、「シグニファイアがうまく知覚されていないのではないか？」「対応づけが理解しにくいのではないか？」などと切り分けられていけば、じゃあ、どういうふうにその問題を解決できるか？と話し合うことができるんだと思うんです。そういう概念とか言葉を持たないまま「なんとなくいい感じにする」ということだけでデザインの良し悪しが決められているから、結果的に使いやすくエラーのないデザインに仕上がっていかないんじゃないかな、と。

ウェブにも同じことが言えて、いろんなところからいろんな経緯を経てウェブを作る人になった時に、なんとなくみんな「話す言葉」が違っていて、戸惑うことが多いんですが、せめて、オライリーのシロクマとか、山猫とかを読んでいたら、話がしやすいのに、と、思うことが多いので、記事にしました。

そんなことを考えているのは私だけなんだろうか。
私と同じ言葉で話してほしいと、思っているだけなんだろうか・・・・。

せめて協働するチームの間では、語るための言葉がないと、お話にならないのではないのですかね、と思う次第なのであります。チームの他の人が読んでいる本を読んでみたら、その人が考えていることを、使う言葉を、もっと理解できるのかもしれない、ということかなあ・・・・。（私の最近の、読む本の選び方は、あの人も読んでいるから、ということが多いです。）本を読まないとこういう「言葉」を獲得できないのだと私は考えているのだけれど。本を読むのが苦手だという人も知っているから、なんとも言えないのだが。。。

コミュニケーションが、思考が、言葉に依っている部分が大きいということも影響するんだろうな。文字にならない、言葉にならないコミュニケーションも多くあり、大事ではあるんだろうけれど。

レスポンシブデザインでないサイトを作る方が珍しい昨今であるが、この手法があまりにも「軽く」みられている状況があることについて、物申したく、記事にしました。怒りに任せてツイッターでつぶやいたもののまとめです。

この記事をよく読んで欲しい人

• 自分は優れたウェブサイトのディレクションをしていると思っている人
• また、優れたディレクタになりたいと思っている人
• レスポンシブデザインのサイトをデザインしたことがある人
• また、レスポンシブデザインを考えてみたい人
• 自社のサイトがレスポンシブデザインのサイトであるウェブ担当者
• また、レスポンシブデザインを採用したいと考えているウェブ担当者

レスポンシブデザインとは？

その説明自体を今ここですると長くなるのではしょります（すみません検索してください）。一言で言うと、画面サイズに合わせてサイトのデザインが変わること、そのデザイン、と言えると思います。Adobeのサイトの説明がわかりやすかったので、参考にどうぞ。

https://helpx.adobe.com/jp/dreamweaver/how-to/responsive-web-design-basics.html

また、この記事で話すレスポンシブデザインの定義は、以下をお借りします。

1. Webサイトをスマホ対応させるためのアプローチ技術
2. CSSメディアクエリを核とする
3. ワンソース・マルチユース

出典：http://qiita.com/kohki-shikata/items/3bf5d0bb1269515dfdea

レスポンシブデザインが注目される理由

Googleさんが「レスポンシブデザインのサイトがいいと思うな」と言うようなことを表明したのが、大きな理由であったんじゃないかと思います。
https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=ja

じゃあなぜGoogleさんはレスポンシブデザインがいいな、と言うのか？
その背景について、ここからは想像のお話ですが、一応きいていただけると嬉しいです。

モバイルでインターネットをする人が増えてきて、そのために、モバイル用のウェブサイトやコンテンツを作る人が増えました。モバイル対応の先駆者たちが取った方法は、モバイル用のサイトを、PCサイトとは別に作る、と言う方法でした。初めはその方法が一般的だったと思います（私も作っていた時期があります）。そうすると、インターネット上には、主たる内容は同一だが、PCとモバイル向けと言う複数のページが存在することになります。また、大体の場合、PCとモバイル向けのページはURLが異なるものであることが多かったと思います。
この状況は、検索エンジンにとっては、2つの異なるページをインデックスしなければなりません。また、その異なるページが「デバイス別のページなだけであって、同一の内容を示すページ」として処理しなければなりませんでした。そのほかいろいろと、とにかく手間がかかる手法であったと言えます。
しかし、レスポンシブデザインであれば、「ワンソース」「デバイス間で共通のURL」になるので、検索エンジンがインデックスするときの手間が大幅に減ることになります。

・・・・と、言うような理由が、先にあげた参考記事にも、書かれています。Googleさんがレスポンシブデザインにする理由としてあげている内容です。

• URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
• 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
• 同じコンテンツのページをいくつも維持管理する手間が省けます。
• モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
• ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザー エージェントに基づくリダイレクトはエラーが発生しやすく、ユーザー エクスペリエンスを損なうおそれがあります（詳しくは、ユーザー エージェントを正しく検出するをご覧ください）。
• Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。

ここであげられていることは、検索エンジン側のメリットとも言えますが、ユーザにとっても、サイトを管理/運営する人にとっても、レスポンシブデザインはメリットが多い方法と言えます。

レスポンシブデザインは万能ではない

良いことの多いレスポンシブデザインにもできないことがあります。たくさんあります。しかし、レスポンシブデザインが持つ問題は繊細なことで、エンジニアじゃないと判断ができないことが多いんです。エンジニア、特にフロントエンドのエンジニアは、サイトの最終工程を担っているにもかかわらず、作業や仕事の流れ、意思決定の流れにおいては「下流」に配置されているように感じることが多いです。
ディレクターやデザイナが決定済みのことに対応すると言うような状況があまりにおおいです。
レスポンシブデザインのサイトを設計する際の意思決定にエンジニアが参加しないと、悲劇しか起こらないです。ディレクターやデザイナーが書いた青写真を実装できるかどうかの判断をエンジニアに確認しなかったら、あとあと「こんなのできませんよ」って言うことがボロボロ出てくるんです。

エンジニアの努力不足で実装ができない？
そう言うことももちろんあるでしょうが、レスポンシブのことをよくわかっているとは言えないまま、実装不可能なデザインや仕様を書くことが正しいこと、とは思わないでほしいです。エンジニアに聞け、素直に。

では、実装不可能なデザインや仕様になってしまいがちな原因はどこにあるのか？ここで、タイトルに掲げたことが出てきます。モバイルから考えないから失敗するんです。

そもそもサイトをレスポンシブデザインにする理由は？

サイトをレスポンシブにする理由は、そもそもなんだでしょうか？
Googleさんが良いって言うから、従っておかないと！と言う理由、それは大きいでしょうね。そのGoogleさんが目指しているのは「モバイルフレンドリー」です。スマホとかモバイルでウェブサイトを使う人にも、フレンドリーであれ、使いやすいサイトであれ、と言うのが理想なんです。モバイルフレンドリーに、なりたい。そう思うからレスポンシブデザインにするわけです。はい、ここから私の怒りポイントです。

＼じゃあなぜモバイルビューのデザインが出てこないんですか？！／　

モバイルフレンドリーを掲げたいからレスポンシブにするのに、出てくるのはPCビューのデザインだけなんですよ、大抵。それって何か、やっぱりモバイルはおまけってこと？？（以下しばらく、愚痴です…）

ここで、考えたい、モバイルビューのデザインが出てこない理由。
・デザイナーが作れない
・予算が少なくてデザイナーに頼めない
これですかね、恐らくは。

ウェブ担「レスポンシブデザインでお願いします」
ディレクタ「わかりました。ではデザインはモバイルビューから進めますね」
担「ええそうですね、楽しみにしてます」
ディ「お任せください」

これがあるべき流れだが、おそらく、現実はこう。

ウェブ担「レスポンシブデザインでお願いします」
ディレクタ「わかりました。ではデザインはモバイルビューから進めますね」
担「え、なんでですか、先にPCが見たいです」
ディ「え、でも、レスポンシブってそう言うものですよ？」
担「上司がそう言うのよくわかってないんで、PCでしかウェブ見ないんで」
ディ「あー、はい。」

とかじゃないかな。。。ここで頑張るディレクタもおそらくいないんだろう。そのぐらいモバイルへの意識が低いと思いたくないですけど・・・・。

レスポンシブデザインにまとわりつく「誤解」

レスポンシブデザインが、モバイルユーザーフレンドリーなサイトを作る時にメリットが多く「安価な」方法であるという誤解があるのではないかと思う。誤解です。だって結局「PCサイト」「モバイルサイト」の2つを作るのと同じぐらい手間がかかります。デザインからしてそもそも2つ考えるわけですから、安価になるなわけがない。レスポンシブデザインが「安価」と言う誤解がどうして生じたのかはわからないです。流行りだから、と勝手にレスポンシブサイトで決めてきて、モバイルのデザインも用意しないで、フロントエンドエンジニアに全部おっかぶせてるだけじゃね、と思います。

もしも、レスポンシブデザインが「安価」になるとすれば、それは「モバイルファースト」を採用して、「PCビューにはあんまりうるさく言わない」場合だけだと思います。かつ、保証する動作環境は「ブラウザ最新バージョン」のみです。もう少し丁寧な言い方をすると、CSS3に対応しているブラウザが前提。（それってどのブラウザですか？と問わねばわからない人は、そもそもレスポンシブサイトを手がけちゃいけない人かもしれませんよ・・・・・。）

モバイルから考えないレスポンシブデザインは「ありえない」

デザイナやディレクターがクライアントとモバイルビューを一度も検討しないままの「レスポンシブデザイン」なんかあり得ない。目的からも、実際の作業からも、両面において、本当にあり得ないと思います。モバイルファーストという言葉が出てこない提案は、レスポンシブデザインじゃなくて、Qiitaさんの記事の言い方を借りるなら「ダメポンシブ」になってしまう可能性大。

また、レスポンシブデザインを設計する際に「モバイルファースト」であれ、というのは何もつい最近言われていることではないです。3年以上前から指摘されていることです。モバイルファーストという考え方についても、単にモバイルから先にデザインする、ということではありません。ユーザーと向き合っているのそのウェブサイト、ウェブページの主たる目的は何なのかを問い、全面に出すこと、そしてそれは必ず、PCを含めたサイト全体のUXをどう構築していくか？というとても包括的な検証であるべきなのです。はい、そうです、話は「レスポンシブかそうでないか」ということが問題ではないのです。どのようなUXが望ましいか？という話であるべきなんです。レスポンシブデザインありきではない。

それでもレスポンシブデザインありきから話を進めるというのであればせめて、モバイルの見た目から考えるべきです。予算がかけられないならなおのことです。

3年ぐらい前から言われているのに、現状があんまり改善していないのが、とても悲しい。僕たちはもっと学び、前に進まなきゃいけないのではないだろうか。

例えばエクセルなどの文書で、こんな風に、テキストが書いてあって、それをWordPressの管理画面にあるテキストエディタに貼り付けた場合に、余計な書式が入ってしまって、結果、表示の崩れが発生する、ということが起こることがあります。

WordPressに限らず、CMSを使ってサイトを更新している場合の「あるあるネタ」ですね。実際に、表示崩れなどが起きて、修正のご連絡をいただくこともあります。

解決策としては、オフィス文書などからWordPressに直接貼り付けるのではなくて、一旦メモ帳に貼り付けるなどするとそこで書式が外れるので、そのように作業してくださいとお願いすることもありました。

しかし、それって面倒臭いんですよね。。。。おそらく。（ちなみにこれを書いている私は、オフィス文書で何かを書くということを苦手としておりまして、何か文章を書かねばならない時は、メモ帳のような、単純な機能しかないアプリケーションを愛用しております。）

他に何かソフトを使うことなく、解決できる方法はないものか？と、お問い合わせの度毎回、いろんな方法を試しておりましたので、そのことを共有したいと思います。

そもそも、何が起きるのか？

冒頭の画像のように、エクセルで作った文書から、セルを選択して、ビジュアルモードでコピペすると、こうなります。

テーブルになってしまいます。
この状態を、テキストモードで見るとこのようになります。

厄介なのが、幅の値が入ってしまうことです。今回はテーブルで起きたことですが、<p>タグでも同じようなことが起こり、幅や高さ、さらにフォントサイズやフォントファミリーの指定が入ってしまうことがありました。

こうならないように、安全に「貼り付け」をするには、どうするか〜？というお話です。

解決策1：テキストモードで貼り付ける

いきなりですが、大部分は、これで解決できると思います。
そもそも〜のところと同じようにコピーした文書を貼り付けると、以下の画像のようになります。

これで、OKです。

解決策2：「テキストとしてペースト」ボタンを使う

テキストモードを使うことが、例えばビジュアルモードから切り替えられないようにしているなどの理由で、難しい場合もあると思います。そんな時は「テキストとしてペースト」ボタンを使ってみましょう。

このボタンです。このボタンを押すと、こんな感じの画面になります。

プレーンテキストというのが、書式の付いていないテキスト、という意味です。
Wordから「リッチコンテンツ」を貼り付けたい場合はオフにして、とありますが、「リッチコンテンツ」というのが、書式付き（太字、色などの装飾付き）の文章ということです。
これを使って、実際にペーストして見ると下記のようになります。

書式なしでペーストされました。
ただし、わかりにくいのですが、この場合改行も無視されています。

テキストモードに切り替えて確認してみました。水色でハイライトされている部分に改行（正確にはエクセルのセルがふたつに分かれていたところ）が消えて、半角スペースになってしまっています。ちょっと、整形の手間がかかってしまいますね。

この2つが主な解決策になると考えています。

せっかくオフィス文書でキレイに整形したのに、それを「そっくりそのまま」貼り付けるのは無理ってこと？？

身もふたもないですが、たぶん、、無理です・・・・。

オフィス文書でキレイに整形したものは、あくまでその「オフィス文書」を作ったあなたのパソコンの中で「ちゃんと整っている」だけに過ぎない、と考えます。例えば、そのオフィス文書を、お客さんに渡すとして、その人の環境で「同じように見える」保証も、ないと思います。
それはなぜか？
パソコンで使っているフォントが違えば再現できませんし、オフィスのバージョンの違いでも表示が違う場合があると思います。たまたま、大体の方が同じソフト、フォントを使っているか事故がなくて「誰でも同じように見える」と思い込めるだけではないでしょうか。

また、そもそもオフィス文書とウェブの「文書」では、なんといいましょうか、「書式の形式」が異なるので、全く同じにはできないと思っています。一部互換性はありますが、全てではないです。似てますけど・・・。

ウェブの文章は「オフィス文書」のようにはいかない、ということを覚えておいていただければと思います！

おまけ：「書式設定をクリア」ボタンで書式を削除してみる

貼り付けた後の文書の書式を消したい場合はこのボタンが便利です。
この場合、消せるのは、<strong>タグや、<em>タグ、フォントの色や背景色の設定、styleプロパティを削除するようです。
テーブル関連タグの、幅や高さは「書式設定をクリア」ボタンを使っても消せませんでした。