基礎を押さえて応用を楽しもう！CSSで見出しをデザイン！

こんにちは、JimdoJapanの古矢です。

今回は、5月31日（水）に東京渋谷のセミナールーム「SHIBUYA605」で開催した、Jimdoの新しいイベントについてご紹介します！

ホームページは完成したけれど、もっと洗練されたものにしたい。運用のコツを掴んで効果を高めたい。

そう思っても、なにをどう勉強すれば身になり、ホームページを改善できるのか…… 課題が漠然としがちです。

文章の書き方についての本を買ってみたり、SEOについてインターネットで情報を集めてみたり、自分で試行錯誤されているかたも多いと思います。情報を探すだけでも時間がかかりますし、本業で忙しいなか簡単なことではありませんよね。

そこで、ホームページにすぐに生かせる内容を学べる場を作りたいと思い、発足したのが「Jimdoスキルアップスクール」です。制作とJimdoのプロであるJimdoExpert が中心となって講師をつとめ、いろんなテーマで開催していきます。ただ学ぶだけでなく、すぐにホームページに生かせるような内容をお届けしていきます。「今すぐホームページを改善したい」と、やる気満々のかたはぜひご参加ください。地方でも開催していきますよ！

今回はその第一回目の様子をレポートします。ぜひご覧ください。

第一回目のテーマは「見出しデザイン」

見出しはホームページのコンテンツの中でも重要な機能のひとつです。今回はその見出しとはなにか、理解を深めた上で、CSSとよばれる技術を使った見出しの装飾方法を学んでいただきました。

見出しを正しく使うと、ホームページの見た目にメリハリが出て訪問者が読みやすくなるだけでなく、検索エンジンにも内容が伝わりやすくなります。SEOにも効果もあると言われているんですね。なので、きちんと理解した上で使うことが重要です。

今回、お申し込みの際に教えていただいたみなさんのホームページを前に映し、「ここは見出し中じゃなくて大を使ったほうがいい」など、ひとつずつ解説しながらフィードバックをおこないました。大人数のセミナーだと時間的に難しかったりするので、少人数のハンズオンセミナーならではの特権ですね。

おもわず「帰ってすぐ修正しなきゃいけないわー」と漏らしていたかたもいらっしゃいました。

ユーザーさんのホームページを見ていると、以下のような見出しの使い方をよく見ます。

• 文章機能を見出し代わりに使っている
• 大中小（h1,h2,h3）の使いかたがバラバラ

先ほどお伝えしたとおり、見出しはページの中でも「特に重要な情報」を検索エンジンに伝えてくれます。このように役割が違うことがわかると、たとえ文章のほうが自由に編集しやすくても、見出しと使い分けたほうが良い、と実感しますよね。

教科書や本の目次を思い浮かべてください。大きな章の分類もなく突然内容が書かれていても、唐突すぎてよくわかりませんよね。ホームページも同じで、内容を整理して説明してあげるようなイメージで、ページの上から大中小を使うといいでしょう。「大あっての中、中あっての小」とセミナーでも口すっぱくお伝えしていました。

ぜひ意識して使ってみてください。

後半は実際に、CSSとよばれる言語を使って見出しに装飾をする方法を学びます。

CSSとは、ホームページを作る上で使用される専門言語で、スタイルシートとも呼ばれます。決まった文字列を書き込むと、ホームページの見た目に、指定した色や線が反映されるというものです。

触れたことがない人にとっては正直暗号にしか見えないのですが（私もそうでした）

手元に基本のルールと型を書いた資料をお配りし、前で解説しながら作業を進めるので、ひとつひとつ着実に習得することができます。セミナーで使ったツールや練習用のホームページは、帰ってからも引き続き使えるので、復習も可能です。

CSSに触れるのは初めてだったみなさんも、その場で実践を重ねることで、最後の自習時間には好きな色や形を表現できるようになっていました。

そんな中、「方法はわかっても、デザイン的にどんな色がいいのかわからない」という的を得た質問も。

これは確かにそうですよね。とても難しいことだと思います。講師の山本さんからはこんなアドバイスが。

「素人感が出てしまうサイトは、色の使いすぎが多いんです。３色以上使う場合は、色の知識が必要といわれるほど難しい。まずは、見出しの文字とボーダー（下線などの装飾）は同じ色で統一してみましょう。そして見出しの色はロゴと同じ色にするだけでもホームページ全体の統一感が出るのでプロっぽい感じになります。背景画像と近い色を使うのもおすすめです」

たくさん色を使いすぎないことがポイントです。見出しだけじゃなく全体に言えることですので、この記事を読んでくださっているみなさんも、ぜひ一度ホームページの色使いを見直してみてくださいね。

講義から実践まで、３時間みっちりと受けていただいた感想をアンケートでいただきました。

• CSSは難しいという思い込みがなくなりました
• 0から覚えるのは無理だけど、今日教えて頂いたことを応用して活用していきたい
• 文章でフォントを大きめに設定をしていた所を、小見出しで設定するというのを早速やってみます
• 楽しかった。見出し小で設定するものもいろいろある事がわかりました

Jimdoは、みなさんが本業に注力できるように、時代にあわせて必要な機能を取り入れていっています。CSSは絶対に知らないといけない技術ではありません。でも、こういう見せ方をしてみたい！お客さんにもっと情報をわかりやすく伝えたい！とチャレンジしてみるのもおすすめです。

できなかったことができるようになったり、自分の力でホームページをパワーアップできると、とても嬉しくて日々の運用も楽しくなります。みなさんお帰りの際には「もっと力を入れてやっていこうと思いました！」とおっしゃって帰られました。

もっと踏み込んで勉強したい・すぐにホームページをレベルアップさせたいと思ったかたは、ぜひJimdoスキルアップスクールに参加してみてくださいね！

• 見出しの色でスムーズに内容を伝える
• SEOを意識した内容の構成
• 「内容の品質」から考えるSEOと、やってはいけない見出し表現のアレコレ 

Jimdoスキルアップスクール

「デザイン ブラッシュアップ講座」7/6(木) 14:00~ 

＜先着順＞定員になり次第受付終了とします。ご希望の方はお早めにお申し込みください。

Jimdoイベントの受付管理をしているDoorkeeperにて受付中です。ご希望のかたは上のボタンよりお進みください。Jimdoスキルアップスクール以外にも、多数イベントを開催中です。イベント・セミナー情報から、お近くのイベントを見つけてみてくださいね。