会話体ライティング: ユーザーとデジタルプロダクトの心地よい対話

会話体ライティングとは

インターフェースに表示される言葉は、あなたが実際に顧客と対面して語りかける言葉と同じ働きをする 嘘やごまかしがなく、心のこもった人間らしい言葉が使えれば、顧客のエクスペリエンスはよりよいものとなります。 インターネットは、書き言葉と話し言葉を分断していた古い壁を壊し、第三の選択肢を出現させた会話体ライティングだ。

■書き言葉：形式的で小難しく、それがきちんとした言葉づかいだとされる →遅延型の通信方法：(有形物である紙(手紙など))

■話し言葉：より軽快で、回りくどさがなく、耳馴染みが良く、誰にでもわかりやすい気さくな言葉 →対面型のコミュニケーション、または電話 ただし、顧客に対して不適切な言葉を使うのは厳禁 →不適切な言葉とは、ぞんざいで、正確さを欠き、誤解を生みやすい言葉。文法が崩れていたり一貫性に欠けていたり、いい加減な言葉。

会話体ライティングでのルール

■会話では口にしないような言い方をしない デジタルプロダクトは、細やかに気を配る顧客サービス担当者と同等の存在なのだと捉え、取っつきにくい、威圧的な対応は避ける 例） ダイヤルしたい電話番号を入力してください → 何番におかけですか？ あなたが購入を希望する製品 → あなたのお買い物リスト パスワードをお忘れの場合 → パスワードをお忘れですか？

■文章の構造の違いを意識する マイクロコピーでは常に、話しかけている相手を主語にした表現である能動態での言い方を使う。 例） 望ましいと思われる支払い方法をお選びください(受動態) → 支払い方法をお選びください(能動態)

優れた会話体ライティングのためのヒント

■思い浮かんだままの言葉を使う 物事をどう言い表せば良いか、判断しかねるときは、ユーザーがあなたの目の前に立っていると想像してみましょう。 事前に言葉を組み立てたり練り上げたりせずに、できるだけ自然に、その場の思いつきに任せます。 二人一組で実際にやってみると効果的です。

■音読する その言い方は自然ですか？文章の流れはスムーズですか？生きた人間が言葉を発しているように聞こえますか？

■味気のない定型文は避ける 実際の会話で面白いのは、先の展開が決して予想できないことと、全く同じ会話は繰り返されないこと。 本物の会話の一部であるかのような文章を書きたいなら、実際に人と話してみる必要があります。

■質問をする 質問をすると、それに返事をするというやり取りの感覚が生まれ、複数の人間が会話を交わしているかのような流れをつくることができます。 「パスワードの送信先のメールアドレスを入力してください」ではなく「このリンクの送り先はどこですか？」という言い方をしてみましょう。 この言い方には、ユーザーの反応を促す効果もあります。 なぜなら人は、質問に答えられる状態にありながら答えずにいると落ち着かないからです。 ただし、質問数を増やしすぎると煩わしいインタビューになるため注意。

オブジェクトの省略記法

概要

「オブジェクトのプロパティ名」と「設定する変数名」が同じ場合、省略することが可能。

省略記法を使用しない場合

省略記法を使用しない場合は以下のようになります。

const name = "田中";
const age = 20;

// ユーザーオブジェクトを定義

const user = {
 name: name,
 age: age,
};

console.log(user); //{name: "田中", age: 20}

省略記法を使用した場合

省略記法を使用した場合は以下のようになります。

const name = "田中";
const age = 20;

// ユーザーオブジェクトを定義

const user = {
 name,
 age,
};

console.log(user); //{name: "田中", age: 20}

スプレッド構文

概要

スプレッド構文は配列やオブジェクトに対して使える記法で、要素の展開、要素をまとめる、要素のコピー・結合が出来ます。
以下よりそれぞれで出来ることや注意点を記載していきます。

要素の展開

スプレッド構文は、...(ドットを3つ)繋げて使用することで、要素を順番に展開することが出来ます。

const arr1 = [1, 2];
console.log(arr1); //[1, 2]
console.log(...arr1); //1 2

▼関数で使用するスプレッド構文の例
スプレッド構文は要素を順番に展開することが出来るので簡潔に書くことが出来ます。

const arr1 = [1, 2];
const summaryFunc = (num1, num2) => console.log(num1 + num2);

summaryFunc(...arr1); //3

要素をまとめる

配列の分割代入の際に、スプレッド構文を使用することで要素をまとめるというようなことが出来ます。
分割代入に関してはこちらにまとめています。

const arr2 = [1, 2, 3, 4];
const [num1, num2, ...arr3] = arr2;

console.log(num1); //1
console.log(num2); //2
console.log(arr3); //[3, 4]

要素のコピー・結合

配列やオブジェクトの要素のコピーにスプレッド構文を使用することが出来ます。

const arr4 = [10, 20];
const arr5 = [30, 40];

// arr4をコピーしてarr6という新しい配列をつくる
const arr6 = [...arr4];

console.log(arr4); //[10, 20]
console.log(arr6); //[10, 20]

同じように、配列やオブジェクトの要素の結合にスプレッド構文を使用することが出来ます。

const arr4 = [10, 20];
const arr5 = [30, 40];

// arr4とarr6を結合してarr7という新しい配列をつくる
const arr7 = [...arr4, ...arr5];

console.log(arr7); //[10, 20, 30, 40]

オブジェクトに対しても要素のコピー・結合使用することが出来ます。

const obj1 = { val1: 10, val2: 20 };
const obj2 = { val3: 30, val4: 40 };

// obj1をコピーしてobj3という新しいオブジェクトをつくる
const obj3 = { ...obj1 };

// obj1とobj2を結合してobj4という新しいオブジェクトをつくる
const obj4 = { ...obj1, ...obj2 };

console.log(obj3); //{ val1: 10, val2: 20 }
console.log(obj4); //{ val1: 10, val2: 20, val3: 30, val4: 40 }

注意点

=でコピーすることも出来ますが、そうすると参照値も引き継がれてしまうことがあります。
コピー後の配列に操作をしたつもりでも、以下のようにコピー元の配列にも影響が出てしまいます。

const arr8 = [10, 20];

// =でarr8をコピー
const arr9 = arr8

// arr9の0番目を100に書き換える
arr9[0] = 100;

console.log(arr8); //[100, 20]
console.log(arr9); //[100, 20]

このようなことがスプレッド構文を使用することで、元の配列に影響を与えることなく操作することが出来ます。

const arr8 = [10, 20];

// =でarr8をコピー
const arr9 = [...arr8]

// arr9の0番目を100に書き換える
arr9[0] = 100;

console.log(arr8); //[10, 20]
console.log(arr9); //[100, 20]

デフォルト値

概要

デフォルト値は関数の引数やオブジェクトの分割代入時に使います。
値が存在しないときのデフォルト値の設定をします。

引数のデフォルト値

JavaScriptでは値が存在しない場合に、デフォルト値が設定されていないとundefinedとなるため以下のようになります。

const sayHello = (name) => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはundefinedさん！

引数名の後ろに=で値を入れることで、デフォルト値を設定することが出来ます。

const sayHello = (name= "ゲスト") => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはゲストさん！

値が渡された場合はそちらが優先されます。

const sayHello = (name= "ゲスト") => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはゲストさん！
sayHello("田中"); //こんにちは田中さん！

オブジェクト分割代入のデフォルト値

オブジェクトの分割代入時にもデフォルト値の設定が出来ます。
存在しない値(今回の場合はname)を呼び出すとundefinedとなります。

const myProfile = {
  age: 20,
 };
 
 const { name } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちはundefinedさん！

分割代入時に変数名の後ろに=で値を入れることで、デフォルト値を設定することが出来ます。

const myProfile = {
  age: 20,
 };
 
 const { name = "ゲスト" } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちはゲストさん！

プロパティが存在する場合はそちらが優先されます。

const myProfile = {
  name: "田中",
  age: 20,
 };
 
 const { name = "ゲスト" } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちは田中さん！

分割代入

概要

分割代入とは、オブジェクトや配列から値を抽出する方法のことです。
配列から値を取り出して、あるいはオブジェクトからプロパティを取り出すことが可能となっています。 また、別個の変数に代入することも可能にします。

以下より、分割代入を使用しない場合と、分割代入を使用した場合を比較していきます。

分割代入を使用しない場合の記述方法

const myProfile = {
 name: "田中", 
 age: "20", 
};

const message = `私の名前は${ myProfile.name }です。年齢は${ myProfile.age }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

分割代入を使用した場合の記述方法

オブジェクトの変数名が長い場合や、プロパティの数が多くなった場合は冗長になってしまうので、分割代入を使用します。
{ }を変数宣言部に使用することで、オブジェクト内から一致するプロパティを取り出してくることが可能となっています。
プロパティ名が合っていれば、一部のみ取り出す、どんな順番でも取り出すということが可能となっています。

const myProfile = {
 name: "田中", 
 age: "20", 
};

▼一部のみ取り出す
const { age } = myProfile;

▼どんな順番でも取り出すことが出来る
const { age, name } = myProfile;


const message = `私の名前は${ name }です。年齢は${ age }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

また、抽出して別名をつけることも出来ます。
:(コロン)を使用して、別名を付けます。

const myProfile = {
 name: "田中", 
 age: "20", 
};

▼どんな順番でも取り出すことが出来る
const { name: newName, age: newAge } = myProfile;


const message = `私の名前は${ newName }です。年齢は${ newAge }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

配列に分割代入を使用しない場合の記述方法

配列のインデックス番号で値を表示します。

const myProfile = [ "田中", 20 ];

const message = `私の名前は${ myProfile[0] }です。年齢は${ myProfile[1] }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

配列に分割代入を使用した場合の記述方法

配列の分割代入は変数の宣言部分に[ ]を使用し、並列に格納されている順番に任意の変数名を設定することで取り出してくることが出来ます。
オブジェクトの時とは異なり、順番の入れ替えは出来ません。

const myProfile = [ "田中", 20, "北海道" ];

▼配列の分割代入
const [ name, age, birthplace ] = myProfile;


const message = `私の名前は${ name }です。年齢は${ age }歳です。出身地は${ birthplace }です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。出身地は北海道です。

配列の必要な要素のみ取り出す場合は以下のようにします。

▼1つ目のみ必要な場合
const [ name ] = myProfile;

▼2つ目のみ必要な場合
const [ ,age ] = myProfile;

▼3つ目のみ必要な場合
const [ ,,birthplace ] = myProfile;

アロー関数

概要

アロー関数はES2015で追加された関数の記法。

従来の関数

従来はfunctionという記述をしてから関数名、引数、処理内容を記述するという記法をしていました。

function func1(value) {
 return value;
};

console.log(func1("func1です。")); //func1です。

以下のように、関数を変数に格納することも可能です。

const func1 = function (value) {
 return value;
};

console.log(func1("func1です。")); //func1です。

アロー関数

アロー関数はfunctionを使用しない従来よりシンプルな記法です。
アロー関数の名前にあるように矢印のような記号(=>)を使用して関数を記述します。
{ }内の処理を記述する部分は従来通りとなっています。

const func2 = (value) => {
 return value;
};

console.log(func2("func2です。")); //func2です。

アロー関数の書き方の注意点

アロー関数には省略する記法があるので、注意が必要となっています。

1. 引数が1つの場合はカッコの省略が可能

const func2 = (value) => {
 return value;
};

console.log(func2("func2です。")); //func2です。

2. 処理を単一行で返却する場合は波カッコとreturnの省略が可能

const func3 = (num1, num2) => num1 + num2;

console.log(func3(10, 20)); //30

返却値が複数行になる場合は以下のように( )で囲むことで単一行のようにまとめて返却することが出来る。

const func4 = (val1, val2) => (
  {
   name: val1,
   age: val2,
 }
)

console.log(func4("田中", 20)); //{name: "田中", age: 20}

テンプレート文字列

概要

テンプレート文字列は、文字列の中で変数を展開する新しい記法。
以下より従来の文字列と変数の結合と、テンプレート文字列の記法を記載していきます。

従来の文字列と変数の結合方法

文字列と変数の結合のために + を使用します。

const name = "田中";
const age = 20;

const message = "私の名前は" + name "です。年齢は " + age + "歳です。";

console.log(messgge); //私の名前は田中です。年齢は20歳です。

テンプレート文字列

テンプレート文字列を使用する際は`(バッククォート)で文字列を囲みます。
${ }の中はJavaScriptで記述することが出来るので、文字列の中で変数を展開することが出来ます。

const name = "田中";
const age = 20;

const message = `私の名前は${ name }です。年齢は ${ age }歳です。`;

console.log(message); //私の名前は田中です。年齢は20歳です。