キタックCGソリューションセンター

自分で触りたいWeb担のためのTips集

Webページブロック集【コア編】

2021年01月20日(水)

PV 56

最近のWebページって、グネグネ動いたり、マウスを動かすと何かが飛び出てきたり浮かんで消えたり、いろんな多彩な表現が実装されてますよね。技術の進歩ってすごいです。

インパクト重視のキャンペーンサイトみたいなものだったら、上記のような、見る者を唸らせる表現は効果てきめんです。

でも実際には、そういう表現が必要なケースって、そう多くはありません。

  • 価値をシンプルに伝えたいプロダクトサイト
  • 毎日訪問してもらいたいニュースサイト
  • 信頼性を担保したいコーポレートサイト
  • 長文を読んでも疲れない読み物サイト

例えばこんなようなサイトを作る場合に大事なのは、突き詰めると分かりやすさ更新のしやすさです。

そういうサイトにおいて、Webサイトに必要な要素ってそう多くはありません。

このシリーズでは、Webサイトに必要な要素をひとまず「ブロック」と呼び、それらを紹介していきます。

必要な要素が整理されていれば、構成を考えるときにも、サイトを運用していくときにも、きっと役に立ちますよね。

WordPress(ワードプレス)という、日本のほとんどのサイトが利用しているCMSで、ページを更新するための管理ページに「ブロックエディタ」なるものが搭載されました。ページのいろんな要素を「ブロック」のように積み上げていって、自在にページを構成できる、そんなすばらしい機能です。
そういうこともあって今回は、Webページの要素 =「ブロック」と表現してみました。

第一回目の今回は【コア編】として、最も基本的かつ代表的なブロックを紹介します。

大見出し

中見出し

【小見出し】

まずは「見出し」です。日本語では大見出し、中見出し、小見出しという言葉がありますが、Webサイトでも見出しの階層構造があります。階層があったほうが情報の整理もしやすいですしね。見出しの階層は3段階だけというわけでなく、必要とあらば6段階でも7段階でもいけます。
このサイトでは、上記のように3段階の見出しを用意してます。

段落

段落です。文章が入ります。

段落です。文章が入りますよ。

段落」です。基本的にはプレーンな文章が入ります。あえて言うまでもない、基本中の基本です。

リスト

  • ひとつめ
  • ふたつめ
  • みっつめ
  • 1番目
  • 2番目
  • 3番目
  • A
  • B
  • C

リスト」です。点をつけて箇条書きにするプレーンなものから、番号順、チェックマークなどのアイコンを付けたり、表現面ではいろいろできますね。

リンク

ここからどこかにジャンプします。なぜならリンクが貼ってあるから。

リンク」です。他ページへジャンプする設定で、テキストにも画像にも貼ることができます。
別タブ(別ウィンドウ)を開くかどうか、という設定も可能です。

画像

画像」です。丸くしたり、キャプションを付けたり、表現の手法はいろいろです。

セル1セル2セル3
セル4セル5セル6
セル7セル8セル9

」です。「テーブル」とも呼んだりします。
横軸の「行」と縦軸の「列」で構成されています。

区切り


区切り線」です。

引用

Googleアナリティクスでは、アプリがフォアグラウンドで開かれたとき、またはウェブページが開かれたときにセッションが開始されます。

https://support.google.com/

引用」です。他のWebページからテキストを引用するときは、きちんと明示する必要があります。

ボタン

ボタン」です。特にクリックして欲しいリンクなどに使いましょう。

Webページブロック集【コア編】は、このくらいにしておきましょう。

それではまた次回!

Share プリーズ

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

この記事は、感想を受け付けていません

書き手は私

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • こめ
  • 佐久間尭