WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： トレンド >サービス紹介

構成案をもとにデザインやコーディングを行なう際、文章の打ち間違いやヌケモレを防ぐために、原稿をコピー＆ペースト（コピペ）する方が多いと思います。

ほとんどのテキストは問題なくコピーできるのですが、次のようなトラブルに遭遇したことがありませんか？

• 文字化けしたり表示されない文字がある
• 全角文字と半角文字が混ざっている
• 不要な空白や改行が入っている

今回は、これらのトラブルをすばやく解消できる便利な無料サービスをご紹介します！

文字化けしたり表示されない文字がある

問題

原稿の文章をコピーしてPhotoshopのキャンバス上にペーストし、フォントを変えたところ、なぜか一部の文字が空白になったり中黒になったりフォントが変わらなかったりして、上手くいかないということがありませんか？

例えば「休日は魚を釣って食べています。」という文を原稿からコピペした場合。

「魚」と「食」が中黒になってしまい、上手く表示されませんでした。

常用外漢字や旧字体ならやむを得ないこともありますが、こちらの2文字は誰でもよく使う常用漢字です。なぜこのようなことが起こるのでしょうか？

実はこの問題の原因は「康煕部首」というものでした。

詳しい原因は割愛しますが、用意された原稿のテキストの一部がこの「康煕部首」に変わってしまい、一見ごく普通の日本語のように見えていた漢字が部首の一部として表示されてしまっていたのです。

解決

それでは、この「康煕部首」を通常の漢字に一括変換してみましょう。
次のサイトを利用します。

https://ao-system.net/kangxiradical/

このサイト上の「文字を入力またはペースト」の欄に、「康煕部首」が混じっていると思われるテキストをペーストします。

すると、下の欄に「康煕部首」が漢字に変換された状態の文が生成されますので、これをコピペすればPhotoshop上でも問題なく表示されます！

どの文字を変換したのかも表示されるので、少し気持ちもスッキリします（笑）

また、変換前の「康煕部首」の箇所をよく見ると、少しだけ文字サイズが小さく、違和感があります。

「康煕部首」が混ざっている原稿も、その箇所が通常の漢字とはやや異なった見え方をしていることが多いので、上手くコピペができない時は一度原稿を凝視してみるのもおすすめです。

全角文字と半角文字が混ざっている

問題

Web制作に携わっている方の中では「原則、英数字は半角で入力する」というルールが浸透していると思いますが、全角英数字のほうが読みやすいと考える方も少なくないため、原稿の中で全角英数字が使われていることはあります。

また、スペース内に文を収めるために、半角カタカナが使用されることもあります。

Webサイト上では、全角英数字や半角カタカナはアクセシビリティの観点で不適切なので使用しないことが基本であるため、それらが原稿に入っている場合は変換する必要があります。

解決

ここでご紹介するサイトを利用すれば、全角と半角を一括で変換することができます。
https://so-zou.jp/web-app/text/fullwidth-halfwidth/normalization/

例えば「４月２４日のＡＢＣバンドのｺﾝｻｰﾄが楽しみです。」という文を変換してみます。
「変換対象のテキスト」というところに文をコピペします。

「文字の種類ごとの変換方法」の項目から、それぞれの文字種類について「全角」「半角」を選択します。今回は数字と英字を半角、カナを全角と選択しました。

「4月24日のABCバンドのコンサートが楽しみです。」と表示されました。これをコピペすれば問題のない文章に仕上がります！

不要な空白や改行が入っている

問題

最後に、文章中に不要な空白（スペース）が入っていたり、文章の途中で不要な改行が入っている場合です。

改行については手作業で修正することが一応可能ですが、空白についてはパッと見で分かりづらいことも多く、手作業での修正は効率が悪いだけでなくミスにもつながってしまいます。

こちらも、便利なサイトを利用しましょう。

解決

次のサイトの左の欄に以下の文章を入力します。

「つれづれなるまゝに、　日暮らし、硯にむかひて、
心にうつりゆくよしなし事を、　そこはかとなく書きつくれば」

https://html-css-javascript.com/n-space-tab/

「設定」の項目で、削除したい要素を選択しましょう。ここでは、すべての項目にチェックを入れます。

「半角・全角」を選択するプルダウンについては、「全角スペースのみ削除」「半角スペースのみ削除」「全てのスペースを削除」が選択できます。ここでは「半角・全角（全てのスペースを削除）」を選択します。

空白や改行がすべて削除されました！「改行は残す」「全角の空白のみ削除」なども設定できるので、英文の変換にも役立ちそうですね。

テキストを綺麗に整えよう

今回ご紹介したような便利なサイトは、ぜひブックマークやメモをして、いつでも使えるようにしておくのがおすすめです。

「変な文字が混じっている」「不要な要素がある」「統一感がない」といった問題をクリアした綺麗な文章を使うことで、見た目にも美しいですし、アクセシビリティ的にも良質な制作物にすることができます。

テキストの問題をツールですばやく解消することでミスを防げますし、時間を短縮できる分、もっと有意義な部分に時間を使うことができます！

こうしたツールを使いこなして、クオリティもスピードもあげていきましょう。