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

手段としてのウェブ

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

2021年01月20日(水)

樋口大輔

0

5

PV 35

最近の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 プリーズ
書き手は私 樋口大輔

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

この記事のタイトル
Webページブロック集【コア編】
感想を送るノート
お名前必須
メールアドレス必須
ご意見・ご感想必須

ご入力いただいた内容は、当社プライバシーポリシーに基づき厳重に管理いたします。メールの返信以外には使用しません。プライバシーポリシーに同意の上、お進みください。


表示された5文字の英数字を入力してください。

確認画面はありません。
いったんページの上部に戻りますが、問題なく送信されます。

キタックCGSCコアメンバー

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