ホームページを飾るキホンとなる色や枠線もまずはエクセルからはじめよう！

---

ホームページをデザインする。これはWebデザインという言葉で呼ばれています。
あなたが作ったホームページをどのように飾るか？初めてホームページをつくる人にとって、これほど大きな悩みはありません。 ここでは、ちょっと変わったWebデザイン。エクセルを使ったWebデザインについてお話します。

直接エクセルに色や枠線をつける。 ご存知の通りエクセルには表計算の機能の他にセルの書式設定を利用して、文字の色を変えたり、 セルの色を変えたり、罫線を引いたりする機能がたくさんあります。
また次章でもお話しますが、オートシェイプという作画機能も備えています。

ホームページの場合は、ソースにタグを直接記入して保存します。 その後ブラウザを使って表示するまではどのような仕上がりになるのか目で確かめることはできません。 ここに１つホームページの面倒くささがあります。

その点エクセルを使えば、文章を書いて、そのまま直接、文字の大きさや、文字の色、背景の色、枠線の配置 を書き込むことが出来ます。 これはどういうことかと言えば、目で確認してホームページのイメージを見ながら作業をすることが出来る ということです。だから大事なタグの書き忘れなどを防ぐことが出来ます。

説明が長くなりましたので、さっそく図表を使って詳しく説明していきます。

色や枠線をつけるポイント

０１．エクセルに文章を貼り付ける（”エクセルにコピー＆ペーストしよう！”を参照）

０２．エクセルに色をつける

０３．必要なタグ、スタイルシートを洗い出す

０４．色を見ながらタグを記入する

０５．ソースに貼り付ける。作業の終了。

０１．エクセルに文章を貼り付ける

作業のはじまりです。前章でもご説明してきましたが、 ここで必要なのは、テキストレイアウトされたあなたが書いた文章です。準備できていますか？ （”まずは書くことから”を参照） あらかじめ用意していたテキストレイアウトされた文章を、真っ白なエクセルの”Ｂ２”セルに 貼り付けてください。（”エクセルにコピー＆ペーストしよう！”を参照）

０２．エクセルに色をつける

ここは図をご覧になってから説明文を読んでください。 ０１．で貼り付けたテキストの色や大きさを直接エクセルで変更していきます。 ここではちょっとしたコツをお話します。

キレイに見せる文字装飾のキホン

０１．見出しの文字は目立つようにする

文字の大きさを少しだけ大きくしたり、目立つように色をつけたりすると良いでしょう。 見出しはあなたが思っているよりもずっと大切です。 読者はまず見出しを見て全てを判断しようとします。 見出しに何を書くか？どのようにしたらインパクトのある見出しになるか？ 工夫してみてください。間違ってもいいですよ！あなたがおかしいと思ったとき すぐに修正すればいいのですから。

０２．文章の文字の大きさは全てのページで統一する。

普通に読む部分については文字の大きさを変更しない方が良いでしょう。 また、どうしても変更したい場合は後から説明するスタイルシートの利用をオススメします。

普通の文章の場合、文字の大きさや色その他は全ページ統一するように心がけてください。 どんなに読んで欲しい文章だとしても、読むか読まないか決めるのは読者です。 文字はなるべく大きく、読んでも目が疲れないようにを心がけましょう。 ただ、どうしても読んで欲しい！そういう部分については目立たせることができます。 この方法は次で解説します。

０３．文書中の重要キーワードは目立つようにする。

重要キーワードもなるべく統一した方が見やすくなります。 重要度ごとに色や大きさを区別したいときもキチンと統一するようにしましょう。 読んでもらいたい情報は読んでもらうための工夫が必要です。

重要キーワードは文中に４つまで、多くても６つまでにしましょう。 あまり多すぎると読みにくくなってしまうおそれがあります。 重要キーワードはなるべく目立たせるようにして、かつ読みやすさを重要視する工夫が必要です。 これ！という基準はありませんが、人優しいというより、あなたが読みやすい工夫からはじめてください。

（Ｓａｍｐｌｅ）

０３．必要なタグ、スタイルシートを洗い出す

キホンをふまえて必要最低限なタグ、スタイルシートをご紹介します。
初めは文字（フォント）関係を押さえておきましょう。

と、このように必要なタグを洗い出してみると、本当に必要なタグはとても少ないことが分かります。
私は、１度もホームページを作ったことがない人にはいつも言っていることなのですが、 「ホームページ作成に必要な知識には難しいことは１つもない！！」ということです。

大事なのは、「まず何がやりたいのかを見極めること」そして「そのために必要な知識はなんなのか？」 を考えてみることです。大部分のことは今あなたが持っている知識とその応用で カバーできるはずです。
いつかどうにもならないことが出てきます。そのときに初めて一生懸命に勉強すればよいのです。

タグの洗い出しが終わったらすぐに貼り付けが出来るように右側の空いたスペースに書いておきましょう。

０４．色を見ながらタグを記入する

次はさっそく貼り付けについて説明します。 前章でご紹介した方法と同じ要領でペタペタと貼り付けていきます。 エクセルで文字の大きさや色を変えているので、その通りにタグを貼り付けていきましょう。

（Ｓａｍｐｌｅ）

０５．ソースに貼り付ける。作業の終了。

タグを書き終えたらソースに貼り付けて上書き保存します。ブラウザ表示をして確認してください。

（Ｓａｍｐｌｅ）

またエクセルからテキストエディタに貼り付けたときに、 不要なTABスペースが大量に挿入されてしまいます。 このTABスペースはそのままにしていても差し支えありませんが、 気になる場合は次の方法で削除してください。


（Ｓａｍｐｌｅ）


ここまでで一応の作業は全て終了しました。 後はあなたの使いやすいようにいろいろ試してみてください。

最後になりましたが私の使い方をご紹介します。 メールマガジンを書いて、そのままWebサイトに更新するときなどこの方法で一気にやっています。

ホームページ作成ソフトを利用している人にとってはエクセルホームページ作成は あまり縁がないのかも知れません。 しかし、この方法の優れているところは、タグの知識が必要だというところです。 タグをおぼえながらホームページをつくる。これがホームページの上達の唯一の手段です。

エクセルを使ってホームページをつくる。これは、 手書きでホームページ作成を行う全ての人に贈る唯一の方法です。 （エクセルの腕も上達する１石２鳥の方法ですよ。。（笑：自画自賛））

次の章からはオマケのオマケです。 私が愛用しているエクセルを利用した、画像素材作成法をご紹介します。 完全に私のオリジナルですが、これまで使ってみて納得しているとても便利な方法です。 是非１度お試しあれ！（笑：繰り返し自画自賛、、、）

←　「確認してみよう！」に戻る

「画像素材もエクセルでつくろう！」に進む　→