スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~ : 第2回 文章を見直してみよう。気配りからはじまる、よりよい構成(2)

エキスパートコラム

Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~(全6回)

第2回:文章を見直してみよう。気配りからはじまる、よりよい構成(2)

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年1月26日更新

  • このエントリーをはてなブックマークに追加

閲覧数4,062views

このコラムをPDF形式でダウンロードする

"Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。

Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。

文章を見直してみよう

第1回コラム「文章を見直してみよう。気配りからはじまる、よりよい構成(1)」では、以下の3つについて解説しました。

  • ホームページ内での文体統一
  • 用語や表記の「不統一」に気をつける
  • 固有名詞の裏取り

今回のコラムでは、以下の3つの項目に注目し、解説していきます。

アルファベットと数字は半角や全角に統一する

テキストには、「全角」と「半角」の2種類があります。通常、ひらがな・カタカタ・漢字をはじめとする日本語は全角で入力します。しかし、アルファベットや数字には全角で入力するものと半角で入力するもの、2種類が存在します。これらは全角、半角どちらを使用しても間違いということはありません。どちらかの規則に従って使い分けることが大事なのです。半角・全角の使用で問題となってくるのは“無秩序な混在”です。

無秩序な混在による影響

EメールアドレスやホームページのURLなどは、半角でなければ支障が出る場合もあります。例えばよく見られるケースとして、Eメールアドレスの@(アットマーク)が全角で、それ以外が半角という混在があります。これは、人間が見れば「Eメールの文字」として判読可能です。しかし、ホームページのテキストは、人間以外にコンピューターも読み取っています。アットマークを含め全角が混在していると、メールアドレスとしては成立せず、メールを送ることができません。 ホームページのURLも、全角で入力するとホームページを開くことができません。

コンピューター言語の基本は半角の英数字で、世界共通として使われます。そういった観点から、アルファベットと数字は半角で入力することが一般的です。

いっけん同じように見える文字も、全角と半角ではその扱いが大きく異なる

Point

Windowsの一部のフォントでは、入力した文字が全角なのか半角なのか判断がつきにくい場合があります。意識して入力モードを切り替えられればよいのですが、あとから見直すとなかなか見つけにくいものです。こういった場合は、テキストをほかのソフト(Wordなど)にコピー&ペーストし、フォントを変更してみるとよいでしょう。英数字が横に広がって見えるなど、全角と半角の混在が見つけやすくなります。

見た目を整える目的で入れた強制改行の悪影響

長い文章を入力したとき、気になるのが行頭と行末の文字です。1行1行おさまりのいいように、行末で強制改行しているホームページが多々見うけられますが、これは場合によってはオススメできない方法です。

文章の区切りや意図的なポイントで改行してあれば、見た目は整って見えるものです。しかし、この整っている状態はあくまで「自分のインターネット環境で、自分の使っているブラウザの状態」でのことなのです。

ホームページの文章は、自分の意図する行末で改行するのではなく、その決められた幅で自然に改行するのが一般的とされます。自然な折り返しに任せるようにしましょう。

行末を、自分の意図する場所で改行した。PCでチェック時、見栄えは整っている

同じページを違う環境で閲覧すると、意図通りの改行となっていないことがわかる

機種依存文字

「Windows 7」「Windows 8」「Mac」「iPhone」「Android」など、コンピューターの種類は多様です。特定のコンピューターの機種だけで表示できる特殊な文字を「機種依存文字」といいます。

例えば、「(株)(一文字で表示される株)」や「①」などはWindows特有の文字であったりします。
とあるMacの環境では、まったく別の文字に置き換わって表示されることもあります。最近のコンピューターでは、こういった不具合も少なくはなってきましたが、まったく起こらないとは言い切れません。
例えば、1文字で表示する(株)は、「(」「株」「)」の3つのテキストで置き換えができますし、①は「(1)」や「1.」でも代用が可能です。

また、携帯電話などの絵文字も、パソコンでは表示されない場合があります。こういった場合、機種依存文字はなるべく使わないという選択肢も視野に入れてみましょう。

Windowsで①②などの文字が使われたファイルをMacにコピーすると、文字化けをすることがある

まとめ

前回に引き続き、小さな配慮の積み重ねで、ホームページのクオリティをより向上させていきましょう。ページを作ったあとは、ぜひテキストを見直してみてください。

  • 全角・半角はルールを決めて統一して使用する
  • メールアドレス、URLは半角で入力しないと機能しないことが多い
  • 行末の改行は強制的には行わず、自然改行にまかせる
  • 機種依存文字はなるべく使わないようにする

次回は、「Webデザイン・レイアウトの基本をおさらい」と題して、なんだか見づらくなってしまったページをなんとかする手法をお伝えします(つづく)。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2016/6/19~2016/6/25]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト